溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

微信小程序中線程架構(gòu)的示例分析

發(fā)布時(shí)間:2021-08-18 15:24:21 來源:億速云 閱讀:143 作者:小新 欄目:web開發(fā)

這篇文章主要介紹了微信小程序中線程架構(gòu)的示例分析,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。

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

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

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

app.json 公共配置文件

app.wxss 公共樣式文件

app.js 主體邏輯文件

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

page.jason 頁面配置

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

page.wxss 頁面樣式

page.js 頁面主體邏輯

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(){
  //頁面加載時(shí),執(zhí)行的初始化工作
 },
 onReady:function(){
  //頁面就緒后,觸發(fā)執(zhí)行的操作
 },
 onShow:function(){
  //頁面打開時(shí),觸發(fā)執(zhí)行的操作
 },
 onHide:function(){
  //頁面隱藏時(shí),觸發(fā)執(zhí)行的操作
 },
 onUnload:function(){
  //頁面關(guān)閉時(shí),觸發(fā)執(zhí)行的操作
 },
 //Events handler
  viewTap:function(){
   this.setData({
    text:'set some data for updating view.'
   })
}
})

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

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

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

當(dāng)用戶手動(dòng)觸發(fā)小程序的退出箭頭時(shí),小程序僅觸發(fā)app.Hide,下次進(jìn)入小程序時(shí)會(huì)觸發(fā)app.onShow以及當(dāng)前頁的page.onShow。僅當(dāng)小程序在后臺(tái)運(yùn)行超過一定時(shí)間未被喚起、或者用戶手動(dòng)在小程序的控制欄里點(diǎn)擊退出程序、或者小程序內(nèi)存占用過大被系統(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é)解析渲染頁面(wxml和wxss文件)。

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

感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“微信小程序中線程架構(gòu)的示例分析”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來學(xué)習(xí)!

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI