微信小程序獲取用戶(hù)授權(quán)

wx.getUserInfo:此方法就是微信獲取用戶(hù)信息的方法


image.png

可以在成功的回調(diào)函數(shù)里面打印以下這個(gè)方法的實(shí)參,看看里面到底是啥

  wx.getUserInfo({
            success: res => {
              console.log(res)
              // 可以將 res 發(fā)送給后臺(tái)解碼出 unionId
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是網(wǎng)絡(luò)請(qǐng)求,可能會(huì)在 Page.onLoad 之后才返回
              // 所以此處加入 callback 以防止這種情況
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })

可以看到,在res對(duì)象里有一個(gè)userInfo的對(duì)象

,這個(gè)對(duì)象里的數(shù)據(jù)就是我們用戶(hù)的信息,這樣就算是拿到了這個(gè)用戶(hù)的信息了,接下來(lái)就是要把他渲染到頁(yè)面里去了,這個(gè)時(shí)候需要在data里面定義一個(gè)對(duì)象來(lái)接受一下賦值,將userInfo的值賦給我們定義好的對(duì)象
在小程序中賦值不能直接等于號(hào)賦值,而需要通過(guò)以下方法

 this.setData({
                  userInfo:res.userInfo
                })

這個(gè)時(shí)候會(huì)有一個(gè)疑問(wèn),如果一個(gè)用戶(hù)已經(jīng)授權(quán)過(guò)之后,就不再需要重新彈出授權(quán)了,所以需要做一個(gè)判斷
小程序官方提供了一個(gè)方法
wx.getSetting
這個(gè)方法同樣也有失敗和成功的回調(diào)函數(shù)

wx.getSetting({
      success: res => {
        console.log(res)
        if (res.authSetting['scope.userInfo']) {
          // 已經(jīng)授權(quán),可以直接調(diào)用 getUserInfo 獲取頭像昵稱(chēng),不會(huì)彈框
          wx.getUserInfo({
            success: res => {
              console.log(res)
              // 可以將 res 發(fā)送給后臺(tái)解碼出 unionId
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是網(wǎng)絡(luò)請(qǐng)求,可能會(huì)在 Page.onLoad 之后才返回
              // 所以此處加入 callback 以防止這種情況
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
                this.setData({
                  userInfo:res.userInfo
                })
              }
            }
          })
        }
      }
})

同樣,也打印以下這個(gè)成功的回調(diào)函數(shù)里的res,看看里面有什么


image.png

可以看到authSetting里面有一個(gè)屬性叫scope.userInfo,他的值為true,這個(gè)屬性就是來(lái)判斷用戶(hù)是否授權(quán)的
接下來(lái)只需要在wx.getSetting方法里加一個(gè)判斷,如果scope.userInfo的值為true,就不再執(zhí)行獲取用戶(hù)信息的方法。


image.png

可以看到,這里scope.userInfo是一個(gè)不規(guī)則命名,如果用常規(guī)的res.authSetting.scope.userInfo肯定不對(duì),所以這里需要用一個(gè)方括號(hào)把scope.userInfo闊起來(lái)并且加上引號(hào),表示這里是取scope.userInfo的值,而不是這個(gè)字符串本身
這樣基本就完成了小程序用戶(hù)授權(quán),但是是在用戶(hù)沒(méi)有允許的情況下就自動(dòng)獲取了用戶(hù)的信息,所以這里需要做一個(gè)彈窗提示用戶(hù)是否統(tǒng)一授權(quán)
<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 獲取頭像昵稱(chēng) </button>
image.png

這里官方又提供了一個(gè)屬性 open-type 在這個(gè)屬性里綁定以下我們獲取信息的方法,如果用戶(hù)點(diǎn)擊了確定的話(huà),就調(diào)用獲取信息的方法
實(shí)際操作后會(huì)發(fā)現(xiàn),雖然是獲取到了,但是需要重新編譯一次才能把數(shù)據(jù)刷新到頁(yè)面中

這里官方有一個(gè)屬性bindgetuserinfo
image.png

在這個(gè)屬性的值里面也放上獲取用戶(hù)信息的方法
通過(guò)這個(gè)方法來(lái)判斷出用戶(hù)是點(diǎn)擊了允許還是拒絕,如果允許,就獲取信息,拒絕就返回
接下來(lái)只需要在用戶(hù)點(diǎn)擊確定的時(shí)候,再調(diào)用一次獲取信息的方法就ok了
實(shí)現(xiàn)下來(lái)會(huì)發(fā)現(xiàn),在生命周期函數(shù)中,this的指向會(huì)出現(xiàn)問(wèn)題,會(huì)報(bào)錯(cuò),
只需要將原本的寫(xiě)法改成箭頭函數(shù)的寫(xiě)法就可以解決此問(wèn)題了

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容