微信小程式中路由跳轉

 

 

一、是什麼

微信小程式擁有web網頁和Application共同的特徵,我們的頁面都不是孤立存在的,而是通過和其他頁面進行交互,來共同完成系統的功能

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

二、有哪些

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

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

wx.navigateTo(Object)

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

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

參數表如下所示:

 

 

流程圖如下:

 

 

wx.redirectTo(Object)

重定向,當頁面過多時,被保留頁面會擠占微信分配給小程式的記憶體,或是達到微信所限制的 10 層頁面棧的情況下,我們應該考慮選擇 wx.redirectTo

wx.redirectTo()用於關閉當前頁面,跳轉到應用內的某個頁面

這樣的跳轉,可以避免跳轉前頁面佔據運行記憶體,但返回時頁面需要重新載入,增加了返回頁面的顯示時間

參數表如下所示:

 

 

流程圖如下所示:

 

 

wx.switchTab(Object)

跳轉到 tabBar頁面,並關閉其他所有非 tabBar 頁面

參數表如下所示:

 

 

wx.navigateBack(Object)

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

參數表如下:

 

 

wx.reLaunch(Object)

關閉所有頁面,打開到應用內的某個頁面,返回的時候跳到首頁

流程圖如下所示:

 

 

參數表如下所示:

 

 

三、總結

關於上述五種跳轉方式,做下總結:

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

其中關於它們的頁面棧的關係如下:

  • avigateTo 新頁面入棧

  • redirectTo 當前頁面出棧,新頁面入棧

  • navigateBack 頁面不斷出棧,直到目標返回頁,新頁面入棧

  • switchTab 頁面全部出棧,只留下新的 Tab 頁面

  • reLanch 頁面全部出棧,只留下新的頁面

參考文獻

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