微信小程序實戰開發四:小程序獲取用戶信息流程及信息存儲方式解析

編輯:睿兒發表于:2020-08-29 14:32:26 16 次閱讀
原創聲明:本內容(微信小程序實戰開發四:小程序獲取用戶信息流程及信息存儲方式解析)為睿兒網絡原創作品,任何媒體、網站或個人未經本網協議授權不得轉載、鏈接、轉貼或以其他方式復制發布/發表。如需轉載請聯系站長QQ:7280374 請注明申請文章轉載!

微信小程序在創建初期會給一個獲取用戶信息的示例代碼,我們今天就來解析一下小程序全局app.js運行方式及用戶數據存儲建議。

原版app.js代碼:通過代碼我們可以看到 在APP過程中先是調用了用戶登陸wx.login 登陸成功之后我們還可以根據 code 通過服務器交互(CURL方式)獲取到用戶的openid sessionKey這些。

然后 通過 wx.getSetting 這個方法獲取用戶數據,并把用戶數據存在 globalData 里的 userinfo變量中。

App({
  onLaunch: function () {
    // 展示本地存儲能力。
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
    //console.log(logs)
    // 登錄
    wx.login({
      success: res => {
        // 發送 res.code 到后臺換取 openId, sessionKey, unionId
        console.log(res);
      }
    })
    // 獲取用戶信息
    wx.getSetting({
      success: res => {
        //console.log("getSetting is:"+res);
        if (res.authSetting['scope.userInfo']) {
          // 已經授權,可以直接調用 getUserInfo 獲取頭像昵稱,不會彈框
          wx.getUserInfo({
            success: res => {
              // 可以將 res 發送給后臺解碼出 unionId
              console.log(res);
              this.globalData.userInfo = res.userInfo
              // 由于 getUserInfo 是網絡請求,可能會在 Page.onLoad 之后才返回
              // 所以此處加入 callback 以防止這種情況
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  globalData: {
    userInfo: null,
    userOpenid: ''
  }
})


在調用的時候 index.js里面,可以看到我把原來的代碼全注釋掉了,因為后來換了方法,但這個也可以先解析一下它的代碼。

首先 用 if 來判斷是否獲取了 app.globalData.userInfo 為什么要加這個判斷呢?在人家APP.JS里面有介紹,由于 getUserInfo 是網絡請求,可能會在 Page.onLoad 之后才返回,所以頁面加載成功的時候有可能這個值還沒返回過來,然后就有了 elseif  利用 callback的方式來獲取用戶信息。

         // if (app.globalData.userInfo) {
            //   console.log("初次加載,這時候應該還沒有 app.globalData.userInfo");
            //   this.setData({
            //     userInfo: app.globalData.userInfo,
            //     userOpenid:wx.getStorageSync('tureUserOpenID'),
            //     hasUserInfo: true
            //   })
            // } else if (this.data.canIUse){ 
            //   // 由于 getUserInfo 是網絡請求,可能會在 Page.onLoad 之后才返回
            //   // 所以此處加入 callback 以防止這種情況
            //   app.userInfoReadyCallback = res => {
            //     console.log("初次加載,這時候應該還沒有 app.globalData.userInfo,所以在CALLBACK處獲取用戶信息");
            //     this.setData({
            //       userInfo: res.userInfo,
            //       userOpenid:wx.getStorageSync('tureUserOpenID'),
            //       hasUserInfo: true
            //     });
            //   }
            // } else {
            //   // 在沒有 open-type=getUserInfo 版本的兼容處理
            //   console.log("如果用戶沒有同意的時候加載這個獲取用戶信息");
            //   wx.getUserInfo({
            //     success: res => {
            //       app.globalData.userInfo = res.userInfo
            //       this.setData({
            //         userInfo: res.userInfo,
            //         userOpenid:wx.getStorageSync('tureUserOpenID'),
            //         hasUserInfo: true
            //       })
            //     }
            //   })
            // }


APP.JS運行流程解析:在初次打開小程序的時候 會默認指到首頁上面,但首頁加載與app.js加載是同時進行的。有可能APP.JS還沒加載完成首頁就加載好了,所以在首頁調用的時候加了個判斷 使用了callback的方式 防止獲取不到用戶數據。

當APP.JS加載完成之后,再點擊其它頁面的時候,這個APP.JS里面的東西不會重新加載,因為它的代碼是寫在 onLaunch: function ()  時面的。這個代表頁面加載時運行。

經過測試發現 APP.JS只在加載的時候運行一次,而且當運行完成之后再點擊其它頁面之時 app.globalData.userInfo 已經有值了,其它頁面調用的時候就可以走這一層,直接去拿用戶信息。

但這樣的話每次想要使用用戶信息數據之時都需要寫JS去獲取,感覺很麻煩。

所以我選擇了在 APP.JS中獲取完用戶信息后把用戶信息用全局存儲的方式存起來。

image.png

經過測試發現不用JS,直接使用全局存儲就可以了。這樣就感覺方便很多。

image.png


總結: 

  1. APP.JS里面獲取用戶數據,只在加載之時運行一次,加載完成之后再點任何頁面都不會重新加載。

  2. index.js加載有可能會比APP.JS還快,所以用JS代碼調用用戶信息的時候需要做判斷,先判斷一下數組有沒有值,如果沒有就使用CALLBACK的方式去獲取。

  3. 把用戶信息通過全局存儲的方式存在APP.JS里面,在所有頁面直接調用即可,感覺這樣很省心,但不知道有沒有什么暗坑。

原文地址:http://www.htzgsd.com/library/202008/30.html(張家口導航-睿兒知識庫)

張家口睿兒網絡科技有限公司版權所有
亚洲AV片不卡无码