文章首发于个人博客,转载参考请注明来源微信小程序的页面跳转和生命周期函数
@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 | Function | 生命周期回调—监听页面加载 |
| onShow | Function | 生命周期回调—监听页面显示 |
| onReady | Function | 生命周期回调—监听页面初次渲染完成 |
| onHide | Function | 生命周期回调—监听页面隐藏 |
| onUnload | Function | 生命周期回调—监听页面卸载 |
onLoad(Object query)
页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。
参数说明
| 名称 | 类型 | 说明 |
|---|---|---|
| query | Object | 打开当前页面路径中的参数 |
onShow()
页面显示/切入前台时触发。
onReady()
页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
onHide()
页面隐藏/切入后台时触发。 如 navigateTo 或底部 tab 切换到其他页面，小程序切入后台等。
onUnload()
页面卸载时触发。如redirectTo或navigateBack到其他页面时。
下图说明了 Page 实例的生命周期。
[图片上传失败...(image-b9f66c-1549938218169)]
页面的路由
在小程序中所有页面的路由全部由框架进行管理，对于路由的触发方式以及页面生命周期函数如下：
| 路由方式 | 触发时机 | 路由后页面 | 路由前页面 |
|---|---|---|---|
| 初始化 | 小程序打开的第一个页面 | onLoad，onShow | |
| 打开新页面 | 调用 API wx.navigateTo 或使用组件<navigator /> | onLoad，onShow | onHide |
| 页面重定向 | 调用 API wx.redirectTo 或使用组件<navigator /> | onLoad，onShow | onUnload |
| 页面返回 | 调用 API wx.navigateBack或用户按左上角返回按钮 | onShow | onUnload |
| Tab切换 | 多 Tab 模式下用户切换 Tab | 第一次打开 onLoad，onshow；否则 onShow | onHide |
Tips:
- navigateTo, redirectTo 只能打开非 tabBar 页面。
- switchTab 只能打开 tabBar 页面。
- reLaunch 可以打开任意页面。
- 页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
- 调用页面路由带的参数可以在目标页面的onLoad中获取.
- 首次进入页面时，页面周期函数调用的顺序为onLoad()、onShow()、onReady()。
网友评论