微信小程序踩坑日記1——調用微信受權窗口

時間 2019-11-07

標籤微信程序日記調用受權窗口简体版

原文原文鏈接

0. 引言

　　微信小程序爲了優化用戶體驗，取消了在進入小程序時立馬出現受權窗口。須要用戶主動點擊按鈕，觸發受權窗口。小程序

　　那麼，在我實踐過程當中，出現瞭如下問題。微信小程序

1. 沒法彈出受權窗口
2. 但願在用戶已經受權的狀況下，不顯示按鈕

1. 具體實現

　　app.js的onLaunch()函數中，添加獲取用戶我的信息的代碼段。實如今用戶已經受權的狀況（例如第二次打開小程序時）下，自動獲取用戶我的信息，而不須要用戶的受權。緩存

// 獲取用戶信息
wx.getSetting({
    success: res => {
        if (res.authSetting['scope.userInfo']) {
            console.log("app: " + "用戶已經受權")
            // 已經受權，能夠直接調用 getUserInfo 獲取頭像暱稱，不會彈框
            wx.getUserInfo({
                success: res => {
                    // 能夠將 res 發送給後臺解碼出 unionId
                    this.globalData.userInfo = res.userInfo
                    console.log(this.globalData.userInfo)
                    this.globalData.hasUserInfo = true
                    // 因爲 getUserInfo 是網絡請求，可能會在 Page.onLoad 以後才返回
                    // 因此此處加入 callback 以防止這種狀況
                    if (this.userInfoReadyCallback) {
                        this.userInfoReadyCallback(res)
                    }
                },
                fail: (res) => {
                    console.log("app: " + "獲取用戶信息失敗")
                }
            })
        }else {
            console.log("app: " + "用戶暫時未受權")
        }
    }
})

　　me.wxml中添加受權按鈕（具體的頁面根據你們的實際狀況）。這裏的button組件必須按照以下的形式。微信

<button open-type="getUserInfo" bindgetuserinfo="你本身定義函數"></button>

<block wx:if="{{!hasUserInfo}}">
    <image src='../../images/icon/wechat.png'></image>
    <button open-type="getUserInfo" bindgetuserinfo="getUserInfo">微信受權登陸</button>
</block>

　　效果這樣，具體的樣式根據你們的喜愛更改網絡

　　me.js中添加以下變量和方法，在用戶以前沒有受權的狀況下，須要用戶主動點擊按鈕。app

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

2. 沒法彈出受權窗口

　　這裏必定要注意異步

　　受權窗口只會在用戶第一次受權時出現，也就是，只會出現一次！！函數

　　在微信小程序開發工具裏，須要咱們清除全部緩存工具

3. 已經受權的狀況下，不顯示按鈕

　　因爲用戶已經受權的時候，app.js會獲取用戶我的信息（而不是在用戶點擊受權按鈕時獲取），可是這個過程是異步的。開發工具

　　能夠看到咱們的受權按鈕的出現時根據{{!hasUserInfo}}的真值來判斷，這個值能夠經過app.js是否獲取了信息來賦值。

<block wx:if="{{!hasUserInfo}}">
    <image class="userAvatar" src='../../images/icon/wechat.png'></image>
    <button open-type="getUserInfo" bindgetuserinfo="getUserInfo">微信受權登陸</button>
</block>

　　可是，可能出現用戶已經受權了，可是app.js獲取我的信息時過慢，然而咱們的受權按鈕卻錯誤的覺得app.js沒有獲取到信息，因此將受權按鈕渲染了出來。

　　這時，咱們但願，在app.js判斷用戶已經受權且獲取到信息後，告訴咱們的受權按鈕。

　　咱們在me.js中添加以下代碼段。

onLoad: function() {
    // 獲取我的信息
    if(app.globalData.userInfo){
        this.setData({
            userInfo: app.globalData.userInfo,
            hasUserInfo: true
        })
    }else{
        // 在app.js沒有獲取到信息時，判斷app.js的異步操做是否返回信息
        app.userInfoReadyCallback = res => {
            this.setData({
                userInfo: app.globalData.userInfo,
                hasUserInfo: true
            })
        }
    }
}