微信小程序頁面路由

原文地址:頁面路由

說明

在小程序中所有頁面的路由全部由框架進行管理,當路由發生時,會通過頁面生命週期方法通知到頁面。

在框架管理路由時,一個重要概念爲頁面棧。

框架以棧的形式維護了當前的所有頁面。當發生路由切換的時候,頁面棧的表現如下:

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

通過getCurrentPages() 函數可以獲取當前頁面棧的實例,其以數組形式按棧的順序給出,第一個元素爲首頁,最後一個元素爲當前頁面(注意:不要嘗試修改頁面棧,會導致路由以及頁面狀態錯誤)。

路由的觸發方式以及頁面生命週期函數如下:

路由方式 觸發時機 路由前頁面 路由後頁面
初始化 小程序打開的第一個頁面 onLoad, onShow
打開新頁面 調用 API wx.navigateTo 或使用組件 onHide onLoad, onShow
頁面重定向 調用 API wx.redirectTo 或使用組件 onUnload onLoad, onShow
頁面返回 調用 API wx.navigateBack 或使用組件或用戶按左上角返回按鈕 onUnload onShow
Tab 切換 調用 API wx.switchTab 或使用組件 或用戶切換 Tab 各種情況請參考下表
重啓動 調用 API wx.reLaunch 或使用組件 onUnload onLoad, onShow

Tab 切換對應的生命週期(以 A、B 頁面爲 Tabbar 頁面,C 是從 A 頁面打開的頁面,D 頁面是從 C 頁面打開的頁面爲例):

當前頁面 路由後頁面 觸發的生命週期(按順序)
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(從轉發進入) A D.onUnload(), A.onLoad(), A.onShow()
D(從轉發進入) B D.onUnload(), B.onLoad(), B.onShow()

Tips:

  • navigateTo, redirectTo 只能打開非 tabBar 頁面。
  • switchTab 只能打開 tabBar 頁面。
  • reLaunch 可以打開任意頁面。
  • 頁面底部的 tabBar 由頁面決定,即只要是定義爲 tabBar 的頁面,底部都有 tabBar。
  • 調用頁面路由帶的參數可以在目標頁面的onLoad中獲取。
發佈了22 篇原創文章 · 獲贊 9 · 訪問量 5萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章