文章首發(fā)于個(gè)人博客,轉(zhuǎn)載參考請(qǐng)注明來(lái)源微信小程序的頁(yè)面跳轉(zhuǎn)和生命周期函數(shù)

@TOC

前言

最近在做微信小程序，做頁(yè)面跳轉(zhuǎn)的時(shí)候遇到了些小坑。在不同的場(chǎng)景下需要選擇合適的頁(yè)面跳轉(zhuǎn)函數(shù)，并且由于頁(yè)面跳轉(zhuǎn)函數(shù)和頁(yè)面的生命周期函數(shù)有莫大的關(guān)聯(lián)，所以在此一并總結(jié)。

微信小程序的頁(yè)面跳轉(zhuǎn)函數(shù)

wx.navigateTo(Object object)

保留當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面。但是不能跳到 tabbar 頁(yè)面。使用 wx.navigateBack 可以返回到原頁(yè)面。當(dāng)調(diào)用該方法時(shí)，會(huì)調(diào)用onHide()頁(yè)面周期函數(shù)。

示例:

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

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

wx.redirectTo(Object object)

關(guān)閉當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面。但是不允許跳轉(zhuǎn)到 tabbar 頁(yè)面。

示例:

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

wx.switchTab(Object object)

跳轉(zhuǎn)到 tabBar 頁(yè)面，并關(guān)閉其他所有非 tabBar 頁(yè)面。

示例代碼:

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

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

wx.reLaunch(Object object)

關(guān)閉所有頁(yè)面，打開(kāi)到應(yīng)用內(nèi)的某個(gè)頁(yè)面。

示例代碼:

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

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

wx.navigateBack(Object object)

關(guān)閉當(dāng)前頁(yè)面，返回上一頁(yè)面或多級(jí)頁(yè)面。可通過(guò) getCurrentPages() 獲取當(dāng)前的頁(yè)面棧，決定需要返回幾層。

示例代碼:

// 注意：調(diào)用 navigateTo 跳轉(zhuǎn)時(shí)，調(diào)用該方法的頁(yè)面會(huì)被加入堆棧，而 redirectTo 方法則不會(huì)。見(jiàn)下方示例代碼

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

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

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

小結(jié):

• wx.navigateTo 用于保留當(dāng)前頁(yè)面、跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面，使用 wx.navigateBack可以返回到原頁(yè)面。對(duì)于頁(yè)面不是特別多的小程序，通常推薦使用 wx.navigateTo進(jìn)行跳轉(zhuǎn)， 以便返回原頁(yè)面，以提高加載速度。當(dāng)頁(yè)面特別多時(shí)，則不推薦使用。

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

• wx.switchTab 對(duì)于跳轉(zhuǎn)到 tab bar 的頁(yè)面，最好選擇 wx.switchTab()，它會(huì)先關(guān)閉所有非 tab bar 的頁(yè)面。其次，也可以選擇 wx.reLaunch()，它也能實(shí)現(xiàn)從非 tab bar 跳轉(zhuǎn)到 tab bar，或在 tab bar 間跳轉(zhuǎn)，效果等同 wx.switchTab()。使用其他跳轉(zhuǎn) API 來(lái)跳轉(zhuǎn)到 tab bar，則會(huì)跳轉(zhuǎn)失敗。

• wx.reLaunch wx.reLaunch()與 wx.redirectTo()的用途基本相同， 只是 wx.reLaunch()先關(guān)閉了內(nèi)存中所有保留的頁(yè)面，再跳轉(zhuǎn)到目標(biāo)頁(yè)面。

• wx.navigateBack 用于關(guān)閉當(dāng)前頁(yè)面，并返回上一頁(yè)面或多級(jí)頁(yè)面。開(kāi)發(fā)者可通過(guò) getCurrentPages() 獲取當(dāng)前的頁(yè)面棧，決定需要返回幾層。這個(gè) API 需要填寫(xiě)的參數(shù)只有 delta，表示要返回的頁(yè)面數(shù)。若 delta 的取值大于現(xiàn)有可返回頁(yè)面數(shù)時(shí)，則返回到用戶進(jìn)入小程序的第一個(gè)頁(yè)面。當(dāng)不填寫(xiě) delta 的值時(shí)，就默認(rèn)其為 1（注意，默認(rèn)并非取 0），即返回上一頁(yè)面。

微信小程序的生命周期函數(shù)

onLoad(Object query)

頁(yè)面加載時(shí)觸發(fā)。一個(gè)頁(yè)面只會(huì)調(diào)用一次，可以在 onLoad 的參數(shù)中獲取打開(kāi)當(dāng)前頁(yè)面路徑中的參數(shù)。

參數(shù)說(shuō)明

onShow()

頁(yè)面顯示/切入前臺(tái)時(shí)觸發(fā)。

onReady()

頁(yè)面初次渲染完成時(shí)觸發(fā)。一個(gè)頁(yè)面只會(huì)調(diào)用一次，代表頁(yè)面已經(jīng)準(zhǔn)備妥當(dāng)，可以和視圖層進(jìn)行交互。

onHide()

頁(yè)面隱藏/切入后臺(tái)時(shí)觸發(fā)。 如 navigateTo 或底部 tab 切換到其他頁(yè)面，小程序切入后臺(tái)等。

onUnload()

頁(yè)面卸載時(shí)觸發(fā)。如redirectTo或navigateBack到其他頁(yè)面時(shí)。

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

頁(yè)面的路由

在小程序中所有頁(yè)面的路由全部由框架進(jìn)行管理，對(duì)于路由的觸發(fā)方式以及頁(yè)面生命周期函數(shù)如下：

Tips:

• navigateTo, redirectTo 只能打開(kāi)非 tabBar 頁(yè)面。
• switchTab 只能打開(kāi) tabBar 頁(yè)面。
• reLaunch 可以打開(kāi)任意頁(yè)面。
• 頁(yè)面底部的 tabBar 由頁(yè)面決定，即只要是定義為 tabBar 的頁(yè)面，底部都有 tabBar。
• 調(diào)用頁(yè)面路由帶的參數(shù)可以在目標(biāo)頁(yè)面的onLoad中獲取.
• 首次進(jìn)入頁(yè)面時(shí)，頁(yè)面周期函數(shù)調(diào)用的順序?yàn)閛nLoad()、onShow()、onReady()。