快捷導(dǎo)航

微信小程序的線程架構(gòu)【推薦】

更新時(shí)間：2019年05月14日 09:11:40 作者：IDreamo

這篇文章主要介紹了微信小程序的線程架構(gòu)，每個(gè)小程序包含一個(gè)描述整體程序的app實(shí)例和多個(gè)描述頁(yè)面的page，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下

小程序的線程架構(gòu)

每個(gè)小程序包含一個(gè)描述整體程序的app實(shí)例和多個(gè)描述頁(yè)面的page。

其中app由3個(gè)文件構(gòu)成：

app.json 公共配置文件

app.wxss 公共樣式文件

app.js 主體邏輯文件

page頁(yè)面最多由4個(gè)文件構(gòu)成：

page.jason 頁(yè)面配置

page.wxml 頁(yè)面結(jié)構(gòu)

page.wxss 頁(yè)面樣式

page.js 頁(yè)面主體邏輯

app.js和page.js中包含小程序在生命周期的每個(gè)階段相應(yīng)的事件。

典型的app.js代碼結(jié)構(gòu)如下：

App({
 onLaunch:function(){
  //小程序啟動(dòng)時(shí)執(zhí)行的初始化工作
 },
 onShow:function(){
  //程序啟動(dòng)或從后臺(tái)進(jìn)入前臺(tái)時(shí)，觸發(fā)執(zhí)行的操作
 },
 onHide:function(){
  //程序從前臺(tái)進(jìn)入后臺(tái)時(shí)，觸發(fā)執(zhí)行的操作
 },
globalConf:{
 indexDate:'',
 matchData:''
},
dataCache:{},
globalData:''
})

典型的page.js代碼結(jié)構(gòu)如下：

Page({
 Data:{
}
 onLoad:function(){
  //頁(yè)面加載時(shí)，執(zhí)行的初始化工作
 },
 onReady:function(){
  //頁(yè)面就緒后，觸發(fā)執(zhí)行的操作
 },
 onShow:function(){
  //頁(yè)面打開(kāi)時(shí)，觸發(fā)執(zhí)行的操作
 },
 onHide:function(){
  //頁(yè)面隱藏時(shí)，觸發(fā)執(zhí)行的操作
 },
 onUnload:function(){
  //頁(yè)面關(guān)閉時(shí)，觸發(fā)執(zhí)行的操作
 },
 //Events handler
  viewTap:function(){
   this.setData({
    text:'set some data for updating view.'
   })
}
})

一個(gè)完整的小程序執(zhí)行的過(guò)程或生命周期如下：

app.onLaunch-->app.onShow-->page1.onLoad-->page1.onShow-->page1.onReady
(打開(kāi)程序，第一個(gè)頁(yè)面page1加載完成)
-->page1.onHide-->page2.onLoad-->page2.onShow-->page2.onReady 
(從第1個(gè)頁(yè)面打開(kāi)第2個(gè)頁(yè)面)
-->page2.onUnload-->page1.onShow-->...-->app.onUnload 
(關(guān)閉page2，返回page1...退出小程序)

一個(gè)page的生命周期開(kāi)始于onLoad事件，在整個(gè)生命周期內(nèi)onLoad、onReady、onUnload這三個(gè)事件各執(zhí)行一次，onHide和onShow事件在每次頁(yè)面隱藏和顯示時(shí)都會(huì)觸發(fā)。

當(dāng)用戶(hù)手動(dòng)觸發(fā)小程序的退出箭頭時(shí)，小程序僅觸發(fā)app.Hide，下次進(jìn)入小程序時(shí)會(huì)觸發(fā)app.onShow以及當(dāng)前頁(yè)的page.onShow。僅當(dāng)小程序在后臺(tái)運(yùn)行超過(guò)一定時(shí)間未被喚起、或者用戶(hù)手動(dòng)在小程序的控制欄里點(diǎn)擊退出程序、或者小程序內(nèi)存占用過(guò)大被系統(tǒng)關(guān)閉時(shí)，小程序?qū)⒈讳N(xiāo)毀，會(huì)觸發(fā)app.onUnload事件。

每個(gè)小程序分為2個(gè)線程，view與appServer。

view 線程

appServer線程

.wxml + wxss

ios:safari

Android:X5瀏覽器

開(kāi)發(fā)工具：chrome

.js

ios:JavaScriptCore

Android:X5內(nèi)核

開(kāi)發(fā)工具：nwjs

view線程負(fù)責(zé)解析渲染頁(yè)面（wxml和wxss文件）。

appServer線程負(fù)責(zé)運(yùn)行js。appServer線程運(yùn)行在jsCore（安卓下運(yùn)行在X5中，開(kāi)發(fā)工具運(yùn)行在nwjs中）。由于js不跑在WebView里，就不能直接操縱DOM和BOM，這就是小程序沒(méi)有window全局變量的原因。

總結(jié)

以上所述是小編給大家介紹的微信小程序的線程架構(gòu),希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

您可能感興趣的文章: