微信小程序wx.getUserInfo獲取用戶信息

簡介

wx.getUserInfo接口獲取用戶信息官方文檔介紹：

https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx.getUserInfo.html

在調用wx.getUserInfo接口之前需要用戶授權：

https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/authorize.html

一旦用戶明確同意或拒絕過授權，其授權關系會記錄在后台，直到用戶主動刪除小程序。

使用 wx.getSetting 獲取用戶當前的授權狀態，官方文檔：

https://developers.weixin.qq.com/miniprogram/dev/api/open-api/setting/wx.getSetting.html

使用wx.getUserInfo接口

app.js文件中添加如下代碼：

App({
  //小程序啟動后觸發
  onLaunch: function () {    
    // 登錄
    wx.login({
      success: res => {
        // 發送 res.code 到后台換取 openId, sessionKey, unionId
      }
    })
    // 獲取用戶信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已經授權，可以直接調用 getUserInfo 獲取頭像昵稱，不會彈框
          wx.getUserInfo({
            success: res => {
              // 可以將 res 發送給后台解碼出 unionId
              this.globalData.userInfo = res.userInfo
              // 由於 getUserInfo 是網絡請求，可能會在 Page.onLoad 之后才返回
              // 所以此處加入 callback 以防止這種情況
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  globalData: {//設置全局對象
    userInfo: null
  }
})

tips：未授權的情況下調用wx.getUserInfo接口，將不再出現授權彈窗，會直接進入 fail 回調，使用<button  open-type="getUserInfo"></button>引導用戶主動進行授權操作；在用戶已授權的情況下調用此接口，可成功獲取用戶信息。

官方接口調整說明：https://developers.weixin.qq.com/community/develop/doc/0000a26e1aca6012e896a517556c01

personal.wxml文件中添加如下代碼：

<view class="topleft">
  <image class="userinfo-avatar" src='{{userInfo.avatarUrl}}' mode="cover" ></image>
  <button class="headbutton" wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo"
   bindgetuserinfo="getUserInfo">點擊登錄</button>
  <block wx:else>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </block>
</view>

personal.js文件中添加如下代碼：

//獲取應用實例
const app = getApp()
Page({
  /**
   * 頁面的初始數據
   */
  data: {
    userInfo: {
      avatarUrl:"/images/head.png"
    }, //用戶信息
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo'), //測試getUserInfo在當前版本是否可用    
  },
  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function(options) {
    //如果全局對象用戶信息為空
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo, //將全局用戶信息賦值給變量
        hasUserInfo: true //顯示引導授權按鈕
      })
    } else if (this.data.canIUse) { //getUserInfo在當前版本可用
      // 由於 getUserInfo 是網絡請求，可能會在 Page.onLoad 之后才返回
      // 所以此處加入 callback 以防止這種情況
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在沒有 open-type=getUserInfo 版本的兼容處理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    };
  },
  getUserInfo: function(e) {
    //點擊取消按鈕
    if (e.detail.userInfo == null) {
      console.log("授權失敗")
    } 
    else {//點擊允許按鈕
      this.setData({
        userInfo: e.detail.userInfo,
        hasUserInfo: true
      })
    }
    //全局對象用戶信息賦值
    app.globalData.userInfo = e.detail.userInfo
  }
})

效果圖：

tips：客戶點擊取消授權按鈕可調用 wx.openSetting 打開設置界面，引導用戶開啟授權。也可以使用  wx.authorize  在調用需授權 API 之前，提前向用戶發起授權請求。

END！