小程序页面生命周期函数是什么

在小程序开发中，页面生命周期函数是控制页面运行流程、管理页面状态以及与用户交互的关键机制。简单来说，它们定义了页面从创建到销毁过程中的各个阶段，开发者可以利用这些函数来执行特定的操作，如初始化数据、加载资源、处理页面切换等。

页面生命周期函数详解

1、 onLoad
（1） 触发时机：页面加载时触发，且只会触发一次。当小程序首次打开某个页面，或者用户从其他页面跳转到该页面时，此函数立即执行。
（2） 用途：常用于初始化页面数据，如从后端接口获取数据并填充到页面。例如，在一个商品详情页，通过onLoad函数向服务器发送请求，获取商品的详细信息，包括名称、价格、描述等，然后将这些数据绑定到页面的相应组件上。
（3） 代码示例：
Page({
data: {
productInfo: {}
},
onLoad: function(options) {
const productId = options.productId;
wx.request({
url: 'https://example.com/api/products/' + productId,
success: (res) => {
this.setData({
productInfo: res.data
});
},
fail: (err) => {
console.error('获取商品信息失败', err);
}
});
}
});
2、 onShow
（1） 触发时机：页面显示 / 切入前台时触发。当小程序从后台切换到前台，或者用户从其他页面返回当前页面时，都会触发onShow函数。
（2） 用途：可用于更新页面状态，比如检查用户登录状态、刷新页面数据等。例如，在一个聊天页面，每次页面显示时，都检查是否有新消息未读，若有则更新页面提示。
（3） 代码示例：
Page({
data: {
unreadCount: 0
},
onShow: function() {
wx.request({
url: 'https://example.com/api/chat/unread',
success: (res) => {
this.setData({
unreadCount: res.data.count
});
},
fail: (err) => {
console.error('获取未读消息数量失败', err);
}
});
}
});
3、 onReady
（1） 触发时机：页面初次渲染完成时触发，同样只触发一次。当页面的 WXML 结构和 WXSS 样式都加载并渲染完成后，该函数执行。
（2） 用途：适用于需要操作页面渲染元素的场景，如获取 Canvas、Map 等组件的实例，进行一些初始化配置。例如，在一个地图页面，在onReady函数中获取地图组件实例，并设置地图的中心点、缩放级别等。
（3） 代码示例：
Page({
onReady: function() {
const mapCtx = wx.createMapContext('myMap');
mapCtx.moveToLocation({
latitude: 30.66,
longitude: 104.06
});
}
});
4、 onHide
（1） 触发时机：页面隐藏 / 切入后台时触发。当用户跳转到其他页面，或者小程序切换到后台时，此函数被调用。
（2） 用途：常用于释放资源、停止定时器等操作。例如，在一个音乐播放页面，当页面隐藏时，停止音乐播放并释放相关资源。
（3） 代码示例：
Page({
data: {
audioContext: null
},
onLoad: function() {
this.data.audioContext = wx.createInnerAudioContext();
this.data.audioContext.src = 'https://example.com/music.mp3';
},
onHide: function() {
if (this.data.audioContext) {
this.data.audioContext.pause();
this.data.audioContext.destroy();
this.data.audioContext = null;
}
}
});
5、 onUnload
（1） 触发时机：页面卸载时触发。当用户通过wx.redirectTo、wx.navigateBack等方法离开当前页面，导致页面被销毁时，该函数执行。
（2） 用途：用于清理页面相关的资源，如取消事件监听、清除临时数据等。例如，在一个表单填写页面，若存在一些临时存储在本地的数据，在页面卸载时可以删除这些数据。
（3） 代码示例：
Page({
onLoad: function() {
wx.setStorageSync('tempFormData', { name: '', age: '' });
},
onUnload: function() {
wx.removeStorageSync('tempFormData');
}
});
理解并合理运用小程序页面生命周期函数，能够优化小程序的性能，提升用户体验，确保页面在不同状态下都能正确、高效地运行。

拓展阅读：

1、 小程序应用生命周期函数：除了页面生命周期函数，小程序还有应用生命周期函数，如onLaunch（小程序初始化完成时触发）、onShow（小程序启动或从后台进入前台显示时触发）、onHide（小程序从前台进入后台时触发）等。这些函数用于管理整个小程序的状态和全局逻辑。
2、 页面间传参：在页面跳转过程中，经常需要传递参数。可以在wx.navigateTo、wx.redirectTo等跳转方法的url中通过?key=value的形式传递参数，在目标页面的onLoad函数的options参数中接收。例如，wx.navigateTo({ url: '/pages/detail/detail?productId=123' });，在detail页面的onLoad函数中，options.productId即可获取到123。
3、 组件生命周期函数：小程序中的自定义组件也有自己的生命周期函数，如created（组件实例刚刚被创建时触发）、attached（组件实例进入页面节点树时触发）、detached（组件实例被从页面节点树移除时触发）等。组件生命周期函数用于管理组件内部的状态和行为，与页面生命周期函数相互配合，构建复杂的小程序界面。