微信小程式開發——以簡單易懂的瀏覽器頁面棧理解小程式的頁面路由
阿新 • • 發佈：2018-11-23
前言：
對於小程式的頁面路由，如果沒有一定開發經驗的話，理解起來還是會有些困難的。哪怕是有一定小程式開發經驗的開發者，能夠完全理解掌握的恐怕也不多。
這裡就以另外一種方式來詳細的介紹小程式的頁面棧及路由方式，相信看了本文你能更深入的瞭解小程式的頁面路由的。
模擬場景：
小程式的頁面路徑基本上都可以用PC端瀏覽器來模擬，如：
小程式頁面棧 |
類似於 | 瀏覽器頁面棧 |
小程式的初始化（新頁面入棧） |
——— | 開啟瀏覽器預設載入首頁 |
小程式開啟新頁面（新頁面入棧） |
——— | 瀏覽器在新標籤中訪問網址或者點選當前頁面連結新標籤頁開啟頁面 |
頁面返回（當前頁面出棧，新頁面入棧） |
——— | 瀏覽器返回上一頁 |
。。。。。。 |
如果說小程式的官方文件比較抽象，那麼轉換成瀏覽器來理解就應該容易的多了。
下面會結合官方相關文件，以瀏覽器為例進行詳細解析。
頁面路由：
小程式所有頁面的路由全部由框架進行管理。
頁面棧：
框架以棧的形式維護了當前的所有頁面。當發生路由切換的時候，頁面棧的表現如下：
| 路由方式 | 頁面棧表現 | pc端瀏覽器模擬 |
|---|---|---|
| 初始化（開啟小程式，進入首頁） |
新頁面入棧 | 開啟瀏覽器自動開啟預設首頁
|
| 開啟新頁面 | 新頁面入棧 | 1. 瀏覽器開啟新標籤頁訪問網址；
2. 他頁面中點選連結新視窗開啟頁面
|
| 頁面重定向 | 當前頁面出棧，新頁面入棧 | 1. 當前頁面點選連結在當前頁面開啟； 2. 當前頁面位址列輸入其他網址訪問； 3. 在當前頁面點選書籤欄中的書籤（設定在當前頁面開啟書籤） |
| 頁面返回 | 頁面不斷出棧，直到目標返回頁 |
點選瀏覽器的返回按鈕返回上一頁 |
| Tab 切換 | 頁面全部出棧，只留下新的 Tab 頁面 | 這個可能有點不好理解，不過還是可以用瀏覽器解釋的：
小程式的Tab頁可看做一個瀏覽器開啟的不同視窗，這些視窗相互之間不影響，從Tab頁開啟其他非Tab頁面可看做在瀏覽器一個視窗頁面中在當前頁面進入其他頁面，從這個角度來看，就容易理解的多了 |
| 重載入 | 頁面全部出棧，只留下新的頁面 | 這個就不太好舉例了，可以理解為重啟瀏覽器，只不過重啟後可以開啟指定頁面 |
如果還是有點看不懂，下邊將會在路由方式中進行詳細介紹：
對於路由的觸發方式以及頁面生命週期函式如下：
| 路由方式 | 觸發時機 | 路由前頁面 | 路由後頁面 |
|---|---|---|---|
| 初始化 | 小程式開啟的第一個頁面 | 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 |