如何「掏空」小程序的五層頁面限制?| 技術寶典

愛範兒 於 16/12/2016 發表 收藏文章

知曉程序注:
很多開發者在面對小程序的五層頁面限制時,內心大概都是崩潰的。

不用慌,知曉程序(微信號 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)

如果喜歡我們的文章,請即分享到︰

留言

會員
我要評論
請按此登錄後留言。未成為會員? 立即註冊
快捷鍵:←
快捷鍵:→