小程式的線程架構 每個小程式包含一個描述整體程式的app實例和多個描述頁面的page。 其中app由3個文件構成: app.json 公共配置文件 app.wxss 公共樣式文件 app.js 主體邏輯文件 page頁面最多由4個文件構成: page.jason 頁面配置 page.wxml 頁面結 ...
小程式的線程架構
每個小程式包含一個描述整體程式的app實例和多個描述頁面的page。
其中app由3個文件構成:
app.json 公共配置文件
app.wxss 公共樣式文件
app.js 主體邏輯文件
page頁面最多由4個文件構成:
page.jason 頁面配置
page.wxml 頁面結構
page.wxss 頁面樣式
page.js 頁面主體邏輯
app.js和page.js中包含小程式在生命周期的每個階段相應的事件。
典型的app.js代碼結構如下:
App({ onLaunch:function(){ //小程式啟動時執行的初始化工作 }, onShow:function(){ //程式啟動或從後臺進入前臺時,觸發執行的操作 }, onHide:function(){ //程式從前臺進入後臺時,觸發執行的操作 }, globalConf:{ indexDate:'', matchData:'' }, dataCache:{}, globalData:'' })
典型的page.js代碼結構如下:
Page({ Data:{ } onLoad:function(){ //頁面載入時,執行的初始化工作 }, onReady:function(){ //頁面就緒後,觸發執行的操作 }, onShow:function(){ //頁面打開時,觸發執行的操作 }, onHide:function(){ //頁面隱藏時,觸發執行的操作 }, onUnload:function(){ //頁面關閉時,觸發執行的操作 }, //Events handler viewTap:function(){ this.setData({ text:'set some data for updating view.' }) } })
一個完整的小程式執行的過程或生命周期如下:
app.onLaunch-->app.onShow-->page1.onLoad-->page1.onShow-->page1.onReady (打開程式,第一個頁面page1載入完成) -->page1.onHide-->page2.onLoad-->page2.onShow-->page2.onReady (從第1個頁面打開第2個頁面) -->page2.onUnload-->page1.onShow-->...-->app.onUnload (關閉page2,返回page1...退出小程式)
一個page的生命周期開始於onLoad事件,在整個生命周期內onLoad、onReady、onUnload這三個事件各執行一次,onHide和onShow事件在每次頁面隱藏和顯示時都會觸發。
當用戶手動觸發小程式的退出箭頭時,小程式僅觸發app.Hide,下次進入小程式時會觸發app.onShow以及當前頁的page.onShow。僅當小程式在後臺運行超過一定時間未被喚起、或者用戶手動在小程式的控制欄里點擊退出程式、或者小程式記憶體占用過大被系統關閉時,小程式將被銷毀,會觸發app.onUnload事件。
每個小程式分為2個線程,view與appServer。
view 線程 | appServer線程 |
.wxml + wxss
ios:safari Android:X5瀏覽器 開發工具:chrome |
.js
ios:JavaScriptCore Android:X5內核 開發工具:nwjs |
view線程負責解析渲染頁面(wxml和wxss文件)。
appServer線程負責運行js。appServer線程運行在jsCore(安卓下運行在X5中,開發工具運行在nwjs中)。由於js不跑在WebView里,就不能直接操縱DOM和BOM,這就是小程式沒有window全局變數的原因。