登錄及獲取微信用戶信息

1. 調用wx.login()獲取登錄憑證code，再調用后端接口換取用戶登錄態信息(openid, session_key)

   此時獲得的登錄狀態具有時效性，可以調用wx.checkSession()檢查是否過期，若過期，則需要重新調用wx.login()執行登錄流程

2. 使用wx.getSetting()獲取用戶授權列表

   1. 若已授權：調用wx.getUserInfo()獲取用戶信息
   2. 若未授權：彈出模態框展示一個 微信授權登錄 按鈕提示用戶點擊登錄
      1. 同意授權：用戶授權后可通過綁定的方法獲取用戶信息
      2. 拒絕授權：則無法獲取用戶信息，若必須微信授權登錄才可用，可以以恰當的方式給出說明，如使用wx.openSetting()引導用戶手動打開授權開關

3. 將獲取到的用戶信息和第1部中得到的code使用服務端提供的接口更新用戶信息，如1中的示例

授權綁定微信手機號

1. 顯示授權綁定微信手機號的按鈕(必須用戶手動點擊)
2. 用戶同意授權后，調用成功回調處理后續操作

相應接口代碼示例

1. 用戶授權列表：wx.getSetting()

   wx.getSetting({
     success (res) {
       console.log(res.authSetting)
       // res.authSetting = {
       //   "scope.userInfo": true, // true已授權 false未授權
       //   "scope.userLocation": true
       //    ...
       // }
     }
   })
   

2. 檢查登錄態是否過期

   wx.checkSession({
     success () {
       //session_key 未過期，并且在本生命周期一直有效
     },
     fail () {
       // session_key 已經失效，需要重新執行登錄流程
       wx.login() //重新登錄
     }
   })
   

3. 調用wx.login()進行登錄并獲取cookies

   wx.login({
       success: function(res) {
           // 得到了code
           if (res.code) {
               wx.request({
                   url: api.user.authLogin(res.code) // 后端提供的驗證登錄接口
                   success: function(response) {
                    // 驗證成功，保存cookies, 封裝在全局統一的請求方法中，如get, post
                       wx.setStorage({
                        key: 'cookies',
                        data: response.data.res.cookies
                       })
                    
                       wx.getUserInfo({
                        withCredentials: true,
                           success: function(res) {
                               // 取得用戶微信信息，調用后端接口更新用戶信息
                               const userInfo = res.userInfo
                               const encryptedData = res.encryptedData
                            const iv = res.iv
                               
                               const params = {
                                 nick_name: userInfo.nickName,
                                 gender: userInfo.gender,
                                 province: userInfo.province,
                                 city: userInfo.city,
                                 country: userInfo.country,
                                 avatar_url: userInfo.avatarUrl,
                                 encrypted_data: encryptedData,
                                 encrypt_iv: iv
                               }
   
                               server.get(api.user.updateBaseInfo(), params, () => {
                                // 成功保存用戶信息
                               })
                           }
                       })
                }
               })
           }
       }
   })
   

4. 微信授權登錄

   <button open-type="getUserInfo" bindgetuserinfo="onGetUserInfo">微信登錄</button>
   

   methods = {
       onGetUserInfo: this.handleGetUserInfo
   }
   
   // 同意授權
   handleGetUserInfo(e) {
       wx.getUserInfo()
   }
   

5. 授權獲取微信綁定的手機號

   <button open-type="getPhoneNumber" bindgetphonenumber="onGetPhoneNumber">
       綁定微信手機號
   </button>
   

   methods = {
       onGetPhoneNumber: this.handleGetPhoneNumber
   }
   
   /**
   * 同意授權獲取手機號
   * @desc 獲取到 encryptedData，iv信息，需要服務端解密才能獲取到真正的手機號
   */
   handleGetPhoneNumber(e) {
       if (e.detail.iv) {
           server.post(api.user.bindWXPhoneNumber(), {
               encrypted_data: e.detail.encryptedData,
               encrypt_iv: e.detail.iv
           }, data => {
               wx.showToast({ title: '綁定成功' })
               // do something
           }, error => {
               wx.showModal({
                   title: '綁定失敗',
                   content: '[服務端返回的錯誤信息]',
                   showCancel: false,
                   success: res => {
                       if (res.confirm) { // 用戶確認后
                           // do something
                       }
                   }
               })
           })
       } else { // 用戶拒絕授權
           // do something
       }
   }