[[430221]]

本文轉載自微信公眾號「JS每日一題」，作者灰灰。轉載本文請聯(lián)系JS每日一題公眾號。

一、是什么

微信小程序擁有web網(wǎng)頁和Application共同的特征，我們的頁面都不是孤立存在的，而是通過和其他頁面進行交互，來共同完成系統(tǒng)的功能

在微信小程序中，每個頁面可以看成是一個pageModel，pageModel全部以棧的形式進行管理

二、有哪些

常見的微信小程序頁面跳轉方式有如下：

• wx.navigateTo(Object)
• wx.redirectTo(Object)
• wx.switchTab(Object)
• wx.navigateBack(Object)
• wx.reLaunch(Object)

wx.navigateTo(Object)

wx.navigateTo()用于保留當前頁面、跳轉到應用內(nèi)的某個頁面，使用 wx.navigateBack可以返回到原頁面

對于頁面不是特別多的小程序，通常推薦使用 wx.navigateTo進行跳轉， 以便返回原頁面，以提高加載速度。當頁面特別多時，則不推薦使用

參數(shù)表如下所示：

流程圖如下：

wx.redirectTo(Object)

重定向，當頁面過多時，被保留頁面會擠占微信分配給小程序的內(nèi)存，或是達到微信所限制的 10 層頁面棧的情況下，我們應該考慮選擇 wx.redirectTo

wx.redirectTo()用于關閉當前頁面，跳轉到應用內(nèi)的某個頁面

這樣的跳轉，可以避免跳轉前頁面占據(jù)運行內(nèi)存，但返回時頁面需要重新加載，增加了返回頁面的顯示時間

參數(shù)表如下所示：

流程圖如下所示：

wx.switchTab(Object)

跳轉到 tabBar頁面，并關閉其他所有非 tabBar 頁面

參數(shù)表如下所示：

wx.navigateBack(Object)

wx.navigateBack() 用于關閉當前頁面，并返回上一頁面或多級頁面，開發(fā)者可通過 getCurrentPages() 獲取當前的頁面棧，決定需要返回幾層則設置對象的delta屬性即可

參數(shù)表如下：

wx.reLaunch(Object)

關閉所有頁面，打開到應用內(nèi)的某個頁面，返回的時候跳到首頁

流程圖如下所示：

參數(shù)表如下所示：

三、總結

關于上述五種跳轉方式，做下總結：

• navigateTo 保留當前頁面，跳轉到應用內(nèi)的某個頁面，使用 wx.navigateBack 可以返回到原頁
• redirectTo 關閉當前頁面，跳轉到應用內(nèi)的某個頁面
• switchTab 跳轉到 tabBar 頁面，同時關閉其他非 tabBar 頁面
• navigateBack 返回上一頁面
• reLanch 關閉所有頁面，打開到應用內(nèi)的某個頁面

其中關于它們的頁面棧的關系如下：

• avigateTo 新頁面入棧
• redirectTo 當前頁面出棧，新頁面入棧
• navigateBack 頁面不斷出棧，直到目標返回頁，新頁面入棧
• switchTab 頁面全部出棧，只留下新的 Tab 頁面
• reLanch 頁面全部出棧，只留下新的頁面

參考文獻

https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.navigateBack.html