⼩程序授权登录以及⽤户信息相关接⼝调整导致授权框不弹出
前⾔：4⽉8号升级了⼩程序业务后提交了版本并上线。突然⼀个同事说体验版的点击“登录”按钮⽆效。当时觉得应该不会呀，这⼏天⼀直⽤⼿机调试，每天也在不停的登录授权，弹框⼀直有的呀。然后为了验证同事的效果，速将PC版的缓存全部清除，然后⼀脸懵逼，果然怎么点“登录”都⽆效果，然后继续⽤⼿机测试，也⽆效果了。然后在⾥看正式版的⼩程序，发现暂⽆异常。⼏个同事都第⼀反应：肯定是官⽅⼜改了啥。要不然代码⼀直没动，咋突然这样呢。果然，唉。
官⽅已发部了调整说明⽂档，⼤家可以参考
没办法，⼈家是腾讯，我们只能⼀个字：改！
在没看官⽅⽂档之前，⾃⼰在寻授权不弹框原因，在调试的过程中，发现wx.getSetting()返回值有变，代码如下：
1  wx.getSetting({
2      success: function (res) {
3if (res.authSetting['scope.userInfo']) {
4// 已经授权，可以直接调⽤ getUserInfo 获取头像昵称
5          wx.getUserInfo({
6            success: function (res) {}
7          })
8        }
9      }
10    })
发现wx.getSetting的success返回结果如下，发现返回值中⽆“res.authSetting['scope.userInfo']”，⽹上查了，2018年有说废弃了，但⼜说⼜能⽤，很懵。既然这样，那我先跳过这⼀步，直接弹出授权，获取⽤户信息吧。
获取⽤户信息接⼝返回值如下：⽤户头像昵称都是默认头像和默认昵称
然后根据官⽅的说明⽂档，简单的以demo形式展⽰⼀下
⽅法⼀：直接⽤最新获取⽤户接⼝，就可以弹出授权，但开发者⼯具要升级，官⽅说）才⽀持，我的版本是1.05.2102010也是⽀持的
注意⼀点：开发者⼯具的调试基础库⼀定要选2.16.0，否则还是调试不了，截图如下：
整理的简单代码如下：
<view class="userinfo">
<block wx:if="{{!hasUserInfo}}">
<button bindtap="getUserProfile">获取头像昵称</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>
Page({
data: {
userInfo: {},
hasUserInfo: false,
canIUseGetUserProfile: false,
},
getUserProfile(e) {
// 推荐使⽤wx.getUserProfile获取⽤户信息，开发者每次通过该接⼝获取⽤户个⼈信息均需⽤户确认
// 开发者妥善保管⽤户快速填写的头像昵称，避免重复弹窗
//desc是必须要有的
desc: '⽤于完善会员资料', // 声明获取⽤户个⼈信息后的⽤途，后续会展⽰在弹窗中，请谨慎填写
success: (res) => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
})
},
})
以上要注意的就是wx.getUserProfile中的desc是必须要有的
2.如果Pc没有升级不⽀持wx.getUserProfile，可以进⾏代码兼容，这样在⼿机端调试或者体验版中能看到效果的。但是官⽅也明确说了：“预计⾃2021年4⽉13⽇起，getUserInfo将不再弹出弹窗，并直接返回匿名的⽤户个⼈信息”，官⽅也提供了
不想去官⽅看的，直接看这⾥：
<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>
Page({
data: {
userInfo: {},
hasUserInfo: false,
canIUseGetUserProfile: false,
},
onLoad() {
if (wx.getUserProfile) {
this.setData({
canIUseGetUserProfile: true
})
}
},
getUserProfile(e) {
// 推荐使⽤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
})
},
})
3.以上简单的弹出⽤户授权信息，但我们的业务中⼀般就不是这样的简单的了。上⾯的⽅法登录后，只要页⾯切换或者刷新，⼜要重新让⽤户授权，这种体验肯定是极不好的。下⾯以我们的业务需求整理⼀我们的demo发下来。我们的业务需求是：新⽤户进⼩程序后，点击“登录”即弹出授权⽤户信息，然后直接记录⽤户的相关信息，这样⽆论是切换页⾯或者下次进来⼩程序，都不会让⽤户继续登录，⽽且根据不同的⽤户展⽰不同的功能权限。简单整理代码如下：
我这边是pc版已升级，所以直接废弃了getUserInfo接⼝了，直接使⽤getUserProfile接⼝了
<view class="userinfo">
<block wx:if="{{!hasUserInfo}}">
<button bindtap="getUserProfile">获取头像昵称</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>
page({
data:{
userInfo: {},
hasUserInfo: true
},
onLoad: function () {
var openId = wx.getStorageSync('openId');//根据openid判断⽤户有没有授权登录过。如果登录过，直接查⽤户的信息以及相关功能。如果未登录过。将显⽰“登录”按钮，让⽤户登录。
if(openId){ }//执⾏已登录过后的操作
else { } //没有登录的操作
},
bindGetUserInfo:function(event){
wx.showLoading({
title: '加载中',
})
var that = this;
success: res => {
desc: '⽤于完善会员信息', // 声明获取⽤户个⼈信息后的⽤途，后续会展⽰在弹窗中，请谨慎填写
success: (result) => {
wx.login({
success:function(loginRes) {
var de; //登录凭证，根据务需求，如果你的业务中不需要，可以不⽤调⽤wx.login()⽅法
if(code){
url: decodeUserInfo,//⾃⼰的服务接⼝地址，⽤来解密数据
method: 'GET',
header: {'Accept': 'application/json', },
data: { encryptedData: ptedData, iv: result.iv, code: code},
success: function (data) {
//4.解密成功后获取⾃⼰服务器返回的结果
if (data.data.status == 1) {
that.setData({
userInfo: data.data.userInfo, //⾃⼰的接⼝返回的⽤户信息（昵称、头像等）
hasUserInfo: true
});
var openId = userInfo.openId; //返回openid
wx.setStorageSync('openId', openId); //缓存openid以便下次进来⽤此调⽤存于⾃⼰服务器上的⽤户信息
that.setData({ openId: openId});
} else { }
wx.hideLoading();
},
fail: function () {
console.log('解密失败')
wx.hideLoading();
}
})
}else{
wx.showToast({
title: '获取code失败',
})
}
}
})
}
})
}
})
},
})
以上就是这次官⽅调整⼩程序登录、⽤户信息接⼝后，遇到的问题以及处理⽅法，我所写的是我所理解的。技术类的⽂章写的很差，组织语⾔和表达能⼒也不⾏，见谅！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。