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

@TOC

前言

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

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

wx.navigateTo(Object object)

保留當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面私痹。但是不能跳到 tabbar 頁面脐嫂。使用 wx.navigateBack 可以返回到原頁面。當(dāng)調(diào)用該方法時紊遵，會調(diào)用onHide()頁面周期函數(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)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面癞蚕。但是不允許跳轉(zhuǎn)到 tabbar 頁面蕊爵。

示例:

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

wx.switchTab(Object object)

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

示例代碼:

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

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

wx.reLaunch(Object object)

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

示例代碼:

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

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

wx.navigateBack(Object object)

關(guān)閉當(dāng)前頁面恒水，返回上一頁面或多級頁面∷瞧耄可通過 getCurrentPages() 獲取當(dāng)前的頁面棧钉凌，決定需要返回幾層。

示例代碼:

// 注意：調(diào)用 navigateTo 跳轉(zhuǎn)時捂人，調(diào)用該方法的頁面會被加入堆棧御雕，而 redirectTo 方法則不會。見下方示例代碼

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

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

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

小結(jié):

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

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

• wx.switchTab 對于跳轉(zhuǎn)到 tab bar 的頁面，最好選擇 wx.switchTab()捐寥，它會先關(guān)閉所有非 tab bar 的頁面笤昨。其次，也可以選擇 wx.reLaunch()握恳，它也能實現(xiàn)從非 tab bar 跳轉(zhuǎn)到 tab bar瞒窒，或在 tab bar 間跳轉(zhuǎn)，效果等同 wx.switchTab()乡洼。使用其他跳轉(zhuǎn) API 來跳轉(zhuǎn)到 tab bar崇裁，則會跳轉(zhuǎn)失敗。

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

• wx.navigateBack 用于關(guān)閉當(dāng)前頁面锹雏，并返回上一頁面或多級頁面巴比。開發(fā)者可通過 getCurrentPages() 獲取當(dāng)前的頁面棧，決定需要返回幾層礁遵。這個 API 需要填寫的參數(shù)只有 delta轻绞，表示要返回的頁面數(shù)。若 delta 的取值大于現(xiàn)有可返回頁面數(shù)時佣耐，則返回到用戶進(jìn)入小程序的第一個頁面政勃。當(dāng)不填寫 delta 的值時，就默認(rèn)其為 1（注意晰赞，默認(rèn)并非取 0）稼病，即返回上一頁面选侨。

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

onLoad(Object query)

頁面加載時觸發(fā)。一個頁面只會調(diào)用一次然走，可以在 onLoad 的參數(shù)中獲取打開當(dāng)前頁面路徑中的參數(shù)援制。

參數(shù)說明

onShow()

頁面顯示/切入前臺時觸發(fā)。

onReady()

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

onHide()

頁面隱藏/切入后臺時觸發(fā)洪己。 如 navigateTo 或底部 tab 切換到其他頁面，小程序切入后臺等竟贯。

onUnload()

頁面卸載時觸發(fā)答捕。如redirectTo或navigateBack到其他頁面時。

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

頁面的路由

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

Tips:

• navigateTo, redirectTo 只能打開非 tabBar 頁面益眉。
• switchTab 只能打開 tabBar 頁面。
• reLaunch 可以打開任意頁面姥份。
• 頁面底部的 tabBar 由頁面決定郭脂，即只要是定義為 tabBar 的頁面，底部都有 tabBar澈歉。
• 調(diào)用頁面路由帶的參數(shù)可以在目標(biāo)頁面的onLoad中獲取.
• 首次進(jìn)入頁面時朱庆，頁面周期函數(shù)調(diào)用的順序為onLoad()、onShow()闷祥、onReady()。