微信小程序實現微信登錄

• 本文將簡單介紹如何實現小程序的微信登陸
• 將要使用的api：
  1. wx.checkSession(Object object)
  2. wx.login(Object object)
  3. wx.getStorageSync(string key)
  4. wx.setStorageSync(string key, any data)
  5. wx.request(Object object)

首先我們可以看看官方文檔的流程圖。官網文檔相應鏈接

流程圖大概講的是，小程序端調用wx.login獲取code，然后調用wx.request進行網絡請求，攜帶參數：code，appid，appsecret，后端用這三個參數向微信接口服務請求，得到session_key和openid等數據。緊接着，后端對參數進行處理，返回自定義登錄狀態，比如說：后端對session_key進行加密，返回加密數據給小程序端。接着，小程序端通過wx.setStorageSync對返回來的處理過的數據存入storage。之后，每當發起業務請求時，如需session_key，小程序端可以向后端傳入storage中的登錄態，從而獲取業務數據。

為了進一步優化用戶體驗，我們使用wx.checkSession對用戶的session_key有效期進行檢驗，如圖。

如圖，在用戶點擊微信登錄的按鈕時，我們先從storage中取自定義的登錄態，如果取到了，那么就檢查session_key的有效期，如若有效，則可以做其他事情，如業務請求；如若無效，那么用戶調用wx.login重新登錄。如果沒取到自定義登錄態，他么用戶調用wx.login登錄。

代碼如下：

    //點擊微信登錄按鈕觸發事件
      onLoginButton(event){
        var that = this;
        let thirdSession = wx.getStorageSync('thirdSession');
        if (thirdSession) {//如果之前有存過thirdSession
          //檢查session_key是否在有效期
          wx.checkSession({
            //在有效期
            success(res) {//存儲中有有自定義登錄狀態且在有效期
              //用自定義登錄狀態進行一些業務請求
              wx.request({
                url: '',
                data:{
                  thirdSession,
                }
              })
            },
            //不在在有效期,則需重新登錄
            fail(err){
              //調用微信登錄請求函數
              that.wechatLogin()
            }
          })
        } else {//如果之前沒存過thirdSession，則需登錄
          //調用微信登錄請求函數
          that.wechatLogin();
        }
      },
      //微信登錄請求函數
      wechatLogin(){
       wx.login({
         success(res) {
           let code = res.code;
           wx.request({
             url: '',
             data: {
               //三個登錄所需參數
               appid,
               appsecret,
               code,
             },
             success(res) {
               //后端返回自定義登錄狀態，比如說加密過的session_key，其返回值的參數名為thirdSession
               wx.setStorageSync('thirdSession', res.data.thirdSession)
               //and do something
             }
           })
         }
       })
      }

以上就是全部內容，如有不足還望大家多多指正。