微信小程式開發教程(基礎篇)3-app.js 解析

瘋狂早茶發表於2016-11-20
微信小程式APPJS

上一篇教程中寫道，開發工具會生成一個預設的程式框架，其中程式的主流程程式碼包含在app.js中。預設實現中，該部分功能比較簡單，不過對於學研究小程式開發還是比較有價值的。

由於程式碼行數不多，下面一次性貼出來後進行講解

//app.js
App({
  onLaunch: function () {
    //呼叫API從本地快取中獲取資料
    var logs = wx.getStorageSync(`logs`) || []
    logs.unshift(Date.now())
    wx.setStorageSync(`logs`, logs)
  },
  getUserInfo:function(cb){
    var that = this
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //呼叫登入介面
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      })
    }
  },
  globalData:{
    userInfo:null
  }
})

程式碼中定義了一個App物件，該物件包含onLaunch, getUserInfo兩個方法和globalData成員變數 其中onLaunch方法會在程式啟動時由框架來進行呼叫。在該方法中，程式通過微信提供的本地儲存介面獲取了一個logs變數，第一次獲取時會返回空，這時將變數初始化為空陣列。之後在陣列頭部新增一個格式化的時間字串，之後將陣列變數儲存在本地。

微信小程式框架提供了一系列api來幫助我們進行本地資料儲存，上面的程式碼中使用到了wx.getStorageSync和wx.setStorageSync兩個api,更多相關api可以參考這裡

getUserInfo方法很容易理解，會執行獲取使用者資訊的功能。不過該方法不同於onLaunch,它不是框架預設的函式，因此不會自動觸發呼叫。該方法是在index.js的onload方法中呼叫的(關於index.js部分會在後續教程中講解)。該方法需要呼叫者傳遞一個名為cb的引數，首先判斷是否獲取過使用者資訊，如果獲取過並且cb是函式的話，就會呼叫cb函式並將globalData成員變數傳遞進去，否則將呼叫wx.login介面來獲取使用者資訊。

對js不熟悉或者很少接觸指令碼語言的同學可能會對上述程式碼的語法產生困惑，這幾行程式碼涉及到了函式回撥，匿名函式，閉包等概念，我後續會針對這部分單獨寫一篇教程。

程式碼最後定義了 globalData成員變數，該成員包含userInfo變數，用來儲存使用者資訊。

相關文章