知曉程序注：
很多開發者在面對小程序的五層頁面限制時，內心大概都是崩潰的。
不用慌，知曉程序（微信號 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）
請按此登錄後留言。未成為會員? 立即註冊