微信小程序——頁面棧及路由跳轉

引言

近期在開發微信小程序,在此之前,我看過微信小程序官方的文檔,瞭解過小程序的開發模式,簡單寫過一些 Demo。然後,在寫代碼的過程中,遇到了頁面棧的關閉、打開問題,其實也是一個老朋友。很早之前,在開發混合 APP 的時候,我就遇到類似的問題。所以,這次詳細地認識一下頁面的跳轉方式。

首先,在小程序中,路由是由一個棧維護的,這個頁面棧的長度是有限的。也就是說,如果你在棧滿的情況下(小程序中頁面棧最多爲10),還使用 navigateTo 進行路由的跳轉,此時就會待機,因爲入不了棧了。所以,在平常開發中,我們需要注意路由的跳轉和頁面棧的情況。

官方文檔也描述在一些跳轉的時候,頁面棧會發生的變化:
在這裏插入圖片描述
那麼,接下來我們看看官方提供的4種路由跳轉 API 是怎樣命中上面的這些邏輯的。

PS:在閱讀的時候,大家需要分清非 Tab 頁面和 Tab 頁面,不要弄混了~

switchTab

switchTab 只能跳轉到 tab 頁面,並且它還會關閉其他非 tab 頁面。所以,swichTab 進行 tab 頁的跳轉就會命中 Tab 切換的邏輯,此時頁面全部出棧,新的 tab 頁入棧。

使用 switchTab 進行 Tab 頁之間的跳轉(即 Tab 頁跳 Tab 頁)完全沒有問題。但是如果此時我頁面棧中的情況是這樣的,棧底是一個 Tab 頁(A),棧頂爲一個非 Tab 頁,此時頁面的展示爲 這個非 Tab 頁,那麼現在調用 switchTab 在這個非 Tab 頁跳其他 Tab 頁(B),頁面棧會將頁面(Tab 和 非 Tab)全部出棧,新的 Tab 頁(B)入棧,與此同時對應的頁面的表現形式會先看到 Tab 頁(A),然後再到 Tab 頁(B)。

這個過程無疑,不是我們想要的,所以,非 Tab 頁在使用 switchTab 進行 Tab 頁跳轉其他 Tab 頁的時候,要注意之前是否存在 Tab 頁未關閉(即未出棧)。

reLaunch

reLaunch 可以跳轉到任何頁面(Tab 頁或非 Tab 頁),並且它會關閉其他所有頁面。它會命中重加載的邏輯,即頁面全部出棧,新的頁面(Tab 頁或非 Tab 頁)入棧。

所以,大家可以想到的是當你走投無路的時候,你就可以用 reLaunch 進行騷操作。但是,從性能的角度出發,reLaunch 如果不適合你的使用場景,還是少用。因爲,如果每一次路由的跳轉都是通過 reLaunch,那麼意味每一次打開一個頁面都是重新繪製的,這樣用戶體驗肯定不好。所以,reLauch 雖然可以解決所有路由跳轉問題,但是還是需要從使用場景出發正確地使用。

redirectTo

redirectTo 可以進行非 Tab 頁的跳轉,並且它會關閉此時的頁面。它會命中重定向的邏輯,即當前頁面出棧,新頁面(非 Tab 頁)入棧。

對於 rediectTo,需要注意的是如果你的新打開的頁面(非 Tab 頁)需要返回上一個打開問的頁面,你如果用了它,那就待機,因爲上一個頁面已經不在頁面棧中了,此時你返回的可能是上上個頁面。所以,對於需要返回上個頁面的路由跳轉,rediectTo 並不適合。

navigateTo

naviagteTo 可以進行非 Tab 頁的跳轉,它不會影響到任何其他頁面。它會命中打開新頁面的邏輯,即新頁面(非 Tab 頁)入棧。

對於 navigateTo,需要注意的是別一股腦地使用 navigateTo,由於它是新頁面入棧,很可能不知不覺頁面棧就被你搞滿了,此時你就死在這個頁面了。所以,對於一些不需要返回的路由跳轉,我們並不需要使用 navigateTo,反正,我們可以使用。

navigateBack

navigateBack 可以進行任何頁面的返回,它是一個匹配的過程。它會命中打開返回頁面的邏輯,即頁面不斷出棧,直到目標頁面。

對於 navigateBack,需要注意的是你得先知道你要跳的頁面所在的棧的層級,頁面棧我們可以用 getCurrentPages() 獲取(需要注意的是,不要再onLauch 的時候調用)。然後,通過指定 delta 參數跳轉對應的頁面。但是,需要注意的是,此時你頁面棧中當前頁面不是處於棧底,如果這樣你想返回上一層級的路由,顯然是無效的操作,因爲此時頁面棧中不存在上一級。所以,在使用 navigateBack 的時候,也需要注意一下此時頁面棧的長度。

總結

在小程序進行頁面路由的跳轉,你需要理清哪些頁面需要關閉跳轉,哪些頁面不需要關閉跳轉,因爲如果路由跳轉方式選擇不好,很可能就會造成不好的用戶體驗,甚至還可能寫出無效的路由跳轉。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章