小程序 wx. getUserProfile

最近有個新的需求，產品要求在H5小程序版本項目的個人中心頭部添加一個按鈕用來獲取用戶頭像和昵稱，（本來內心還在想着這不是so easy嗎）。

根據需求點擊獲取頭像昵稱后調用接口傳遞給后台，因為微信授權頭像昵稱等機制是彈框授權后不會再觸發彈框操作，這種情況下后期想要獲取用戶頭像昵稱等相關信息可以通過wx.getSetting判斷是否授權過，授權過可以通過 wx.getUserInfo無狀態獲取用戶頭像昵稱等相關信息，接下來我的邏輯是 每次進入小程序時都會使用wx.getSetting 方法去判斷用戶是否授權過，授權過就通過wx.getUserInfo方法拿到頭像昵稱調用接口傳遞給后台（此時個人中心獲取頭像昵稱的按鈕將會隱藏），如果沒有授權過就讓個人中心的獲取頭像昵稱的按鈕展示

wx.getUserInfo

直接上代碼：

 getSetting () {
    // 查看是否授權
    wx.getSetting({
      success: res => {
        console.log(res);
        if (res.authSetting['scope.userInfo']) {
          // 已經授權，可以直接調用 getUserInfo 獲取頭像昵稱，不會彈框
          wx.getUserInfo({
            success: res => {
              console.log(res)
              if (res.userInfo) { // 授權用戶信息后 每次進入自動更新頭像，昵稱
                  // 調用后台接口把userInfo傳遞過去
              }
            }
          })
        } else {
                  // 其他業務邏輯
          })
        }　
      }
    })
  }

wxml文件中：

 <button open-type='getUserInfo' bindgetuserinfo="getUserInfo" wx:if="{{show}}">  授權微信頭像與昵稱  </button> 

js代碼：

 // 獲取用戶昵稱頭像
  getUserInfo (e) {
    if (e.detail.errMsg == 'getUserInfo:fail auth deny') {
      // 用戶點擊拒絕
      wx.showModal({
        title: '提示',
        showCancel: false,
        content: '取消授權',
        success: function (res) { }
      })
    } else {
       // 這里是調用后台接口傳遞userInfo信息邏輯
    }
  }

接下來上線了...

    上線后便自測了一下，看到用戶頭像昵稱不僅沒變接口返回的信息昵稱變成了“微信用戶”，頭像是灰色的 ，授權昵稱頭像的按鈕也顯示不出來了，顯然是走了已經授權的邏輯（上線前就自測了兩遍邏輯是沒問題的，內心尋思着 也沒授權過怎么就上線變成授權了，但是微信開發者工具里是一切正常的，感覺像方法的問題，立馬查了一下官網wx.getUserInfo方法，沒問題，都沒問題就很懵，直到翻到最底部，在官網底部的相關回答里看到了答案.....內心覺得無比的坑）

 

 相關接口調整說明：https://developers.weixin.qq.com/community/develop/doc/000cacfa20ce88df04cb468bc52801

 

     官方提出2021年4月28日24時后發布的小程序新版本，無法通過wx.getUserInfo與<button open-type="getUserInfo"/>獲取用戶個人信息（頭像、昵稱、性別與地區），將直接獲取匿名數據（原來坑在這里，將直接獲取匿名數據，說明不管有沒有授權 4月28日24時之后發布的版本wx.getSetting返回的用戶都是授權狀態，而且獲取的數據都是匿名數據）

 

wx.getUserProfile

不推薦使用getUserInfo獲取用戶信息，預計自2021年4月13日起，getUserInfo將不再彈出彈窗，並直接返回匿名的用戶個人信息

   頁面產生點擊事件后才可調用（可通過button bindtap綁定事件），每次請求都會彈出授權窗口，用戶同意后返回 userInfo ，開發者工具中僅 2.10.4 及以上版本可訪問 wx.getUserProfile 接口（以免使用時報錯，先把開發者工具更新或調到2.10.4及以上），開發者工具中 2.10.4~2.16.1 基礎庫版本通過 <button open-type="getUserInfo"> 會返回真實數據，真機上此區間會按照公告返回匿名數據。

直接上代碼：

 <button bindtap="getUserProfile" wx:if="{{show}}">授權微信頭像與昵稱</button> 

  // 獲取用戶昵稱頭像
  getUserProfile () {
    // 推薦使用wx.getUserProfile獲取用戶信息，開發者每次通過該接口獲取用戶個人信息均需用戶確認
    // 開發者妥善保管用戶快速填寫的頭像昵稱，避免重復彈窗
    wx.getUserProfile({
      desc: '用於展示個人中心頭像，昵稱', // 聲明獲取用戶個人信息后的用途，后續會展示在彈窗中，請謹慎填寫
      success: (res) => {
        console.log(res);
        // 授權拿到昵稱頭像后處理的邏輯
      },
      fail: (err) => {
        console.log(err);
        wx.showModal({
          title: '提示',
          showCancel: false,
          content: '取消授權',
          success: function (res) {
             // 拒絕授權確定后到邏輯處理
          }
        })
      }
    })
  }