微信小程序授權登錄以及用戶信息相關接口調整導致授權框不彈出

前言：4月8號升級了小程序業務后提交了版本並上線。突然一個同事說體驗版的點擊“登錄”按鈕無效。當時覺得應該不會呀，這幾天一直用手機調試，每天也在不停的登錄授權，彈框一直有的呀。然后為了驗證同事的效果，速將PC版的緩存全部清除，然后一臉懵逼，果然怎么點“登錄”都無效果，然后繼續用手機測試，也無效果了。然后在微信里看正式版的小程序，發現暫無異常。幾個同事都第一反應：肯定是微信官方又改了啥。要不然代碼一直沒動，咋突然這樣呢。果然，唉。

官方已發部了調整說明文檔，大家可以參考微信官方說明文檔

 

沒辦法，人家是騰訊，我們只能一個字：改！

在沒看官方文檔之前，自己在尋找授權不彈框原因，在調試的過程中，發現wx.getSetting()返回值有變，代碼如下：

 wx.getSetting({
      success: function (res) {
        if (res.authSetting['scope.userInfo']) {
          // 已經授權，可以直接調用 getUserInfo 獲取頭像昵稱
          wx.getUserInfo({
            success: function (res) {}
          })
        }
      }
    })

發現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失敗',
                    })
                  }
                }
              })
            }
          })
        }
      })
    },
})

以上就是這次微信官方調整小程序登錄、用戶信息接口后，遇到的問題以及處理方法，我所寫的是我所理解的。技術類的文章寫的很差，組織語言和表達能力也不行，見諒！