极速快3精准计划|极速快3有规律吗
用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 查看內容

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

Rolan 2019-7-25 00:28

0. 引言  微信小程序為了優化用戶體驗,取消了在進入小程序時立馬出現授權窗口。需要用戶主動點擊按鈕,觸發授權窗口。  那么,在我實踐過程中,出現了以下問題。1. 無法彈出授權窗口 2. 希望在用戶已經授權的情 ...

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中添加如下變量和方法,在用戶之前沒有授權的情況下,需要用戶主動點擊按鈕。

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
            })
        }
    }
}

  為什么這里會有個app.userInfoReadyCallback函數呢,我們注意到在app.js的wx.getSetting里有一段回調函數,這個函數就是用來解決異步的問題。

  

 

鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
原作者: 小陸斑比 來自: cnblogs
极速快3精准计划 快三大小单双技巧 pk拾永久免费计划软件 体彩公众号电子投注单 后三组选包胆买十个号 后三组选包胆什么计算得54注呢 三分时时彩走势图 琼海信息网 新生彩票注册 网络棋牌炸金花规律 如何代理棋牌