文章首發于個人博客,轉載參考請注明來源微信小程序的頁面跳轉和生命周期函數

@TOC

前言

最近在做微信小程序，做頁面跳轉的時候遇到了些小坑。在不同的場景下需要選擇合適的頁面跳轉函數，并且由于頁面跳轉函數和頁面的生命周期函數有莫大的關聯，所以在此一并總結。

微信小程序的頁面跳轉函數

wx.navigateTo(Object object)

保留當前頁面，跳轉到應用內的某個頁面。但是不能跳到 tabbar 頁面。使用 wx.navigateBack 可以返回到原頁面。當調用該方法時，會調用onHide()頁面周期函數。

示例:

wx.navigateTo({
  url: 'test?id=1'
})

// test.js
Page({
  onLoad(option) {
    //console.log(option.query)
    console.log(option.id)
  }
})

wx.redirectTo(Object object)

關閉當前頁面，跳轉到應用內的某個頁面。但是不允許跳轉到 tabbar 頁面。

示例:

wx.redirectTo({
  url: 'test?id=1'
})

wx.switchTab(Object object)

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

示例代碼:

{
  "tabBar": {
    "list": [
      {
        "pagePath": "index",
        "text": "首頁"
      },
      {
        "pagePath": "other",
        "text": "其他"
      }
    ]
  }
}

wx.switchTab({
  url: '/index'
})

wx.reLaunch(Object object)

關閉所有頁面，打開到應用內的某個頁面。

示例代碼:

wx.reLaunch({
  url: 'test?id=1'
})

// test Page({ onLoad (option) { console.log(option.query) } })

wx.navigateBack(Object object)

關閉當前頁面，返回上一頁面或多級頁面。可通過 getCurrentPages() 獲取當前的頁面棧，決定需要返回幾層。

示例代碼:

// 注意：調用 navigateTo 跳轉時，調用該方法的頁面會被加入堆棧，而 redirectTo 方法則不會。見下方示例代碼

// 此處是A頁面
wx.navigateTo({
  url: 'B?id=1'
})

// 此處是B頁面
wx.navigateTo({
  url: 'C?id=1'
})

// 在C頁面內 navigateBack，將返回A頁面
wx.navigateBack({
  delta: 2
})

小結:

• wx.navigateTo 用于保留當前頁面、跳轉到應用內的某個頁面，使用 wx.navigateBack可以返回到原頁面。對于頁面不是特別多的小程序，通常推薦使用 wx.navigateTo進行跳轉， 以便返回原頁面，以提高加載速度。當頁面特別多時，則不推薦使用。

• wx.redirectTo 當頁面過多時，被保留頁面會擠占微信分配給小程序的內存，或是達到微信所限制的 5 層頁面棧。這時，我們應該考慮選擇 wx.redirectTo。wx.redirectTo()用于關閉當前頁面，跳轉到應用內的某個頁面。這樣的跳轉，可以避免跳轉前頁面占據運行內存，但返回時頁面需要重新加載，增加了返回頁面的顯示時間。

• wx.switchTab 對于跳轉到 tab bar 的頁面，最好選擇 wx.switchTab()，它會先關閉所有非 tab bar 的頁面。其次，也可以選擇 wx.reLaunch()，它也能實現從非 tab bar 跳轉到 tab bar，或在 tab bar 間跳轉，效果等同 wx.switchTab()。使用其他跳轉 API 來跳轉到 tab bar，則會跳轉失敗。

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

• wx.navigateBack 用于關閉當前頁面，并返回上一頁面或多級頁面。開發者可通過 getCurrentPages() 獲取當前的頁面棧，決定需要返回幾層。這個 API 需要填寫的參數只有 delta，表示要返回的頁面數。若 delta 的取值大于現有可返回頁面數時，則返回到用戶進入小程序的第一個頁面。當不填寫 delta 的值時，就默認其為 1（注意，默認并非取 0），即返回上一頁面。

微信小程序的生命周期函數

onLoad(Object query)

頁面加載時觸發。一個頁面只會調用一次，可以在 onLoad 的參數中獲取打開當前頁面路徑中的參數。

參數說明

onShow()

頁面顯示/切入前臺時觸發。

onReady()

頁面初次渲染完成時觸發。一個頁面只會調用一次，代表頁面已經準備妥當，可以和視圖層進行交互。

onHide()

頁面隱藏/切入后臺時觸發。 如 navigateTo 或底部 tab 切換到其他頁面，小程序切入后臺等。

onUnload()

頁面卸載時觸發。如redirectTo或navigateBack到其他頁面時。

下圖說明了 Page 實例的生命周期。
[圖片上傳失敗...(image-b9f66c-1549938218169)]

頁面的路由

在小程序中所有頁面的路由全部由框架進行管理，對于路由的觸發方式以及頁面生命周期函數如下：

Tips:

• navigateTo, redirectTo 只能打開非 tabBar 頁面。
• switchTab 只能打開 tabBar 頁面。
• reLaunch 可以打開任意頁面。
• 頁面底部的 tabBar 由頁面決定，即只要是定義為 tabBar 的頁面，底部都有 tabBar。
• 調用頁面路由帶的參數可以在目標頁面的onLoad中獲取.
• 首次進入頁面時，頁面周期函數調用的順序為onLoad()、onShow()、onReady()。