溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關微信小程序頁面路由的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
在小程序中所有頁面的路由全部由框架進行管理。
框架以棧的形式維護了當前的所有頁面。當發生路由切換的時候，頁面棧的表現如下：
| 路由方式 | 頁面棧表現 |
|---|---|
| 初始化 | 新頁面入棧 |
| 打開新頁面 | 新頁面入棧 |
| 頁面重定向 | 當前頁面出棧，新頁面入棧 |
| 頁面返回 | 頁面不斷出棧，直到目標返回頁，新頁面入棧 |
| Tab 切換 | 頁面全部出棧，只留下新的 Tab 頁面 |
| 重加載 | 頁面全部出棧，只留下新的頁面 |
getCurrentPages()函數用于獲取當前頁面棧的實例，以數組形式按棧的順序給出，第一個元素為首頁，最后一個元素為當前頁面。
Tip：不要嘗試修改頁面棧，會導致路由以及頁面狀態錯誤。
對于路由的觸發方式以及頁面生命周期函數如下：
| 路由方式 | 觸發時機 | 路由前頁面 | 路由后頁面 |
|---|---|---|---|
| 初始化 | 小程序打開的第一個頁面 | 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中獲取。
關于“微信小程序頁面路由的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
