[拆弹时刻]4月13日前更新wx.getUserInfo和getUserProfile授权获取问题的解决方案
[图片]
论坛里有不少人疑惑新版的getUserProfile是不是已经上,同时发现开发环境中原有的老方法已经不支持了,这里我为大家集中解决下疑惑~
1、线上是否已经不支持wx.getUserInfo老方法了?
支持!目前,根据官方文档说明:在4月13日前发布的,线上环境2.16.0基础库以下已经不支持老版方法。(4月8日更新,怀疑官方已提前发布)
[图片]
本人今天4月6日10点半线上支持老方法,但是4月8日发布2.16.0以下低版本已经去掉弹窗授权了。请大家尽快更新发布新版方法
2、哪些环境已经是新方法了?
开发环境(包括但不限于IDE工具,真机调试),微信后台提供的体验版环境,且已不支持老办法。
3、新老两种方法是否并行?
线上环境:目前并行(4月13日前),但getUserProfile新方法 只在2.10.4以上版本支持。
开发环境和体验版:不并行,不支持左右横跳哈。
4、如何解决兼容性适配?
上才艺啦,呸,上代码。
先来看下原本代码的授权逻辑
[代码]//老的逻辑
wx.getSetting({
async success(res) {
console.log(res.authSetting);
//判断小程序用户是否授权
if (res.authSetting['scope.userInfo']) {
//已授权
} else {
//未授权情况
}
}
})
[代码]
之前主要通过wx.getSetting的方法来判断,而现在重大的改变是老方法getUserInfo不再弹窗,就算改成getUserProfile弹窗授权,新方法中getSetting中scope.userInfo 这个值并没有返回(这里跟文档有些出入,不知道官方后面会不会修正)
[图片]
[图片]
同时,这里需要做兼容判断,把获取到内容存在数据库中,避免反复弹窗骚扰用户。
[代码]//根据官方文档 做了一些修改
Page({
data: {
userInfo: {},
hasUserInfo: false,
canIUseGetUserProfile: false,
},
onLoad() {
//先请求自定义接口,获取上次存的useInfo
wx.request({
url: 'test.api', //仅为示例,并非真实的接口地址
data: {},
success (res) {
console.log(res.useInfo)
//判断之前是否已获取并存储过用户信息
if(res.useInfo){
}else {
//这里不要使用 wx.canIuse来判断,避免一些适配问题
if (wx.getUserProfile) { //直接使用官方推荐的方法
this.setData({
canIUseGetUserProfile: true
})
}
}
}
})
},
getUserProfile(e) {
// 推荐使用wx.getUserProfile获取用户信息,开发者每次通过该接口获取用户个人信息均需用户确认
// 开发者妥善保管用户快速填写的头像昵称,避免重复弹窗
wx.getUserProfile({
desc: '需要你的信息', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
success: (res) => {
//这里需要将获取的 res.userInfo 存起来,你可以存在数据库,也可以存在local storage里
//wx.request...请求接口
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
},
getUserInfo(e) {
// 不推荐使用getUserInfo获取用户信息,预计自2021年4月13日起,getUserInfo将不再弹出弹窗,并直接返回匿名的用户个人信息
this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
},
})
[代码]
[代码]<!-- html部分 --->
<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>
[代码]
[图片]
5、如何更新用户信息?
首先,目前的规则如果不弹窗,肯定是无法每次拿到用户的最新信息,为了避免每次弹窗请求授权骚扰用户,所以最好根据产品规划,定期获取用户的信息(看心情)。
6、官方接口文档
https://developers.weixin.qq.com/community/develop/doc/000cacfa20ce88df04cb468bc52801
觉得有用,请点个赞哦,让我继续分享更有动力~