這篇文章將為大家詳細(xì)講解有關(guān)微信小程序之如何調(diào)用微信授權(quán)窗口，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)公司服務(wù)項(xiàng)目包括瑪多網(wǎng)站建設(shè)、瑪多網(wǎng)站制作、瑪多網(wǎng)頁制作以及瑪多網(wǎng)絡(luò)營(yíng)銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢(shì)、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，瑪多網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到瑪多省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

0. 引言

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

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

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

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

app.js的onLaunch()函數(shù)中，添加獲取用戶個(gè)人信息的代碼段。實(shí)現(xiàn)在用戶已經(jīng)授權(quán)的情況（例如第二次打開小程序時(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)按鈕（具體的頁面根據(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中添加如下變量和方法，在用戶之前沒有授權(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. 無法彈出授權(quán)窗口

這里一定要注意

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

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

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

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

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

<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í)過慢，然而我們的授權(quán)按鈕卻錯(cuò)誤的以為app.js沒有獲取到信息，所以將授權(quán)按鈕渲染了出來。

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

我們?cè)?strong>me.js中添加如下代碼段。

onLoad: function() {    // 獲取個(gè)人信息
    if(app.globalData.userInfo){        
            this.setData({
            userInfo: app.globalData.userInfo,
            hasUserInfo: true
        })
    }else{        
        // 在app.js沒有獲取到信息時(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ù)就是用來解決異步的問題。

關(guān)于“微信小程序之如何調(diào)用微信授權(quán)窗口”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。

分享題目：微信小程序之如何調(diào)用微信授權(quán)窗口
鏈接地址：http://aaarwkj.com/article16/pccpdg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、企業(yè)網(wǎng)站制作、電子商務(wù)、網(wǎng)站內(nèi)鏈、搜索引擎優(yōu)化、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)