微信小程序 頁面路由

2022-05-11 15:23 更新

頁面路由

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

頁面棧

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

路由方式 頁面棧表現(xiàn)
初始化 新頁面入棧
打開新頁面 新頁面入棧
頁面重定向 當(dāng)前頁面出棧,新頁面入棧
頁面返回 頁面不斷出棧,直到目標(biāo)返回頁
Tab 切換 頁面全部出棧,只留下新的 Tab 頁面
重加載 頁面全部出棧,只留下新的頁面

開發(fā)者可以使用 getCurrentPages() 函數(shù)獲取當(dāng)前頁面棧。

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

頁面棧示例:頁面棧遵循先進(jìn)后出的規(guī)則,當(dāng)前也在最上面。

路由方式

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

路由方式 觸發(fā)時(shí)機(jī) 路由前頁面 路由后頁面
初始化 小程序打開的第一個(gè)頁面 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
各種情況請參考下表
重啟動(dòng) 調(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:

  • navigateToredirectTo 只能打開非 tabBar 頁面。
  • switchTab 只能打開tabBar 頁面。
  • reLaunch 可以打開任意頁面。
  • 頁面底部的 tabBar 由頁面決定,即只要是定義為 tabBar 的頁面,底部都有 tabBar。
  • 調(diào)用頁面路由帶的參數(shù)可以在目標(biāo)頁面的onLoad中獲取。


以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號