如何「掏空」小程序的五層頁面限制?| 技術寶典
知曉程序注:
很多開發者在面對小程序的五層頁面限制時,內心大概都是崩潰的。
不用慌,知曉程序(微信號 zxcx0101)今天用這篇文章來告訴你們,怎樣狠狠把這五層頁面榨乾。
微信小程序中的頁面導航 API 有三個,兩個跳轉新頁面的 API 分別為 wx.navigateTo 和 wx.redirectTo,還有一個 API 名為 wx.navigateBack,它用於返回頁面。
wx.navigateBack 在小程序的初始版本中只能回到上一個頁面,在最新版本(0.10.102800)的更新中給 navigateBack 添加了一個參數 delta,用於決定需要返回幾層頁面。
navigator 組件的默認跳轉方式與 wx.navigateTo 相同,而如果添加 redirect 屬性,則與 wx.redirectTo 的跳轉方式相同。
navigateTo 在官方文檔中描述如下:
引用保留當前頁面,跳轉到應用內的某個頁面,使用 wx.navigateBack 可以返回到原頁面。
通過 navigateTo 跳轉後,可點擊左上角的按鈕返回上一個頁面。而如果多次調用 navigateTo 之後,就需要返回多次才能回到初始頁面。因此,官方在此處有一個限制。
引用注意:為了不讓用户在使用小程序時造成困擾,我們規定頁面路徑只能是五層,請儘量避免多層級的交互方式。
不過上述五層的限制只是針對 navigateTo,redirectTo 則無此限制。因為 redirectTo 的行為是:
引用關閉當前頁面,跳轉到應用內的某個頁面。
通過 redirectTo 跳轉後,則無法返回跳轉前的頁面。但並不是無法調用 navigateBack,而是調用之後,會回到使用 redirectTo 跳轉前的上一個頁面(此點如果不理解,下面我們會舉例詳細介紹)。
結合頁面棧這個概念可以將上述的「頁面路徑」和頁面層數有更好的理解。
頁面棧可以通過 getCurrentPages 方法獲取:
引用getCurrentPages() 函數用於獲取當前頁面棧的實例,以數組形式按棧的順序給出,第一個元素為首頁,最後一個元素為當前頁面。
上述的「頁面路徑」可以對應為頁面棧中的元素,頁面棧中的最後一個元素就是當前顯示的頁面,頁面跳轉就是新頁面入棧的過程。
上述三種頁面 API 的區別在於:
- navigateTo 不會將舊頁面出棧;
- redirectTo 會將舊頁面出棧,再將需要跳轉到的頁面入棧;
- navigateBack 則是將頁面棧最後一個元素出棧,因此倒數第二個元素會成為最後一個元素,即變成「當前頁面」。
結合下面一個例子可以對上面的內容有更好的理解:
有一個小程序包含 A、B、C、D 四個頁面,A 頁面為首頁。小程序啟動後,在 A 頁面中,我們通過 navigateTo 跳轉到 B 頁面,然後在 B 頁面中再通過 navigateTo 跳轉到 C 頁面。
此時頁面棧中就會包含三個元素,分別為 A、B、C 三個頁面。而此時如果通過 redirectTo 跳轉到 D 頁面,redirectTo 會將當前頁面出棧,即將 C 頁面出棧,再將 D 頁面入棧,這時候,頁面棧中的元素則會變為 A、B、D。
此時如果在 D 頁面調用 navigateBack,會發現不是返回 C 頁面,而是返回到了 B 頁面。因為 navigateBack 將棧中最後一個元素(D 頁面)出棧後,頁面棧的內容則變為 A、B。頁面棧最後一個元素為 B 頁面,即當前顯示的會是 B 頁面。
而上述「頁面路徑」限制為五層,其實就是規定了頁面棧中的元素不能超過五個。頁面棧中元素達到五個後,就不能增加了。
navigateTo 不會將舊頁面出棧,因此通過 navigateTo 跳轉後,頁面棧中元素個數會加一,因此在頁面棧中元素個數達到 5 之後再調用 navigateTo 會失敗,出現無法跳轉的錯誤。
而 redirectTo 會在將舊頁面出棧後,再將新頁面入棧,因此通過 redirectTo 跳轉,頁面棧中元素個數會保持不變,因此即使在頁面棧中元素達到 5 個之後再調用 redirectTo 也能成功跳轉。
以上就是知曉程序(微信號 zxcx0101)帶來的頁面層級三個 API 的解析文章。開發者需要在微信中,善加對這三個 API 的利用,以便能充分利用微信的五層頁面限制。
本文由知曉程序原創出品,關注微信號 zxcx0101,回覆「上手」獲取全網最值得看的小程序上手體驗系列文章。
快速關注知曉程序↓↓↓
知曉程序(微信號 zxcx0101)是愛範兒旗下專注於小程序生態的公眾號。我們提供最全面、新鮮的小程序資訊(消息、觀點、指南、活動)和服務,在這裏你能了解到關於小程序的一切。
資料來源:愛範兒(ifanr)