小程序中的页面生命周期及页面跳转

title: 小程序中的页面生命周期及页面跳转 date: 2021-09-01

1. 小程序页面生命周期

在小程序开发中，页面生命周期指的是一个页面从创建到销毁的整个过程中，各个阶段的函数调用顺序。了解页面生命周期对于开发和调试小程序非常重要。

小程序中的页面生命周期主要包括以下几个阶段：

1. onLoad: 页面被加载时触发，只会触发一次。
2. onShow: 页面显示出来时触发，每次打开页面都会触发。
3. onReady: 页面初次渲染完成时触发，表示页面已准备好，可以和视图层进行交互。
4. onHide: 页面隐藏起来时触发，如跳转到其他页面或者关闭当前页面。
5. onUnload: 页面被销毁时触发，如点击返回按钮或关闭小程序。
6. onPullDownRefresh: 用户下拉刷新时触发，需要在app.json的window配置中添加enablePullDownRefresh: true才能生效。

除以上常见的生命周期函数外，还有一些其他的页面生命周期函数，如onReachBottom（页面滚动到底部时触发）、onPageScroll（页面滚动时触发）、onShareAppMessage（用户点击右上角分享时触发）等。

2. 小程序页面跳转

小程序页面跳转是指在一个页面中跳转到另一个页面。小程序提供了多种页面跳转的方式，常见的有以下几种：

1. wx.navigateTo: 保留当前页面，跳转到应用内的某个页面。通过wx.navigateBack可以返回到原页面。
2. wx.redirectTo: 关闭当前页面，跳转到应用内的某个页面。不可返回到原页面。
3. wx.reLaunch: 关闭所有页面，打开应用内的某个页面。
4. wx.switchTab: 跳转到应用内的某个tab页面，并关闭其他所有非tab页面。

页面跳转中，可以通过传递参数给新页面，以实现信息的传递。在跳转到新页面时，可以在url后拼接参数，然后在新页面的onLoad函数中获取参数。例如：

// 在当前页面跳转到新页面，并传递参数
wx.navigateTo({
  url: '/pages/detail/detail?id=123',
});

// 在新页面中获取参数
Page({
  onLoad: function(options) {
    console.log(options.id); // 输出: 123
  },
});

需要注意的是，小程序页面跳转时，新页面的路径必须在app.json的pages字段中定义，否则将无法访问。

3. 总结

小程序中的页面生命周期和页面跳转是开发小程序时非常重要的概念。通过理解页面生命周期中各阶段的函数调用顺序，我们可以在合适的时机执行相应的操作，提高用户体验。同时，页面跳转可以让我们在不同页面之间进行切换和信息传递，使小程序更加丰富和灵活。

希望以上内容对你理解小程序的页面生命周期和页面跳转有所帮助！

本文来自极简博客，作者：绮梦之旅，转载请注明原文链接：小程序中的页面生命周期及页面跳转