參讀過(guò)小程序文檔的同學(xué)應(yīng)該會(huì)發(fā)現(xiàn)小程序的設(shè)計(jì)和VUE有諸多相似之處顶岸,比如小程序的數(shù)據(jù)綁定方式、渲染方式和生命周期有諸多相似之處。然而相似歸相似席赂,由于小程序的應(yīng)用場(chǎng)景繁多且情況不單一,導(dǎo)致小程序的生命周期比VUE的生命周期情況更為復(fù)雜时迫。所以我們這篇文章就談下我們小程序的生命周期颅停。
我們知道小程序的頁(yè)面分為兩種 : tab頁(yè)面 和 非tab頁(yè)面 。這里這兩種頁(yè)面的情況較為獨(dú)立掠拳,沒(méi)有太大的穿插性癞揉,所以我們可以分開(kāi)記憶,這點(diǎn)對(duì)我們來(lái)說(shuō)是非常棒的溺欧。否則錯(cuò)綜復(fù)雜喊熟,云里霧里。好了胧奔,我們下面就開(kāi)始進(jìn)入正題逊移,本文的理解都基于官方文檔的介紹,如有錯(cuò)誤龙填,請(qǐng)大佬糾正在下胳泉,感激不盡拐叉。
情況一,非tab頁(yè)面
在非tab頁(yè)面中,有幾種跳轉(zhuǎn)情況扇商,這里請(qǐng)看下面官方的截圖
我們從官方文檔介紹這里開(kāi)始分析一波凤瘦。
當(dāng)首次進(jìn)入小程序的時(shí)候,會(huì)走'兩套流程'.第一個(gè)流程就是我們的入口 app.js,第二個(gè)就是我們的首頁(yè)的生命周期(onload,onshow....)案铺。
我們頁(yè)面路由的變動(dòng)方式有五種
方式一
wx.navigateTo : 當(dāng)頁(yè)面使用小程序api的wx.navigateTo跳轉(zhuǎn)到其他頁(yè)面的時(shí)候(A to B)蔬芥,A會(huì)執(zhí)行鉤子函數(shù)onHide,然后B頁(yè)面開(kāi)始執(zhí)行加載(onLoad)和顯示(onShow)。注意:A只是hide了控汉,并沒(méi)有被卸載(onUnload)笔诵,所以你會(huì)發(fā)現(xiàn),跳轉(zhuǎn)到B頁(yè)面后姑子,左上角還有一個(gè)物理返回鍵在那乎婿,就像下面
這里又有一點(diǎn)劇透請(qǐng)注意了: 物理返回鍵其實(shí)就是調(diào)用了我們的路由Api中的wx.navigateBack。執(zhí)行這個(gè)api街佑,當(dāng)前打開(kāi)中的頁(yè)面會(huì)被卸載谢翎,原來(lái)的頁(yè)面會(huì)被show,但是不會(huì)再去執(zhí)行onLoad了!!!
wx.navigateBack其實(shí)就是從頁(yè)面棧中去找你要的目標(biāo)頁(yè)面,當(dāng)找到后沐旨,原來(lái)已經(jīng)打開(kāi)的頁(yè)面都會(huì)被退出(頁(yè)面出棧)森逮,直到返回到目標(biāo)頁(yè)面為止,單后只會(huì)執(zhí)行目標(biāo)頁(yè)面的onShow磁携。其實(shí)說(shuō)到這里褒侧,有一個(gè)結(jié)論:只要在頁(yè)面是棧中的,并且你執(zhí)行的是'返回頁(yè)面(wx.navigateBack)'的方式回到目標(biāo)頁(yè)面谊迄,就只會(huì)讓目標(biāo)頁(yè)面執(zhí)行onShow璃搜。因?yàn)樗欠祷卦瓉?lái)的歷史記錄去找,而不是新壓一個(gè)頁(yè)面入棧鳞上。
方式二
wx.redirectTo : 這個(gè)方式叫頁(yè)面重定向,他其實(shí)就類似于我們url的replace方法吊档,將原來(lái)的頁(yè)面出棧(onUnload)篙议,替換成我們的目標(biāo)頁(yè)面。不要誤會(huì)了怠硼,這個(gè)替換其實(shí)也就是將新頁(yè)面壓入頁(yè)面棧中鬼贱。因此新頁(yè)面會(huì)去執(zhí)行onLoad以及onShow。這個(gè)方法比較好理解香璃,我們不多做贅述这难。
方式三
wx.navigateBack : 在頁(yè)面棧中去找目標(biāo)頁(yè)面,在找到后葡秒,就讓頁(yè)面棧里的頁(yè)面不斷出棧姻乓,直到返回到目標(biāo)頁(yè)面為止嵌溢。目標(biāo)頁(yè)面執(zhí)行onShow。
情況四
wx.reLaunch: 頁(yè)面全部出棧蹋岩,只留下新頁(yè)面(簡(jiǎn)單粗暴)赖草。
----------------------------------------------以上都是非tab頁(yè)面的路由更替情況
這里開(kāi)始,開(kāi)始討論和tab頁(yè)面路由更替有關(guān)的情況剪个,上面的情況都是非tab頁(yè)面的秧骑,有tab頁(yè)面參與的我們需要單獨(dú)去記憶,因?yàn)檫@樣好記扣囊。
請(qǐng)看下面的圖(沒(méi)錯(cuò)乎折,我就是官網(wǎng)的搬運(yùn)工)
上面圖中的紅色文字是根據(jù)官網(wǎng)的介紹進(jìn)行翻譯的,這里我做幾點(diǎn)解釋
相扣順序 : A頁(yè)面打開(kāi)了B頁(yè)面 侵歇,我管這種頁(yè)面關(guān)系叫相扣順序的兩個(gè)頁(yè)面
A框和B框表示 tab頁(yè)面A和tab頁(yè)面B骂澄,沒(méi)有框的C和D就表示非tab頁(yè)面C和非tab頁(yè)面D
----------------------------------以上為全文內(nèi)容,如有錯(cuò)誤請(qǐng)指正盒至,如果覺(jué)得還行請(qǐng)來(lái)個(gè)贊酗洒,謝謝哈