• 技術概述
• 技術詳述
• 技術使用中遇到的問題和解決過程
• 總結
• 參考文獻、參考部落格

技術概述

在開發微信小程式的時候，我們一般都需要獲取當前使用者的微信資訊，來儲存使用者的個性化設定，以及提供個性化的服務。這裡要介紹一下如何獲取使用者的登入狀態及個人資訊。

技術詳述

1. 獲取使用者身份標識
   我們一般是採用wx.login()函式來獲取獲取登入憑證（code）。通過憑證進而換取使用者登入態資訊，包括使用者在當前小程式的唯一標識（openid）、微信開放平臺帳號下的唯一標識（unionid，若當前小程式已繫結到微信開放平臺帳號）及本次登入的會話金鑰（session_key）等，之後就可以依據openid在後端生成使用者並繫結使用者行為。返回值是一個code，code是使用者登入憑證（有效期五分鐘）。開發者需要在開發者伺服器後臺呼叫auth.code2Session，使用code換取openid、unionid、session_key等資訊

wx.login({
  success (res) {
    if (res.code) {
      //發起網路請求
      wx.request({
        url: 'https://example.com/onLogin',
        data: {
          code: res.code
        }
      })
    } else {
      console.log('登入失敗！' + res.errMsg)
    }
  }
})

2. 獲取使用者資料資訊
   在之前可以通過wx.getUserInfo()函式配合login登入後的狀態直接獲取使用者狀態，但在四月份微信調整介面使得getUserInfo()只能獲取到匿名使用者狀態，於是現在需要獲取使用者資訊應呼叫wx.getUserprofile()函式。
   

getUserProfile(e) {
    // 推薦使用wx.getUserProfile獲取使用者資訊，開發者每次通過該介面獲取使用者個人資訊均需使用者確認
    // 開發者妥善保管使用者快速填寫的頭像暱稱，避免重複彈窗
    wx.getUserProfile({
      desc: '用於完善會員資料', // 宣告獲取使用者個人資訊後的用途，後續會展示在彈窗中，請謹慎填寫
      success: (res) => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },
  getUserInfo(e) {
    // 不推薦使用getUserInfo獲取使用者資訊，預計自2021年4月13日起，getUserInfo將不再彈出彈窗，並直接返回匿名的使用者個人資訊
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  },
 

技術使用中遇到的問題和解決過程

1. 由於是初學，在獲取登入狀態以及登入資訊時都會踩坑，比如登入完卻沒有記錄狀態等問題，有些介面需要登入後才能呼叫，否則後端無法獲取正在訪問的使用者的資訊，自然無法返回需要的資料，以下為我的解決方法可以參考。
   做法是封裝userLogin函式，函式返回一個Promise物件，在呼叫別的函式時通過userInfo這個全域性變數去判斷該使用者是否登入，若尚未登入則呼叫userLogin.then請求登入,已登入則可以直接獲取資訊。

userLogin:function (e) {
    let that=this;
    let promise=new Promise(function (resolve,reject) {
      let _that = that;
      wx.login({
        success: res => {
          // 傳送 res.code 到後臺換取 openId, sessionKey, unionId
           console.log(res.code);
           console.log("登入" + that.globalData.baseUrl);
           request({
             url:  that.globalData.baseUrl + '/api/user/login',
             method: 'POST',
             data:
               res.code,
             success:function(respond)
             {
               that.globalData.userInfo=respond.data;
               console.log("登入成功");
               console.log(respond);
               that.globalData.userId = respond.data.data.id;
               resolve(respond);
             },
             fail:function(respond)
             {
              //  this.globalData.userInfo=res.data;
              console.log("登入失敗");
              console.log(respond);
               reject(respond);
             }
           })
        }
      })
    })
    return promise;
  },

function(){
    if(!app.globalData.userInfo){  //未登入
        userLogin
        .then(this.action());
    }
    else                           //已登入
        this.action();
}

2. 獲取使用者資料時一般應提供一個按鈕供使用者授權，點選按鈕後會出現授權彈窗使用者允許後將返回一系列使用者資訊，則可以在特定地方顯示，或者將其儲存進資料庫中
   
   
   
   程式碼如下可參考

<image class="avatar" bindtap="setAvatarUrl" src="{{url}}"> </image>

setAvatarUrl: function(e) {
    wx.getUserProfile({
      desc: '獲取使用者頭像等資訊',
      success: res => {
        this.setData({
          url: res.userInfo.avatarUrl
        })
        console.log(res)
      },
      fail: err => {
        wx.showToast({
          title: '失敗了',
          icon: 'error'
        })
      }
    })
  },

總結

微信小程式確實是一種很便攜的工具，能夠實現快速開發。以上是我對於獲取使用者身份標識以及獲取使用者資訊的方法的分享，在初次學習時容易遇到問題，查閱資料後也會存在疑惑，以上內容是我在踩坑後總結調整得到，希望能對讀者有所幫助，更多拓展的用法需要參考微信開發文件。若有疑問，也可評論留言。

參考文獻、參考部落格

微信官方文件
微信小程式獲取openid