微信小程式學習之路——頁面跳轉
阿新 • • 發佈：2018-12-22
前言
本以為微信小程式的頁面跳轉只是幾個簡單的api，一開始就沒太留意，在實際工作中發現，微信小程式的頁面跳轉也有很多地方應該注意，其中之一就是因為頁面跳轉而觸發的生命週期函式，這個點我認為是很重要的一個點，因此，本篇就把這兩個點放在一起記錄起來，方便日後翻閱。
生命週期
小程式生命週期
首先是小程式的生命週期，顧名思義就是一整個小程式從載入到退出的一個完整週期，全域性的生命週期鉤子如下圖：
| 名稱 | 描述 | 觸發時機 |
|---|---|---|
| onLaunch | 生命週期回撥監聽小程式初始化 | 小程式初始化時觸發（全域性只觸發一次） |
| onShow | 生命週期回撥監聽小程式顯示 | 小程式啟動，或從後臺進入前臺顯示時觸發 |
| onHide | 生命週期回撥監聽小程式隱藏 | 小程式進入後臺時觸發 |
小程式全域性的生命週期函式就這三個，onLaunch全域性只觸發一次的意思是，在小程式初始化完成後，只要小程式沒有被銷燬重新載入，都只觸發一次，而onShow和onHide則是隻要小程式被顯示以及隱藏就會促發，即手機將小程式切到後臺就觸發onHide，切換回前臺就觸發onShow。當用戶點選左上角關閉，或者按了裝置 Home 鍵離開微信，小程式並沒有直接銷燬，而是進入了後臺；當再次進入微信或再次開啟小程式，又會從後臺進入前臺。需要注意的是：只有當小程式進入後臺一定時間，或者系統資源佔用過高，才會被真正的銷燬。
頁面生命週期
頁面生命週期函式如下表：
| 名稱 | 描述 | 觸發時機 |
|---|---|---|
| onLoad | 生命回撥函式監聽頁面的載入 | 小程式註冊完成後，當頁面載入時觸發 |
| onready | 生命回撥函式監聽頁面的資源載入完畢首次顯示 | 當頁面首次顯示時觸發 |
| onShow | 生命回撥函式監聽頁面的顯示 | 當頁面顯示時觸發 |
| onHide | 生命回撥函式監聽頁面的隱藏 | 當頁面隱藏時觸發 |
| onUnload | 生命回撥函式監聽頁面的解除安裝 | 當頁面解除安裝時觸發 |
頁面的生命週期函式就相比全域性的要複雜一些，主要是這幾個生命週期函式觸發的時機要分清楚。官方的描述圖如下：
官方給出的圖片很清晰地描述了，頁面的生命週期函式在哪個階段會觸發,但其實要真正理解頁面的生命週期最好還是結合頁面的跳轉函式來理解。
頁面跳轉
頁面跳轉api
首先是頁面跳轉的幾個api:
| 名稱 | 描述 |
|---|---|
| navigateTo | 保留當前頁面，跳轉到應用內某個頁面，但不能跳轉tabbar頁面 |
| navigateBack | 關閉當前頁面，返回上一頁面或多級頁面。可通過 getCurrentPages() 獲取當前的頁面棧，決定需要返回幾層。 |
| redirectTo | 關閉當前頁面，跳轉到應用內的某個頁面，但不能跳轉到tabbar頁面 |
| reLaunch | 關閉所有頁面，開啟到應用內的某個頁面 |
| switchTab | 關跳轉到 tabBar 頁面，並關閉其他所有非 tabBar 頁面 |
這幾個頁面跳轉的api都會觸發頁面的生命週期發生改變從而觸發生命週期函式。頁面跳轉的api和生命週期觸發關係如下表：
| 路由方式 | 路由前頁面 | 路由後頁面 |
|---|---|---|
| navigateTo | onHide | onLoad、onshow、onReady |
| redirectTo | onUnload | onLoad、onshow、onReady |
| reLaunch | onUnload | onLoad、onshow、onReady |
| navigateBack | onUnload | onshow |
一些注意事項
- navigateTo, redirectTo 只能開啟非 tabBar 頁面。
- switchTab 只能開啟 tabBar 頁面。
- reLaunch 可以開啟任意頁面。
- 呼叫頁面路由帶的引數可以在目標頁面的onLoad中獲取。
- 頁面底部的 tabBar 由頁面決定，即只要是定義為 tabBar 的頁面，底部都有 tabBar。