首頁 >微信小程式 >小程式開發 >微信小程式開發基礎篇之app.js(3)

微信小程式開發基礎篇之app.js(3)

Y2J
Y2J原創
2017-04-25 09:18:353859瀏覽

微信小程式開發教學(基礎篇)1-初識微信小程式
微信小程式開發教學(基礎篇)2-微信小程式結構概覽

上一篇教學中寫道,開發工具會產生一個預設的程式框架,其中程式的主流程程式碼包含在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變量,用來保存使用者資訊。

以上是微信小程式開發基礎篇之app.js(3)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn