您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)微信小程序頁(yè)面路由的示例分析,小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
在小程序中所有頁(yè)面的路由全部由框架進(jìn)行管理。
框架以棧的形式維護(hù)了當(dāng)前的所有頁(yè)面。當(dāng)發(fā)生路由切換的時(shí)候,頁(yè)面棧的表現(xiàn)如下:
路由方式 | 頁(yè)面棧表現(xiàn) |
---|---|
初始化 | 新頁(yè)面入棧 |
打開新頁(yè)面 | 新頁(yè)面入棧 |
頁(yè)面重定向 | 當(dāng)前頁(yè)面出棧,新頁(yè)面入棧 |
頁(yè)面返回 | 頁(yè)面不斷出棧,直到目標(biāo)返回頁(yè),新頁(yè)面入棧 |
Tab 切換 | 頁(yè)面全部出棧,只留下新的 Tab 頁(yè)面 |
重加載 | 頁(yè)面全部出棧,只留下新的頁(yè)面 |
getCurrentPages()
函數(shù)用于獲取當(dāng)前頁(yè)面棧的實(shí)例,以數(shù)組形式按棧的順序給出,第一個(gè)元素為首頁(yè),最后一個(gè)元素為當(dāng)前頁(yè)面。
Tip:不要嘗試修改頁(yè)面棧,會(huì)導(dǎo)致路由以及頁(yè)面狀態(tài)錯(cuò)誤。
對(duì)于路由的觸發(fā)方式以及頁(yè)面生命周期函數(shù)如下:
路由方式 | 觸發(fā)時(shí)機(jī) | 路由前頁(yè)面 | 路由后頁(yè)面 |
---|---|---|---|
初始化 | 小程序打開的第一個(gè)頁(yè)面 | onLoad, onSHow | |
打開新頁(yè)面 |
調(diào)用 API wx.navigateTo 或使用組件 <navigator open-type="navigateTo"/> | onHide | onLoad, onShow |
頁(yè)面重定向 |
調(diào)用 API wx.redirectTo 或使用組件 <navigator open-type="redirectTo"/> | onUnload | onLoad, onShow |
頁(yè)面返回 |
調(diào)用 API wx.navigateBack 或使用組件<navigator open-type="navigateBack"> 或用戶按左上角返回按鈕 | onUnload | onShow |
Tab 切換 |
調(diào)用 API wx.switchTab 或使用組件 <navigator open-type="switchTab"/> 或用戶切換 Tab | 各種情況請(qǐng)參考下表 | |
重啟動(dòng) |
調(diào)用 API wx.reLaunch 或使用組件 <navigator open-type="reLaunch"/> | onUnload | onLoad, onShow |
Tab 切換對(duì)應(yīng)的生命周期(以 A、B 頁(yè)面為 Tabbar 頁(yè)面,C 是從 A 頁(yè)面打開的頁(yè)面,D 頁(yè)面是從 C 頁(yè)面打開的頁(yè)面為例):
當(dāng)前頁(yè)面 | 路由后頁(yè)面 | 觸發(fā)的生命周期(按順序) |
---|---|---|
A | A | Nothing happend |
A | B | A.onHide(), B.onLoad(), B.onShow() |
A | B(再次打開) | A.onHide(), B.onShow() |
C | A | C.onUnload(), A.onShow() |
C | B | C.onUnload(), B.onLoad(), B.onShow() |
D | B | D.onUnload(), C.onUnload(), B.onLoad(), B.onShow() |
D(從轉(zhuǎn)發(fā)進(jìn)入) | A | D.onUnload(), A.onLoad(), A.onShow() |
D(從轉(zhuǎn)發(fā)進(jìn)入) | B | D.onUnload(), B.onLoad(), B.onShow() |
Tips:
navigateTo
,redirectTo
只能打開非 tabBar 頁(yè)面。
switchTab
只能打開 tabBar 頁(yè)面。
reLaunch
可以打開任意頁(yè)面。
頁(yè)面底部的 tabBar 由頁(yè)面決定,即只要是定義為 tabBar 的頁(yè)面,底部都有 tabBar。
調(diào)用頁(yè)面路由帶的參數(shù)可以在目標(biāo)頁(yè)面的onLoad
中獲取。
關(guān)于“微信小程序頁(yè)面路由的示例分析”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,使各位可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),請(qǐng)把它分享出去讓更多的人看到。
免責(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)容。