注冊(cè)

微信小程序頁(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è)小商店

第三部分:如何登錄小商店

第四部分:開店任務(wù)常見問題

第五部分:小商店可以賣什么

第六部分:HiShop小程序特色功能

第七部分:小程序直播

第八部分:小程序收貨/物流

第九部分:小程序怎么結(jié)算

第十部分:小程序客服

第十一部分:電商創(chuàng)業(yè)

第十二部分:小程序游戲開發(fā)