⼩程序授权登录以及⽤户信息相关接⼝调整导致授权框不弹出
前⾔: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>
1千克等于多少克<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',
昵称2021最新的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失败',
})
}
}
})
}
})
}
})
},
})
以上就是这次官⽅调整⼩程序登录、⽤户信息接⼝后,遇到的问题以及处理⽅法,我所写的是我所理解的。技术类的⽂章写的很差,组织语⾔和表达能⼒也不⾏,见谅!