小程序頁面棧控制

    剛開始用小程序的時候沒怎麼在乎頁面的跳轉，也沒仔細看文檔中說的頁面棧的內容。只要能跳轉就行，wx.navigateTo,wx.redirectTo 這些方法一頓亂用。最後在作一個5層頁面的時候跳懵了。各類重複跳頁，怎麼改都很差使，因而安心下來仔細看看API，發現這個路由仍是有學問的。所以分享一下，但願對作小程序的網友也有必定的幫助。

 

頁面棧 

---

  首先咱們要理解在小程序中頁面的路由是小程序框架自己控制的咱們不要去手動管理， 小程序框架經過一個頁面棧的設計來管理全部的界面，爲了便於理解你能夠看一下示意圖。 

​

   如圖所示小程序的頁面棧最大能存放5個頁面，當頁面棧中的頁面等於5時，在使用navigateTo這種方式是不能再跳頁的。

下面咱們分析一下頁面棧的變化過程，從分析中，咱們須要明白的一個重要問題就是，當客戶按返回按鈕的時候究竟會跳轉到那個界面，這是咱們分析頁面棧變化的的意義。

首先咱們在頁面中調用兩次navigateTO，頁面棧狀況以下

​

 這時顯示的界面是pageC ，若是客戶在此時返回則會一切正常，回退的第一個界面是pageB，而後是pageA。可是若是在pageC 界面調用  wx.redirectTo({url:'pageD'}) 則狀況就會不同看，咱們先看一下跳轉到pageD後頁面棧的狀況如何。

​

根據棧的狀況，咱們能夠分析出。若是使用 wx.redirectTo跳轉到pageD頁面，而後在回退的時候是不能再次回退到pageC的，而會直接回退到pageB。

經過上面對頁面棧的分析，咱們能夠看到棧的變化是會影響客戶回退頁面的順序的，因此根據本身的須要合理的使用不一樣的跳轉方法是很是重要的。若是使用不當就會致使跳轉混亂讓人摸不清頭腦

下面分析一種調轉重複頁面的狀況

若是咱們的pageB頁面是一個數據列表頁面，好比商品列表，pageC是一個商品的編輯界面，通常咱們會經過pageB而後進如pageC對商品進行修改，修改後返回pageB。這是很常見的一個場景，可是若是使用不當機會出現以下狀況

​

 如圖所示棧中出現了兩個相同的pageB界面，這個時候若是用戶按退出鍵就會出現一個頁面出現2次的狀況，並且有一個界面的數據也是舊的數據。所以爲了不這個問題，咱們應該在 PageC 頁面避免將 PageB重複壓入棧中，因此在pageC頁面 使用wx.navigateBack({delta:1}); 進行頁面回退。而數據刷新的問題則在頁面的onShow函數中進行便可。

 

路由方法與頁面棧變化對應關係

---

路由方式	頁面棧表現	觸發時機
初始化	新頁面入棧	小程序打開的第一個頁面
打開新頁面	新頁面入棧	調用 API wx.navigateTo 或使用組件 <navigator open-type="navigateTo"/>
頁面重定向	當前頁面出棧，新頁面入棧	調用 API wx.redirectTo 或使用組件 <navigator open-type="redirectTo"/>
頁面返回	頁面不斷出棧，直到目標返回頁	調用 API wx.navigateBack 或使用組件<navigator open-type="navigateBack">或用戶按左上角返回按鈕
Tab 切換	頁面所有出棧，只留下新的 Tab 頁面	調用 API wx.switchTab 或使用組件 <navigator open-type="switchTab"/> 或用戶切換 Tab
重加載	頁面所有出棧，只留下新的頁面	調用 API wx.reLaunch 或使用組件 <navigator open-type="reLaunch"/>

小程序官方路由說明  https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/route.html

 

特別注意 :

• navigateTo, redirectTo 只能打開非 tabBar 頁面。
• switchTab 只能打開 tabBar 頁面。
• reLaunch 能夠打開任意頁面。
• 頁面底部的 tabBar 由頁面決定，即只要是定義爲 tabBar 的頁面，底部都有 tabBar。
• 調用頁面路由帶的參數能夠在目標頁面的onLoad中獲取。