微信小程序授权登录以及用户信息相关接口调整导致授权框不弹出问题解决办法

4月8号升级了小程序业务后提交了版本并上线。突然一个同事说体验版的点击“登录”按钮无效。当时觉得应该不会呀，这几天一直用手机调试，每天也在不停的登录授权，弹框一直有的呀。然后为了验证同事的效果，速将PC版的缓存全部清除，然后一脸懵逼，果然怎么点“登录”都无效果，然后继续用手机测试，也无效果了。然后在微信里看正式版的小程序，发现暂无异常。几个同事都第一反应：肯定是微信官方又改了啥。要不然代码一直没动，咋突然这样呢。果然，唉。

官方已发部了调整说明文档，大家可以参考微信官方说明文档

没办法，人家是腾讯，我们只能一个字：改！

在没看官方文档之前，自己在寻找授权不弹框原因，在调试的过程中，发现wx.getSetting()返回值有变，代码如下：

 1  wx.getSetting({2       success: function (res) {3         if (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.052103022版本（若不是，可点此下载）才支持，我的版本是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获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认// 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗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获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认// 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗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;wx.getSetting({success: res => {  wx.getUserProfile({desc: '用于完善会员信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写success: (result) => {            wx.login({success:function(loginRes) {var code=loginRes.code; //登录凭证，根据务需求，如果你的业务中不需要，可以不用调用wx.login()方法if(code){wx.request({url: decodeUserInfo,//自己的服务接口地址，用来解密数据method: 'GET',header: {'Accept': 'application/json', },data: { encryptedData: result.encryptedData, 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失败',})}}})}})}})},
})

以上就是这次微信官方调整小程序登录、用户信息接口后，遇到的问题以及处理方法，我所写的是我所理解的。技术类的文章写的很差，组织语言和表达能力也不行，见谅！

微信小程序授权登录以及用户信息相关接口调整导致授权框不弹出问题解决办法相关推荐

java对接微信小程序（登录获取用户信息）
需求说明: 用户通过小程序登录,进入到平台系统,进行各功能操作: 解决方案: 首先通过对接小程序,用户通过小程序登录及授权获取用户信息,后端调用接口获取微信用户信息,进行保存到数据库,然后返回toke ...
小程序登录、用户信息相关接口调整说明
为优化用户的使用体验,平台将进行以下调整: 2021年2月23日起,若小程序已在微信开放平台进行绑定,则通过wx.login接口获取的登录凭证可直接换取unionID 2021年4月13日后发布的小 ...
php网页抓取浏览者手机号码_微信小程序开发之获取用户手机号码(php接口解密)...
后边要做一个微信小程序,并要能获取用户微信绑定的手机号码.而小程序开发文档上边提供的获取手机号码的接口(getPhoneNumber())返回的是密文,需要服务器端进行解密,但是官方提供的开发文档一如 ...
微信公众平台用户信息相关接口调整通知2021-09-27
欢迎大家加入我的知识星球! 近期收到微信平台关于用户信息接口调整的通知,留作备忘. 原文如下: 微信公众平台用户信息相关接口调整通知2021-09-27 根据相关法律法规,为进一步规范开发者调用用户信 ...
微信小程序开发之获取用户信息
环境微信开发者工具 Stable 1.06.2303220 云开发控制台 v1.5.47 用户的openid和头像名称信息 openid 是小程序用户的唯一标识.注意, openid 并不是微信用户 ...
微信小程序前端解密获取用户信息
在微信小程序中,通过用户手动可以获取到用户昵称,头像等基本信息,稍微敏感的信息无法获取到,需要通过后端解密才能获取到. 例如获取用户手机: 在网上找到cryptojs包,下载下来复制到utils文件夹 ...
php微信小程序获取用户信息,微信小程序获取openid及用户信息的方法
本文主要介绍微信小程序如何获取openid及用户信息,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. 1. 获取openid 1.1 获取code 调用接口获取登录凭证(code ...
微信小程序 open-type=“getUserInfo“ 获取用户信息失败 @杨章隐
open-type="getUserInfo" 获取用户信息失败open-type="getUserInfo" 获取用户信息"微信用户"op ...
微信小程序之登录跳转及调用接口获取信息
最近学习微信小程序,新学了网页跳转及获取个人信息网页跳转需要 wx.switchTab方法获取信息的话,首先调用接口,然后取出数据就可以了. 首先创建两个html文件,代码如下 <view ...

微信小程序授权登录以及用户信息相关接口调整导致授权框不弹出问题解决办法

微信小程序授权登录以及用户信息相关接口调整导致授权框不弹出问题解决办法相关推荐

最新文章

热门文章