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

可以在成功的回調(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,看看里面有什么

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

可以看到,這里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>

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

在這個(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)題了