微信小程序頁面路由,微信小程序頁面棧路由方式

2017-12-22

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

頁面路由

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

框架以棧的形式維護(hù)了當(dāng)前的所有頁面。當(dāng)發(fā)生路由切換的時候，頁面棧的表現(xiàn)如下：

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

Tip：不要嘗試修改頁面棧，會導(dǎo)致路由以及頁面狀態(tài)錯誤。

對于路由的觸發(fā)方式以及頁面生命周期函數(shù)如下：

路由方式	觸發(fā)時機(jī)	路由前頁面	路由后頁面
初始化	小程序打開的第一個頁面		onLoad, onSHow
打開新頁面	調(diào)用 API `wx.navigateTo` 或使用組件 `<navigator open-type="navigateTo"/>`	onHide	onLoad, onShow
頁面重定向	調(diào)用 API `wx.redirectTo` 或使用組件 `<navigator open-type="redirectTo"/>`	onUnload	onLoad, onShow
頁面返回	調(diào)用 API `wx.navigateBack` 或使用組件`<navigator open-type="navigateBack">`或用戶按左上角返回按鈕	onUnload	onShow
Tab 切換	調(diào)用 API `wx.switchTab` 或使用組件 `<navigator open-type="switchTab"/>` 或用戶切換 Tab		各種情況請參考下表
重啟動	調(diào)用 API `wx.reLaunch` 或使用組件 `<navigator open-type="reLaunch"/>`	onUnload	onLoad, onShow

Tab 切換對應(yīng)的生命周期（以 A、B 頁面為 Tabbar 頁面，C 是從 A 頁面打開的頁面，D 頁面是從 C 頁面打開的頁面為例）：

當(dāng)前頁面	路由后頁面	觸發(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：

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

第二部分：如何開通一個小商店