當前位置:
首頁 > 科技 > 開發 | 天天用小程序頁面跳轉介面,但你真的了解它們嗎?

開發 | 天天用小程序頁面跳轉介面,但你真的了解它們嗎?

開發 | 天天用小程序頁面跳轉介面,但你真的了解它們嗎?

知曉程序註:

有關頁面間跳轉的許多介面,大概是小程序開發過程中,使用率最高的介面。

但是,你真的了解微信提供的四個頁面跳轉介面嗎?

今天,知曉程序(微信號 zxcx0101)就來為你詳細解析,小程序中有關頁面跳轉的 4 個介面,幫助你更有效地利用小程序的 5 層頁面層級限制。

文 | 鄔泉

對於兩個或更多頁面的微信小程序而言,頁面之間的跳轉是在所難免的

有關小程序頁面間跳轉的 API 函數,微信一共為我們提供了 4 個(另外,還有返回上一級或多級的wx.navigateBack)。

下面,我將主要圍繞這四個 API 函數,教你如何跳出頁面跳轉的大坑。

四個介面怎麼用?

這四個 API 可接受的參數都是完全相同的,如下:

開發 | 天天用小程序頁面跳轉介面,但你真的了解它們嗎?

在小程序 JavaScript 邏輯代碼中的用法,也完全相同,具體語法為:

函數名({
url: "",
success: function {},
fail: ...,
complete: ...
})

雖然它們有這麼多的相同點,但它們絕對一點都不多餘, 因為它們的用法完全各不相同。

直接跳轉:wx.navigateTo

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

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

重定向:wx.redirectTo

當頁面過多時,被保留頁面會擠占微信分配給小程序的內存,或是達到微信所限制的 5 層頁面棧。這時,我們應該考慮選擇wx.redirectTo

wx.redirectTo用於關閉當前頁面,跳轉到應用內的某個頁面。這樣的跳轉,可以避免跳轉前頁面佔據運行內存,但返回時頁面需要重新載入,增加了返回頁面的顯示時間。

清空頁面棧再跳轉:wx.reLaunch

wx.reLaunchwx.redirectTo的用途基本相同, 只是wx.reLaunch先關閉了內存中所有保留的頁面,再跳轉到目標頁面

跳轉至 Tab Bar 頁面:wx.switchTab

對於跳轉到 tab bar 的頁面,最好選擇 wx.switchTab,它會先關閉所有非 tab bar 的頁面。

其次,也可以選擇 wx.reLaunch它也能實現從非 tab bar 跳轉到 tab bar,或在 tab bar 間跳轉,效果等同wx.switchTab

使用其他跳轉 API 來跳轉到 tab bar,則會跳轉失敗。tab bar 如下所示(位於小程序底部):

關閉頁面:wx.navigateBack

wx.navigateBack用於關閉當前頁面,並返回上一頁面或多級頁面。開發者可通過getCurrentPages獲取當前的頁面棧,決定需要返回幾層。

這個 API 需要填寫的參數只有 delta,表示要返回的頁面數。若delta的取值大於現有可返回頁面數時,則返回到用戶進入小程序的第一個頁面。

當不填寫 delta的值時,就默認其為1(注意,默認並非取0),即返回上一頁面。

關注「知曉程序」公眾號 ??

  • 在微信後台回復「

    開發

    」,獲取知曉程序開發全套經驗。
  • 在微信後台回復「

    666

    」,獲取小程序開發 demo。

喜歡這篇文章嗎?立刻分享出去讓更多人知道吧!

本站內容充實豐富,博大精深,小編精選每日熱門資訊,隨時更新,點擊「搶先收到最新資訊」瀏覽吧!


請您繼續閱讀更多來自 愛范兒 的精彩文章:

手機廠商們砍掉3.5mm介面後,你花在耳機上的錢變多了嗎?
阿里達摩院新進展:微軟、Google人工智慧專家入職AI實驗室
阿聯酋建全球最大火星模擬基地,土豪式「偷走」全球精英
不僅僅是娛樂,虛擬現實技術也能用來治療心理疾病
華為發布了 Mate 10/10 Pro/保時捷版,3 款手機刷新了多個「世界第一」

TAG:愛范兒 |