微信小程序開發(fā)教程(基礎(chǔ)篇)1-初識(shí)微信小程序
微信小程序開發(fā)教程(基礎(chǔ)篇)2-微信小程序結(jié)構(gòu)概覽
上一篇教程中寫道,開發(fā)工具會(huì)生成一個(gè)默認(rèn)的程序框架,其中程序的主流程代碼包含在app.js中陷寝。默認(rèn)實(shí)現(xiàn)中生音,該部分功能比較簡(jiǎn)單,不過對(duì)于學(xué)研究小程序開發(fā)還是比較有價(jià)值的副渴。
由于代碼行數(shù)不多酣胀,下面一次性貼出來后進(jìn)行講解
//app.js
App({
onLaunch: function () {
//調(diào)用API從本地緩存中獲取數(shù)據(jù)
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{
//調(diào)用登錄接口
wx.login({
success: function () {
wx.getUserInfo({
success: function (res) {
that.globalData.userInfo = res.userInfo
typeof cb == "function" && cb(that.globalData.userInfo)
}
})
}
})
}
},
globalData:{
userInfo:null
}
})
代碼中定義了一個(gè)App對(duì)象蚊惯,該對(duì)象包含onLaunch, getUserInfo兩個(gè)方法和globalData成員變量
其中onLaunch方法會(huì)在程序啟動(dòng)時(shí)由框架來進(jìn)行調(diào)用愿卸。在該方法中,程序通過微信提供的本地存儲(chǔ)接口獲取了一個(gè)logs變量截型,第一次獲取時(shí)會(huì)返回空,這時(shí)將變量初始化為空數(shù)組儒溉。之后在數(shù)組頭部添加一個(gè)格式化的時(shí)間字符串宦焦,之后將數(shù)組變量存儲(chǔ)在本地。
微信小程序框架提供了一系列api來幫助我們進(jìn)行本地?cái)?shù)據(jù)存儲(chǔ)顿涣,上面的代碼中使用到了wx.getStorageSync和wx.setStorageSync兩個(gè)api,更多相關(guān)api可以參考這里
getUserInfo方法很容易理解波闹,會(huì)執(zhí)行獲取用戶信息的功能。不過該方法不同于onLaunch,它不是框架預(yù)設(shè)的函數(shù)涛碑,因此不會(huì)自動(dòng)觸發(fā)調(diào)用精堕。該方法是在index.js的onload方法中調(diào)用的(關(guān)于index.js部分會(huì)在后續(xù)教程中講解)。該方法需要調(diào)用者傳遞一個(gè)名為cb的參數(shù)蒲障,首先判斷是否獲取過用戶信息歹篓,如果獲取過并且cb是函數(shù)的話,就會(huì)調(diào)用cb函數(shù)并將globalData成員變量傳遞進(jìn)去揉阎,否則將調(diào)用wx.login接口來獲取用戶信息庄撮。
對(duì)js不熟悉或者很少接觸腳本語言的同學(xué)可能會(huì)對(duì)上述代碼的語法產(chǎn)生困惑,這幾行代碼涉及到了函數(shù)回調(diào)毙籽,匿名函數(shù)洞斯,閉包等概念,我后續(xù)會(huì)針對(duì)這部分單獨(dú)寫一篇教程坑赡。
代碼最后定義了 globalData成員變量烙如,該成員包含userInfo變量,用來保存用戶信息毅否。