大前端学习之旅(7)-小程序获取用户登陆信息实战问题及解决方案
【摘要】 在学习大前端的微信小程序课程中,在学习到获取用户信息基本信息的时候会发现出现以下错误。同时有时候会发现没有弹出授权弹窗问题原因:经过查询微信官方开发文档,主要是由于调用函数引起。课程使用的微信开发库的版本较低,同时在课程发布后,微信对相关的接口调用做出了更改。同时由于近期课程学习的时候,本地安装的版本为兼容性最高的版本,多重因素的作用下,造成了以上问题解决方案:根据问题原因,查询了官方文档之...
在学习大前端的微信小程序课程中,在学习到获取用户信息基本信息的时候会发现出现以下错误。同时有时候会发现没有弹出授权弹窗
问题原因:
经过查询微信官方开发文档,主要是由于调用函数引起。课程使用的微信开发库的版本较低,同时在课程发布后,微信对相关的接口调用做出了更改。同时由于近期课程学习的时候,本地安装的版本为兼容性最高的版本,多重因素的作用下,造成了以上问题
解决方案:
根据问题原因,查询了官方文档之后,找到以下兼容性方案:
index.wxml 代码
<view class="container">
<view class="userinfo">
<block wx:if="{{!hasUserInfo}}">
<button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 获取头像昵称 </button>
<button wx:else open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
</block>
<block wx:else>
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
</view>
index.js 代码
Page({
data: {
userInfo: {},
hasUserInfo: false,
canIUseGetUserProfile: false,
},
onLoad() {
if (wx.getUserInfo) {
this.setData({
canIUseGetUserProfile: true
})
}
},
getUserProfile(e) {
// 推荐使用wx.getUserProfile获取用户信息,开发者每次通过该接口获取用户个人信息均需用户确认
// 开发者妥善保管用户快速填写的头像昵称,避免重复弹窗
wx.getUserProfile({
desc: '用于完善会员资料', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
success: (res) => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
},
getUserInfo(e) {
// 不推荐使用getUserInfo获取用户信息,预计自2021年4月13日起,getUserInfo将不再弹出弹窗,并直接返回匿名的用户个人信息
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
},
})
主要涉及的代码信息在图中已经标注,采用兼容的方案做相关的应对,仅以此文记录备查。
【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱:
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论(0)