微信小程序調(diào)用微信授權(quán)窗口相關(guān)問(wèn)題解決

來(lái)源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 21:53:27

微信小程序調(diào)用微信授權(quán)窗口相關(guān)問(wèn)題解決

微信小程序調(diào)用微信授權(quán)窗口相關(guān)問(wèn)題解決:引言微信小程序?yàn)榱藘?yōu)化用戶體驗(yàn)，取消了在進(jìn)入小程序時(shí)立馬出現(xiàn)授權(quán)窗口。需要用戶主動(dòng)點(diǎn)擊按鈕，觸發(fā)授權(quán)窗口。那么，在我實(shí)踐過(guò)程中，出現(xiàn)了以下問(wèn)題。 1. 無(wú)法彈出授權(quán)窗口 2. 希望在用戶已經(jīng)授權(quán)的情況下，不顯示按鈕 1. 具體實(shí)現(xiàn) app.js

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀微信小程序調(diào)用微信授權(quán)窗口相關(guān)問(wèn)題解決:引言微信小程序?yàn)榱藘?yōu)化用戶體驗(yàn)，取消了在進(jìn)入小程序時(shí)立馬出現(xiàn)授權(quán)窗口。需要用戶主動(dòng)點(diǎn)擊按鈕，觸發(fā)授權(quán)窗口。那么，在我實(shí)踐過(guò)程中，出現(xiàn)了以下問(wèn)題。 1. 無(wú)法彈出授權(quán)窗口 2. 希望在用戶已經(jīng)授權(quán)的情況下，不顯示按鈕 1. 具體實(shí)現(xiàn) app.js

引言

微信小程序?yàn)榱藘?yōu)化用戶體驗(yàn)，取消了在進(jìn)入小程序時(shí)立馬出現(xiàn)授權(quán)窗口。需要用戶主動(dòng)點(diǎn)擊按鈕，觸發(fā)授權(quán)窗口。

那么，在我實(shí)踐過(guò)程中，出現(xiàn)了以下問(wèn)題。

1. 無(wú)法彈出授權(quán)窗口

2. 希望在用戶已經(jīng)授權(quán)的情況下，不顯示按鈕

1. 具體實(shí)現(xiàn)

app.js的onLaunch()函數(shù)中，添加獲取用戶個(gè)人信息的代碼段。實(shí)現(xiàn)在用戶已經(jīng)授權(quán)的情況（例如第二次打開(kāi)小程序時(shí)）下，自動(dòng)獲取用戶個(gè)人信息，而不需要用戶的授權(quán)。

// 獲取用戶信息
wx.getSetting({
 success: res => {
 if (res.authSetting['scope.userInfo']) {
 console.log("app: " + "用戶已經(jīng)授權(quán)")
 // 已經(jīng)授權(quán)，可以直接調(diào)用 getUserInfo 獲取頭像昵稱，不會(huì)彈框
 wx.getUserInfo({
 success: res => {
 // 可以將 res 發(fā)送給后臺(tái)解碼出 unionId
 this.globalData.userInfo = res.userInfo
 console.log(this.globalData.userInfo)
 this.globalData.hasUserInfo = true
 // 由于 getUserInfo 是網(wǎng)絡(luò)請(qǐng)求，可能會(huì)在 Page.onLoad 之后才返回
 // 所以此處加入 callback 以防止這種情況
 if (this.userInfoReadyCallback) {
 this.userInfoReadyCallback(res)
 }
 },
 fail: (res) => {
 console.log("app: " + "獲取用戶信息失敗")
 }
 })
 }else {
 console.log("app: " + "用戶暫時(shí)未授權(quán)")
 }
 }
})

me.wxml中添加授權(quán)按鈕（具體的頁(yè)面根據(jù)大家的實(shí)際情況）。這里的button組件必須按照如下的形式。

<button open-type="getUserInfo" bindgetuserinfo="你自己定義函數(shù)"></button>

<block wx:if="{{!hasUserInfo}}">
 <image src='../../images/icon/wechat.png'></image>
 <button open-type="getUserInfo" bindgetuserinfo="getUserInfo">微信授權(quán)登錄</button>
</block>

效果這樣，具體的樣式根據(jù)大家的喜好更改

me.js中添加如下變量和方法，在用戶之前沒(méi)有授權(quán)的情況下，需要用戶主動(dòng)點(diǎn)擊按鈕。

data: {
 userInfo: null,
 hasUserInfo: false
},
getUserInfo: function(e) {
 console.log("me: " + "用戶點(diǎn)擊授權(quán)")
 if(e.detail.userInfo){
 this.setData({
 userInfo: e.detail.userInfo,
 hasUserInfo: true
 })
 app.data.userInfo = this.userInfo
 app.data.hasUserInfo = true
 }
}

2. 無(wú)法彈出授權(quán)窗口

這里一定要注意

授權(quán)窗口只會(huì)在用戶第一次授權(quán)時(shí)出現(xiàn)，也就是，只會(huì)出現(xiàn)一次！！

在微信小程序開(kāi)發(fā)工具里，需要我們清除所有緩存

3. 已經(jīng)授權(quán)的情況下，不顯示按鈕

由于用戶已經(jīng)授權(quán)的時(shí)候，app.js會(huì)獲取用戶個(gè)人信息（而不是在用戶點(diǎn)擊授權(quán)按鈕時(shí)獲取），但是這個(gè)過(guò)程是異步的。

可以看到我們的授權(quán)按鈕的出現(xiàn)時(shí)根據(jù){{!hasUserInfo}}的真值來(lái)判斷，這個(gè)值可以通過(guò)app.js是否獲取了信息來(lái)賦值。

<block wx:if="{{!hasUserInfo}}">
 <image class="userAvatar" src='../../images/icon/wechat.png'></image>
 <button open-type="getUserInfo" bindgetuserinfo="getUserInfo">微信授權(quán)登錄</button>
</block>

但是，可能出現(xiàn)用戶已經(jīng)授權(quán)了，但是app.js獲取個(gè)人信息時(shí)過(guò)慢，然而我們的授權(quán)按鈕卻錯(cuò)誤的以為app.js沒(méi)有獲取到信息，所以將授權(quán)按鈕渲染了出來(lái)。

這時(shí)，我們希望，在app.js判斷用戶已經(jīng)授權(quán)且獲取到信息后，告訴我們的授權(quán)按鈕。

我們?cè)趍e.js中添加如下代碼段。

onLoad: function() {
 // 獲取個(gè)人信息
 if(app.globalData.userInfo){
 this.setData({
 userInfo: app.globalData.userInfo,
 hasUserInfo: true
 })
 }else{
 // 在app.js沒(méi)有獲取到信息時(shí)，判斷app.js的異步操作是否返回信息
 app.userInfoReadyCallback = res => {
 this.setData({
 userInfo: app.globalData.userInfo,
 hasUserInfo: true
 })
 }
 }
}

為什么這里會(huì)有個(gè)app.userInfoReadyCallback函數(shù)呢，我們注意到在app.js的wx.getSetting里有一段回調(diào)函數(shù)，這個(gè)函數(shù)就是用來(lái)解決異步的問(wèn)題。