這篇文章主要介紹了微信小程序中線程架構(gòu)的示例分析,具有一定借鑒價(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è)面打開時(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 (打開程序,第一個(gè)頁(yè)面page1加載完成) -->page1.onHide-->page2.onLoad-->page2.onShow-->page2.onReady (從第1個(gè)頁(yè)面打開第2個(gè)頁(yè)面) -->page2.onUnload-->page1.onShow-->...-->app.onUnload (關(guān)閉page2,返回page1...退出小程序)
一個(gè)page的生命周期開始于onLoad事件,在整個(gè)生命周期內(nèi)onLoad、onReady、onUnload這三個(gè)事件各執(zhí)行一次,onHide和onShow事件在每次頁(yè)面隱藏和顯示時(shí)都會(huì)觸發(fā)。
當(dāng)用戶手動(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í)間未被喚起、或者用戶手動(dòng)在小程序的控制欄里點(diǎn)擊退出程序、或者小程序內(nèi)存占用過(guò)大被系統(tǒng)關(guān)閉時(shí),小程序?qū)⒈讳N毀,會(huì)觸發(fā)app.onUnload事件。
每個(gè)小程序分為2個(gè)線程,view與appServer。
view 線程 | appServer線程 |
.wxml + wxss ios:safari Android:X5瀏覽器 開發(fā)工具:chrome | .js ios:JavaScriptCore Android:X5內(nèi)核 開發(fā)工具:nwjs |
view線程負(fù)責(zé)解析渲染頁(yè)面(wxml和wxss文件)。
appServer線程負(fù)責(zé)運(yùn)行js。appServer線程運(yùn)行在jsCore(安卓下運(yùn)行在X5中,開發(fā)工具運(yùn)行在nwjs中)。由于js不跑在WebView里,就不能直接操縱DOM和BOM,這就是小程序沒(méi)有window全局變量的原因。
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“微信小程序中線程架構(gòu)的示例分析”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司,關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無(wú)理由+7*72小時(shí)售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、網(wǎng)站設(shè)計(jì)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì),專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
新聞標(biāo)題:微信小程序中線程架構(gòu)的示例分析-創(chuàng)新互聯(lián)
瀏覽地址:http://chinadenli.net/article20/dgpjco.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供企業(yè)建站、網(wǎng)站維護(hù)、軟件開發(fā)、外貿(mào)建站、網(wǎng)頁(yè)設(shè)計(jì)公司、App開發(fā)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容