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

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失败',
                    })
                  }
                }
              })
            }
          })
        }
      })
    },
})

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

声明:
根据2013年1月30日《计算机软件保护条例》2次修订第17条规定: 为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存 储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬! 鉴于此,也希望大家按此说明研究软件!
1、本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!
2、下载用户仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担
3、站内资源均来源于网络公开发表文件或网友投稿发布,如侵犯您的权益,请联系管理员处理。
4、本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
5、所有资源均收集于互联网仅供学习、参考和研究,请理解这个概念,所以不能保证每个细节都符合你的需求,也可能存在未知的BUG与瑕疵,因本站资源均为可复制品,所以不支持任何理由的退款兑现,请熟知后再支付下载!。
Q码基地 » 微信小程序授权登录以及用户信息相关接口调整导致授权框不弹出问题解决办法

发表评论

只做精品资源

立即查看 了解详情