1. 程式人生 > >微信小程式-獲取使用者資訊-前端寫法

微信小程式-獲取使用者資訊-前端寫法

開發微信小程式,前提是申請到一個 appId 並拿到 appSecret ,並在微信公眾平臺配置好小程式對應的伺服器域名。

小程式可以通過兩種方式獲取到使用者資訊,並且獲取到資訊之後,推薦直接存到小程式的全域性變數中,後續直接在全域性變數中讀取,無需在重新獲取。

方法一:

使用 appId 新建小程式模板,在建立時,勾選中“建立普通快速啟動模板”。建立成功後,在 pages/index/index.js檔案中可以看到如下程式碼:

    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 是必須在 app.js 檔案中已經定義好的,否則會出錯。

方法二:

是通過自定義的後臺介面,把必要的引數傳遞到後臺,然後返回使用者資訊自定義的token,token是用來做之後授權校驗使用。如下的例子是直接反饋了 token ,並沒有把 使用者資訊返回回來:

    //測試授權
    wx.login({
      success: function (res) {
        var code = res.code;
        wx.getUserInfo({
          success: function (res) {
            console.log(res.userInfo);
            var iv = res.iv;
            var encryptedData = res.encryptedData;
            var signature = res.signature;
            var rawData = res.rawData;

            wx.request({
              url: "https://kevin.kevinkevin.com/login_status",//上傳使用者資訊和登入用的code,獲取token
              data: {
                code: code,
                signature: signature,
                rawData: rawData,
                encryptedData: encryptedData,
                iv: iv
              },
              success: function (res) {
                
                if (res.statusCode && res.statusCode == "200"){
                  //從後臺獲取的token,前端自己儲存到全域性變數中,備用;以後每次使用request都把該變數存入header變數
                  console.log("token : " + res.data);
                  
                  app.globalData.token = res.data;
                  
                }
              }
            })

          },
          fail: function () {
            _this.authSetting();
          }
        })
      }
    })

獲取到的 token 也是直接存到了全域性變數,備用。

因為小程式的前後臺我是分開電腦開發的,所以第二種獲取使用者資訊和 自定義 token 的後臺程式碼,在下一篇文章中,請見諒。

之後會在評論裡附加上原始碼下載連結