有的小伙伴在做微信小程序時(shí)突然發(fā)現(xiàn)網(wǎng)上的授權(quán)方法不太統(tǒng)一，翻看文檔發(fā)現(xiàn)，噢，原來是有改動(dòng)！這個(gè)時(shí)候有的友友就很生氣，人家都寫完了怎么說改就改，還得重新去兼容，沒辦法，人在屋檐下不得不低頭，這里我就把授權(quán)部分整理一下方便大家理解！

一：小程序登錄、用戶信息相關(guān)接口

老規(guī)矩，我們先放個(gè)官方公告康康—>小程序登錄、用戶信息相關(guān)接口調(diào)整說明
反正就是由于一些不是我們能左右的原因，調(diào)用wx.getUserInfo或<button open-type="getUserInfo"/>以后就不會(huì)再彈出授權(quán)彈窗啦，所以我們在做登錄授權(quán)的時(shí)候需要進(jìn)行兼容或者直接使用文檔提供的wx.getUserProfile接口，我把官方提供的demo放在下面，歡迎自取~

1.兼容寫法（文檔在此）：

wxml里：

 <view class="userinfo">
    <!-- 這里的hasUserInfo主要是為了判斷用戶是否已經(jīng)授權(quán)，如果沒有授權(quán)過就展示獲取頭像昵稱按鈕 -->
    <block wx:if="{{!hasUserInfo}}">
      <!--canIUseGetUserProfile判斷當(dāng)前版本是否支持wx.getUserProfile方法-->
      <button wx:if="{{canIUseGetUserProfile}}" bindtap="getUserProfile"> 獲取頭像昵稱 </button>
      <button wx:else open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 獲取頭像昵稱 </button>
    </block>

    <!--用戶已經(jīng)授權(quán)過直接展示頭像和用戶名，大家實(shí)際開發(fā)中這里可以換成別的操作-->
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
 </view>

js里：

Page({
  data: {
    userInfo: {},//默認(rèn)為空，但是進(jìn)入頁面我們需要先請求后臺(tái)接口判斷用戶是否已經(jīng)授權(quán)過信息，沒有獲取到的情況下我們需要提醒新用戶授權(quán)
    hasUserInfo: false,//判斷是否展示授權(quán)按鈕/授權(quán)彈窗或者跳到授權(quán)頁面
    canIUseGetUserProfile: false,//是否支持wx.getUserProfile方法
  },
  onLoad() {
    //進(jìn)入頁面判斷是否可以使用wx.getUserProfile
    if (wx.canIUse('getUserProfile')) {
      this.setData({
        canIUseGetUserProfile: true
      })
    }
  },
  getUserProfile(e) {
    // 推薦使用wx.getUserProfile獲取用戶信息，開發(fā)者每次通過該接口獲取用戶個(gè)人信息均需用戶確認(rèn)
    // 開發(fā)者妥善保管用戶快速填寫的頭像昵稱，避免重復(fù)彈窗
    wx.getUserProfile({
      desc: '用于完善會(huì)員資料', // 聲明獲取用戶個(gè)人信息后的用途，后續(xù)會(huì)展示在彈窗中，請謹(jǐn)慎填寫
      success: (res) => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },
  getUserInfo(e) {
    // 不推薦使用getUserInfo獲取用戶信息，預(yù)計(jì)自2021年4月13日起，getUserInfo將不再彈出彈窗，并直接返回匿名的用戶個(gè)人信息
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  },
})

2.有的友友說：“我就不想兼容怎么辦？”，那你就把上面那一堆判斷都給刪了，直接

 <button bindtap="getUserProfile"> 獲取頭像昵稱 </button>

 getUserProfile(e) {
    wx.getUserProfile({
      desc: '用于完善會(huì)員資料', 
      success: (res) => {
        this.setData({
          userInfo: res.userInfo
        })
      }
    })
  },

獲取到的userInfo包含：

• nickName：用戶昵稱
• gender：性別，1-男 2-女 0-未知（以后不再返回用戶性別，只返回0）
• avatarUrl：用戶頭像
• country：國家
• province：省份
• city：城市
• language：顯示 country，province，city 所用的語言， en-英文 zh_CN-簡體中文 zh_TW-繁體中文
  (注意：這里獲取到的國家省份城市不一定是用戶的真實(shí)地址，用戶的收貨地址需要用戶手動(dòng)填寫或者調(diào)用wx.chooseAddress，獲取用戶當(dāng)前地理位置需要調(diào)用wx.getLocation)

二：獲取用戶手機(jī)號(hào)

獲取用戶手機(jī)號(hào)需要通過點(diǎn)擊button按鈕來觸發(fā)（文檔），因?yàn)槲覀儷@取到的是加密的信息，所以我們需要把參數(shù)傳給后臺(tái)進(jìn)行解密，然后就可以拿到手機(jī)號(hào)了！
wxml里：

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>

js里：

Page({
  getPhoneNumber (e) {
    console.log(e.detail.errMsg)
    console.log(e.detail.iv)//加密算法的初始向量
    console.log(e.detail.encryptedData)//包括敏感數(shù)據(jù)在內(nèi)的完整用戶信息的加密數(shù)據(jù)
  }
})

這是最基本的demo，但是實(shí)際項(xiàng)目中比較繁瑣，我直接放js代碼，大家根據(jù)自己的需求修改使用就好啦

 getPhoneNumber: function (e) {
    var that = this;
    //檢查session-key是否過期
    wx.checkSession({
      success() {
        wx.login({
          success: res => {
            wx.request({
              url: '寫你自己的接口地址/' + res.code,
              method: 'GET',
              header: {
                'content-type': 'application/xml'
              },
              success: function (res) {
                if (res.data.code == 200) {
                  //是否允許獲取手機(jī)號(hào)
                  if (e.detail.errMsg == "getPhoneNumber:ok") {
                    //這里是因?yàn)楹笈_(tái)讓我把參數(shù)拼接在url上給他，大家最好用data來傳，別學(xué)我（氣哭）
                    wx.request({
                      url: '寫自己的接口地址?enData=' + e.detail.encryptedData + '&iv=' + e.detail.iv + '&sessionKey=' + res.data.data.session_key,
                      method: "POST",
                      success: function (res) {
                        if (res.data.code == 200) {
                          console.log(res.data.data.phone);
                        }
                      }
                    })
                  }
                }
              }
            })
          }
        })
      }
    })
  },

關(guān)于為啥我要套這么多層，細(xì)心的友友們在文檔里會(huì)看到：

覺得有用記得給個(gè)贊，我寫的不對的地方請大佬指正，我會(huì)改過來的，over，散會(huì)散會(huì)，撒花~