小程序框架頁面棧設(shè)計案例解析

剛開始用小程序的時候沒怎么在意頁面的跳轉(zhuǎn)，也沒仔細看文檔中說的頁面棧的內(nèi)容。只要能跳轉(zhuǎn)就行，wx.navigateTo,wx.redirectTo 這些方法一頓亂用。最后在做一個5層頁面的時候跳懵了。各種重復(fù)跳頁，怎么改都不好使，于是安心下來仔細看看API，發(fā)現(xiàn)這個路由還是有學(xué)問的。因此分享一下，希望對做小程序的網(wǎng)友也有一定的幫助。

頁面棧

首先我們要理解在小程序中頁面的路由是小程序框架本身控制的我們不要去手動管理， 小程序框架通過一個頁面棧的設(shè)計來管理所有的界面，為了便于理解你可以看一下示意圖。

?

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

下面我們分析一下頁面棧的變化過程，從分析中，我們需要明白的一個重要問題就是，當(dāng)客戶按返回按鈕的時候究竟會跳轉(zhuǎn)到那個界面，這是我們分析頁面棧變化的的意義。

首先我們在頁面中調(diào)用兩次navigateTO，頁面棧情況如下

?

這時顯示的界面是pageC ，如果客戶在此時返回則會一切正常，回退的第一個界面是pageB，然后是pageA。但是如果在pageC 界面調(diào)用 wx.redirectTo({url:'pageD'}) 則情況就會不一樣看，我們先看一下跳轉(zhuǎn)到pageD后頁面棧的情況如何。

?

根據(jù)棧的情況，我們可以分析出。如果使用 wx.redirectTo跳轉(zhuǎn)到pageD頁面，然后在回退的時候是不能再次回退到pageC的，而會直接回退到pageB。

通過上面對頁面棧的分析，我們可以看到棧的變化是會影響客戶回退頁面的順序的，所以根據(jù)自己的需要合理的使用不同的跳轉(zhuǎn)方法是非常重要的。如果使用不當(dāng)就會導(dǎo)致跳轉(zhuǎn)混亂讓人摸不清頭腦

下面分析一種調(diào)轉(zhuǎn)重復(fù)頁面的情況

如果我們的pageB頁面是一個數(shù)據(jù)列表頁面，比如商品列表，pageC是一個商品的編輯界面，一般我們會通過pageB然后進如pageC對商品進行修改，修改后返回pageB。這是很常見的一個場景，但是如果使用不當(dāng)機會出現(xiàn)如下情況

?

如圖所示棧中出現(xiàn)了兩個相同的pageB界面，這個時候如果用戶按退出鍵就會出現(xiàn)一個頁面出現(xiàn)2次的情況，而且有一個界面的數(shù)據(jù)也是舊的數(shù)據(jù)。因此為了避免這個問題，我們應(yīng)該在 PageC 頁面避免將 PageB重復(fù)壓入棧中，所以在pageC頁面 使用wx.navigateBack({delta:1}); 進行頁面回退。而數(shù)據(jù)刷新的問題則在頁面的onShow函數(shù)中進行即可。

路由方法與頁面棧變化對應(yīng)關(guān)系

特別注意:

navigateTo,redirectTo只能打開非 tabBar 頁面。

switchTab只能打開 tabBar 頁面。

reLaunch可以打開任意頁面。

頁面底部的 tabBar 由頁面決定，即只要是定義為 tabBar 的頁面，底部都有 tabBar。

調(diào)用頁面路由帶的參數(shù)可以在目標(biāo)頁面的onLoad中獲取。
編輯：hfy