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

上一篇教程中寫道,開發工具會生成一個默認的程序框架,其中程序的主流程代碼包含在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

微信小程序框架提供了一系列api來幫助咱們進行本地數據存儲,上面的代碼中使用到了wx.getStorageSyncwx.setStorageSync兩個api,更多相關api能夠參考這裏數組

getUserInfo方法很容易理解,會執行獲取用戶信息的功能。不過該方法不一樣於onLaunch,它不是框架預設的函數,所以不會自動觸發調用。該方法是在index.js的onload方法中調用的(關於index.js部分會在後續教程中講解)。該方法須要調用者傳遞一個名爲cb的參數,首先判斷是否獲取過用戶信息,若是獲取過而且cb是函數的話,就會調用cb函數並將globalData成員變量傳遞進去,不然將調用wx.login接口來獲取用戶信息。緩存

對js不熟悉或者不多接觸腳本語言的同窗可能會對上述代碼的語法產生困惑,這幾行代碼涉及到了函數回調,匿名函數,閉包等概念,我後續會針對這部分單獨寫一篇教程。微信

代碼最後定義了 globalData成員變量,該成員包含userInfo變量,用來保存用戶信息。閉包

相關文章
相關標籤/搜索