學(xué)習(xí)微信小程序(5)——微信小程序的生命周期和運(yùn)行原理以及路由跳轉(zhuǎn)

一、生命周期和運(yùn)行原理

image.png

寫微信小程序,他的生命周期不能不知道,不知道小程序就會出現(xiàn)各種bug而無法解決。小助君公眾號帶你學(xué)習(xí)小程序的生命周期和運(yùn)行原理。

小程序由兩大線程組成:負(fù)責(zé)界面的線程(view thread)和服務(wù)線程(appservice thread),各司其職由互相配合

小程序的生命周期借鑒了Android的生命周期,如果你了解過Android的APP開發(fā),那么理解小程序的就會很簡單。

界面線程有四大狀態(tài):
1. 初始化狀態(tài):初始化界面線程所需要的工作,包括工作機(jī)制,基本和我們開發(fā)者沒有關(guān)系,等初始化完畢就向 “服務(wù)線程”發(fā)送初始化完畢信號,然后進(jìn)入等待傳回初始化數(shù)據(jù)狀態(tài)。

2.首次渲染狀態(tài):收到“服務(wù)線程”發(fā)來的初始化數(shù)據(jù)后(就是 json和js中的data數(shù)據(jù)),就開始渲染小程序界面,渲染完畢后,發(fā)送“首次渲染完畢信號”給服務(wù)線程,并將頁面展示給用戶。

3.持續(xù)渲染狀態(tài):此時界面線程繼續(xù)一直等待“服務(wù)線程”通過this.setdata()函數(shù)發(fā)送來的界面數(shù)據(jù),只要收到就重新局部渲染,也因此只要更新數(shù)據(jù)并發(fā)送信號,界面就自動更新。

4.結(jié)束狀態(tài):你懂得。

服務(wù)線程五大狀態(tài):
1 初始化狀態(tài):無需和其他模塊交流,跟小程序開發(fā)也沒多大關(guān)聯(lián),此階段就是啟動服務(wù)線程所需的基本功能,比如信號發(fā)送模塊。系統(tǒng)的初始化工作完畢,就調(diào)用自定義的onload和onshow,
然后等待界面線程的“界面線程初始化完成”信號。
onload是只會首次渲染的時候執(zhí)行一次,onshow是每次界面切換都會執(zhí)行,簡單理解,這就是唯一差別。

2 等待激活狀態(tài):接收到“界面線程初始化完成”信號后,將初始化數(shù)據(jù)發(fā)送給“界面線程”,等待界面線程完成初次渲染。

3.激活狀態(tài):收到界面線程發(fā)送來的“首次渲染完成”信號后,就進(jìn)入激活狀態(tài)既程序的正常運(yùn)行狀態(tài),并調(diào)用自定義的onReady()函數(shù)。
此狀態(tài)下就可以通過 this.setData 函數(shù)發(fā)送界面數(shù)據(jù)給界面線程進(jìn)行局部渲染,更新頁面。

4.后臺運(yùn)行狀態(tài):如果界面進(jìn)入后臺,服務(wù)線程就進(jìn)入后臺運(yùn)行狀態(tài),從目前的官方解讀來說,這個狀態(tài)挺奇怪的,和激活狀態(tài)是相同的,也可以通過setdata函數(shù)更新界面的。

二、路由跳轉(zhuǎn)

先說下getCurrentPages():

getCurrentPages() 函數(shù)用于獲取當(dāng)前頁面棧的實(shí)例,以數(shù)組形式按棧的順序給出,最后一個元素為當(dāng)前頁面。

這是打印的getCurrentPages()

Clipboard Image.png

包括了整個page對象;

微信小程序關(guān)于路由跳轉(zhuǎn)的給出5個API文檔傳送門 ,結(jié)合文檔一下示意圖更加理解深刻:

1、wx.navigateTo接口與頁面棧示意圖(不會將舊頁面出棧)

Clipboard Image.png

疑問:該圖為去年的,有五層限制。我自己試了一下getCurrentPages()最多會放10層?

Clipboard Image.png

當(dāng)棧滿了(10層)之后,再調(diào)用wx.navigateTo()跳轉(zhuǎn)任何頁面,都不會成功。

特別注意的是,調(diào)用兩次wx.navigateTo('頁面B');wx.navigateTo('頁面B');,那么棧里存在兩個頁面B(或者說兩個頁面B的實(shí)例),如下圖。

image.png
Clipboard Image.png

2、wx.redirectTo接口與頁面棧示意圖(會將舊頁面出棧,再將需要跳轉(zhuǎn)到的頁面入棧)

image.png

3、wx.navigateBack

這就是棧里的頁面一個一個出棧。當(dāng)最后一個頁面(首頁A)出棧后,也就退出了小程序。給wx.navigateBack添加了一個參數(shù)delta,用于決定需要返回幾層頁面;如果delta大于等于現(xiàn)有頁面數(shù)(也就是棧里的頁面數(shù)),則返回到首頁。

image.png

Clipboard Image.png

4、wx.switchTab(跳轉(zhuǎn)到 tabBar 頁面,并關(guān)閉其他所有非 tabBar 頁面);

5、****wx.reLaunch(關(guān)閉所有頁面,打開到應(yīng)用內(nèi)的某個頁面。)

這個就是將所有頁面棧中的頁面清空,添加當(dāng)前頁面;

應(yīng)用

1,比如我們在做項(xiàng)目的時候自定義了返回按鈕,其實(shí)我們直接操作getCurrentPages()

中返回的數(shù)組配合wx.navigateBack決定跳到哪個頁面;

2,刷新當(dāng)前頁:

(1)小程序不會像js中那樣有l(wèi)ocation.reload()這種dom操作;

(2)如果用this.onLoad();this.onShow();刷新,data中的數(shù)據(jù)不會得到有效的更新;還需要重新setdata一次;操作麻煩;

(3)我們還是直接操作getCurrentPages();取最后一個元素及為當(dāng)前元素,拿到route,和options。刷新動作就是去掉最后一個元素再重新根據(jù)拿到的數(shù)據(jù)跳轉(zhuǎn)當(dāng)前頁;

Clipboard Image.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容