【小程序】- 微信授權、綁定手機號

微信小程序授權登錄並登記手機號碼,以下是根據小程序官網梳理的流程圖,方便自己理解;

官方指引:小程序登錄
在這裏插入圖片描述

// 微信授權登錄
  bindGetUserInfo: function(e) {

    // 將用戶信息存入全局變量,供綁定手機號使用
    app.globalData.encryptedData=e.detail.encryptedData
    app.globalData.iv=e.detail.iv

    if (e.detail.userInfo) {
      //用戶按了允許授權按鈕
      var that = this;
      // 獲取到用戶的信息了,打印到控制檯上看下
      // console.log(e.detail.userInfo)
      wx.login({
        success: res => {
          var code = res.code
          console.log("用戶的code:" + res.code)
          //調用後端接口獲取openId
          wx.request({
            url: 'http://localhost:8080/login/WechatLogin',
            method: 'POST',
            data: {
              code: res.code
            },
            header: {
              'content-type': 'application/x-www-form-urlencoded'
            },

            // 執行成功將數據存入本地緩存
            success: res => {
              console.log(res.data)
              if (res.data) {
                console.log("用戶的openid:" + res.data.openid)
                app.globalData.userInfo['user_id'] = res.data.user_id
                wx.setStorageSync('openid', res.data.openid)
              } else {
                console.log('微信授權失敗嘍,請重新授權')
              }
              //將用戶信息放入緩存,登記手機號後與手機號一起存儲
              let that = this
              let userInfo = e.detail.userInfo;
              app.globalData.userInfo['avatarUrl'] = userInfo.avatarUrl; // 頭像
              app.globalData.userInfo['nickName'] = userInfo.nickName; // 暱稱
              app.globalData.userInfo['gender'] = userInfo.gender; //  性別
              app.globalData.userInfo['userId'] = userInfo.userId;

              //寫入緩存
              wx.setStorageSync('userInfo', app.globalData.userInfo);
              that.setData({
                showAvata: true
              })
              // 授權成功綁定手機號
              wx.navigateTo({
                url: '/pages/my/login/bingphonenum/bingphonenum'
              })
            }
          })
        }
      })
      //授權成功後,通過改變 isHide 的值,讓實現頁面顯示出來,把授權頁面隱藏起來
      that.setData({
        isHide: false
      })
    }
  }
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章