1. 程式人生 > >微信小程序跳轉分析

微信小程序跳轉分析

tab 切換 ID 頁面重定向 定義 PE 按順序 avi direct 一個

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

路由方式觸發時機路由前頁面路由後頁面
初始化 小程序打開的第一個頁面 onLoad, onShow
打開新頁面 調用 API wx.navigateTo 或使用組件 <navigator open-type="navigateTo"/> onHide onLoad, onShow
頁面重定向 調用 API wx.redirectTo 或使用組件 <navigator open-type="redirectTo"/> onUnload onLoad, onShow
頁面返回 調用 API wx.navigateBack 或使用組件<navigator open-type="navigateBack">或用戶按左上角返回按鈕 onUnload onShow
Tab 切換 調用 API wx.switchTab 或使用組件 <navigator open-type="switchTab"/> 或用戶切換 Tab 各種情況請參考下表
重啟動 調用 API wx.reLaunch 或使用組件 <navigator open-type="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中獲取。

微信小程序跳轉分析