微信小程序如何調用微信授權窗口

這篇文章主要介紹了微信小程序如何調用微信授權窗口，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

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里有一段回調函數，這個函數就是用來解決異步的問題。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“微信小程序如何調用微信授權窗口”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!