微信小程序頁(yè)面路由,微信小程序頁(yè)面棧路由方式

2017-12-22

導(dǎo)讀：頁(yè)面路由在小程序中所有頁(yè)面的路由全部由框架進(jìn)行管理。頁(yè)面棧框架以棧的形式維護(hù)了當(dāng)前的所有頁(yè)面。當(dāng)發(fā)生路由切換的時(shí)候，頁(yè)面棧的表現(xiàn)如下：路由方式頁(yè)面棧表現(xiàn) 初始化...

頁(yè)面路由

在小程序中所有頁(yè)面的路由全部由框架進(jìn)行管理。

頁(yè)面棧

框架以棧的形式維護(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()

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中獲取。

更多微信小程序開發(fā)教程，可以關(guān)注hi小程序。

第二部分：如何開通一個(gè)小商店