微信小程序的線程架構(gòu)【推薦】
小程序的線程架構(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)注明出處,謝謝!
相關(guān)文章
前端算法題解leetcode114二叉樹(shù)展開(kāi)為鏈表
這篇文章主要為大家介紹了前端算法題解leetcode114二叉樹(shù)展開(kāi)為鏈表,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09微信小程序一周時(shí)間表功能實(shí)現(xiàn)
這篇文章主要介紹了微信小程序一周時(shí)間表功能實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-10-10JS實(shí)現(xiàn)上傳圖片實(shí)時(shí)預(yù)覽功能
這篇文章主要介紹了JS實(shí)現(xiàn)上傳圖片實(shí)時(shí)預(yù)覽功能,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-05-05JavaScript設(shè)計(jì)模式之代理模式詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript設(shè)計(jì)模式之代理模式,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06解決uniapp上傳小程序體積過(guò)大的問(wèn)題
在昨天的工作中遇到了一個(gè)微信小程序上傳代碼過(guò)大的情況,在這里總結(jié)一下具體的解決步驟,首先介紹一下,技術(shù)棧是使用uniapp框架+HBuilderX的開(kāi)發(fā)環(huán)境,需要的朋友可以參考下2023-09-09微信小程序?qū)崿F(xiàn)商品數(shù)據(jù)聯(lián)動(dòng)效果
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)商品數(shù)據(jù)聯(lián)動(dòng)效果,代碼很簡(jiǎn)單,直接復(fù)制即可根據(jù)自己的需求去修改,對(duì)小程序商品數(shù)據(jù)聯(lián)動(dòng)實(shí)例代碼感興趣的朋友一起看看吧2022-08-08關(guān)于微信中a鏈接無(wú)法跳轉(zhuǎn)問(wèn)題
微信頁(yè)面開(kāi)發(fā)時(shí),各個(gè)主頁(yè)之間的跳轉(zhuǎn),完全是通過(guò)a鏈接進(jìn)行的,但是來(lái)回跳轉(zhuǎn)幾次,再次從其他主頁(yè)面跳回首頁(yè)的時(shí)候,微信頭部出現(xiàn)了跳轉(zhuǎn)加載進(jìn)度條,但是就是不跳轉(zhuǎn),也沒(méi)有任何反應(yīng),怎么回事呢?下面小編給大家解答下2016-08-08