微信小程序是如何工作的？
小程序包含一個描述整體程序的 app 和多個描述各自頁面的 page。
本節(jié)內(nèi)容概要
- 目錄結(jié)構(gòu)
- 啟動流程
- 全局配置
- 邏輯層
- 視圖層
目錄結(jié)構(gòu)
├── app.js
├── app.json
├── app.wxss
├── pages
│ │── index
│ │ ├── index.wxml
│ │ ├── index.js
│ │ ├── index.json
│ │ └── index.wxss
│ └── logs
│ ├── logs.wxml
│ └── logs.js
└── utils
小程序包含一個描述整體程序的 app 和多個描述各自頁面的 page。
一個小程序主體部分由三個文件組成，必須放在項目的根目錄，如下：
app.js 必備文件，存放小程序邏輯
app.json 必備文件，存放小程序公共配置
app.wxss 存放小程序公共樣式表
一個小程序頁面由四個文件組成，分別是：
- js 必備文件，存放 頁面邏輯
- wxml 必備文件，存放 頁面結(jié)構(gòu)
- json 存放 頁面配置
- wxss 存放 頁面樣式表
啟動流程
App() 函數(shù)用來注冊一個小程序。接受一個 Object 參數(shù)，其指定小程序的生命周期回調(diào)等。
App() 必須在 app.js 中調(diào)用，必須調(diào)用且只能調(diào)用一次。不然會出現(xiàn)無法預(yù)期的后果。
App({
onLaunch(options) {
//小程序初始化完成時觸發(fā)，全局只觸發(fā)一次。參數(shù)也可以使用 wx.getLaunchOptionsSync 獲取。
},
onShow(options) {
//小程序啟動，或從后臺進(jìn)入前臺顯示時觸發(fā)。也可以使用 wx.onAppShow 綁定監(jiān)聽。
},
onHide() {
//小程序從前臺進(jìn)入后臺時觸發(fā)。也可以使用 wx.onAppHide 綁定監(jiān)聽。
},
onError(msg) {
console.log(msg)
// 小程序發(fā)生腳本錯誤或 API 調(diào)用報錯時觸發(fā)。也可以使用 wx.onError 綁定監(jiān)聽。
},
globalData: 'I am global data'
})
Page(Object) 構(gòu)造器
Page(Object) 函數(shù)用來注冊一個頁面。接受一個 Object 類型參數(shù)，其指定頁面的初始數(shù)據(jù)、生命周期回調(diào)、事件處理函數(shù)等。
// index.js
Page({
data: {
text: 'This is page data.'
},
onLoad(options) {
// Do some initialize when page load.
},
onReady() {
// Do something when page ready.
},
onShow() {
// Do something when page show.
},
onHide() {
// Do something when page hide.
},
onUnload() {
// Do something when page close.
},
onPullDownRefresh() {
// Do something when pull down.
},
onReachBottom() {
// Do something when page reach bottom.
},
onShareAppMessage() {
// return custom share data when user share.
},
onPageScroll() {
// Do something when page scroll
},
onResize() {
// Do something when page resize
},
onTabItemTap(item) {
console.log(item.index)
console.log(item.pagePath)
console.log(item.text)
},
// Event handler.
viewTap() {
this.setData({
text: 'Set some data for updating view.'
}, function () {
// this is setData callback
})
},
customData: {
hi: 'MINA'
}
})
Object 參數(shù)說明：
- data 頁面的初始數(shù)據(jù)
- onLoad 生命周期回調(diào)—監(jiān)聽頁面加載
- onShow 生命周期回調(diào)—監(jiān)聽頁面顯示
- onReady 生命周期回調(diào)—監(jiān)聽頁面初次渲染完成
- onHide 生命周期回調(diào)—監(jiān)聽頁面隱藏
- onUnload 生命周期回調(diào)—監(jiān)聽頁面卸載
- onPullDownRefresh 監(jiān)聽用戶下拉動作
- onReachBottom 頁面上拉觸底事件的處理函數(shù)
- onShareAppMessage 用戶點擊右上角轉(zhuǎn)發(fā)
- onPageScroll 頁面滾動觸發(fā)事件的處理函數(shù)
- onResize 頁面尺寸改變時觸發(fā)，詳見 響應(yīng)顯示區(qū)域變化
- onTabItemTap 當(dāng)前是 tab 頁時，點擊 tab 時觸發(fā)
全局配置
小程序配置在app.json文件中進(jìn)行，具體如下：
{
"pages": ["pages/index/index", "pages/logs/index"],
"window": {
"navigationBarTitleText": "Demo"
},
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首頁"
},
{
"pagePath": "pages/logs/logs",
"text": "日志"
}
]
},
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
"debug": true,
"navigateToMiniProgramAppIdList": ["wxe5f52902cf4de896"]
}
配置說明：
- pages 頁面路徑列表
- window 全局的默認(rèn)窗口表現(xiàn)
- tabBar 底部 tab 欄的表現(xiàn)
- networkTimeout 網(wǎng)絡(luò)超時時間
- debug 是否開啟 debug 模式，默認(rèn)關(guān)閉
- functionalPages 是否啟用插件功能頁，默認(rèn)關(guān)閉
- subpackages 分包結(jié)構(gòu)配置
- workers 代碼放置的目錄
- requiredBackgroundModes 需要在后臺使用的能力，如「音樂播放」
邏輯層
小程序開發(fā)框架的邏輯層使用 JavaScript 引擎為小程序提供開發(fā)者 JavaScript 代碼的運行環(huán)境以及微信小程序的特有功能。
邏輯層將數(shù)據(jù)進(jìn)行處理后發(fā)送給視圖層，同時接受視圖層的事件反饋。
開發(fā)者寫的所有代碼最終將會打包成一份 JavaScript 文件，并在小程序啟動的時候運行，直到小程序銷毀。這一行為類似 ServiceWorker，所以邏輯層也稱之為 App Service。
視圖層
框架的視圖層由 WXML 與 WXSS 編寫，由組件來進(jìn)行展示。
將邏輯層的數(shù)據(jù)反應(yīng)成視圖，同時將視圖層的事件發(fā)送給邏輯層。
WXML(WeiXin Markup language) 用于描述頁面的結(jié)構(gòu)。
WXS(WeiXin Script) 是小程序的一套腳本語言，結(jié)合 WXML，可以構(gòu)建出頁面的結(jié)構(gòu)。
WXSS(WeiXin Style Sheet) 用于描述頁面的樣式。
組件(Component)是視圖的基本組成單元。
總結(jié)
本小節(jié)主要介紹了微信小程序的代碼結(jié)構(gòu)和框架調(diào)用流程，希望你能掌握：
- 目錄結(jié)構(gòu)
- 啟動流程
- 全局配置
- 邏輯層
- 視圖層
劇透：下一節(jié)我們會重點講解小程序的視圖容器和文本組件功能
