小程序：登錄（獲取用戶信息、登錄）

1、相關函數

（1）點擊頭像獲取用戶信息：getUserInfo

  getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }

控制台打印e的信息：

 

 顯示性別、城市、微信名、微信頭像等用戶信息

 app.globalData.userInfo = e.detail.userInfo

將獲取的用戶信息給了全局

  this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })

將用戶信息賦給了userinfo，並且hasUserInfo變為true

（2）用戶信息的獲取

 onLoad: function () {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse){
      // 由於 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
          })
        }
      })
    }
  },

第一個判斷是：全局的userinfo不為空的話，就把全局的userinfo的值賦給該變量，並將hasuserinfo變為true，代表已經擁有用戶的信息

第二個判斷是：如果沒有用戶信息，先判斷是否存在獲取用戶信息的按鈕，則點擊按鈕獲取用戶的信息

第三個判斷是：沒有全聚德userinfo，並且沒有按鈕就直接進入頁面，不再進行獲取用戶的身份信息

 

2、獲取用戶信息

（1）設置登錄授權按鈕

早期版本直接調用getUserInfo獲取用戶信息，現在必須在得到用戶允許的情況下才能獲得用戶信息，提供的有一個按鈕讓用戶選擇是否能獲得該用戶的信息

  <button open-type="getUserInfo" bindgetuserinfo="getUserInfo">  </button>

（2）獲取用戶信息

 getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }

e.detail.userInfo就是用戶的信息，給全局讓其他的頁面也能獲取到

（3）切換頁面后判斷用戶信息是否存在

 onLoad: function () {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse){
      // 由於 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
          })
        }
      })
    }
  },

分為全局有用戶信息、沒有用戶信息但是有按鈕、沒有用戶信息沒有按鈕三種情況

（4）概述

如果當前版本支持按鈕授權，就點擊按鈕獲取用戶的信息；如果不支持授權的話就直接使用getUserInfo獲取用戶信息。當我們獲取到授權之后將獲取到的用戶的相關信息賦給全局，再次登錄小程序的時候分為全局有用戶信息、沒有用戶信息但是有按鈕、沒有用戶信息沒有按鈕三種情況進行處理

 

3、小程序的登錄流程

（1）登錄流程

 

 

 

 （2）登錄函數

調用接口獲取臨時登錄憑證code，通過該憑證獲取小程序的登錄狀態信息，包括用戶的唯一標識openid、本次登錄的會話密匙(用於用戶數據的加密通訊)session_key

   wx.login({
      success: res => {
        // 發送 res.code 到后台換取 openId, sessionKey, unionId
        console.log(res)
      }
    })

res的信息：

 

 

（3）小程序登錄過程

• wx.login獲取到code
• wx.request通過code發送請求，將code發送給開發者服務器
• 通過登錄憑證（appid、code）判斷接口能否使用，並返回openid、session_key給開發者服務器
• 開發者服務器自定義登錄狀態並與openid、session_key關聯，將登錄態返回給微信小程序
• 小程序登錄后獲取業務，發起業務請求（攜帶登錄態），會在開發者服務器查詢是否存在，存在的話有權利操作其他業務