微信小程序的生命周期函数是开发者控制页面行为的关键工具，它们在不同阶段被调用，帮助管理页面的状态和数据。微信小程序的生命周期函数主要分为应用生命周期、页面生命周期和组件生命周期三部分。下面我将分别详细描述这三部分的生命周期函数，并给出具体实例和应用场景。
一、应用生命周期函数
应用生命周期函数是在小程序启动时，或者小程序从前台进入后台、从后台进入前台等场景下触发的函数。
onLaunch
- 触发时机：小程序初始化完成时触发，全局只触发一次。
- 应用场景：通常用于全局数据的初始化，如设置应用的全局状态和变量；进行登录状态检查，决定是否跳转到登录页面；加载应用的基础配置，如网络请求的基础设置；初始化性能监控工具等。
实例代码：
App({
onLaunch: function(options) {
console.log("小程序启动");
this.checkUserLogin();
this.loadAppConfig();
},
checkUserLogin: function() {
// 检查用户登录状态
},
loadAppConfig: function() {
// 加载应用配置
}
});
onShow
- 触发时机：小程序启动，或从后台进入前台显示时触发。
- 应用场景：用于从服务器获取最新数据，更新页面显示；恢复用户操作，如暂停的-音频或视频；检查用户设备状态或地理位置等。
实例代码：
App({
onShow: function(options) {
console.log("小程序进入前台");
this.refreshData();
this.resumeUserAction();
},
refreshData: function() {
// 刷新数据
},
resumeUserAction: function() {
// 恢复用户操作
}
});
onHide
- 触发时机：小程序从前台进入后台时触发。
- 应用场景：用于保存当前页面的状态和数据；暂停或停止不必要的资源消耗，如视频播放或计时器；继续执行一些后台任务，如数据同步等。
实例代码：
App({
onHide: function() {
console.log("小程序进入后台");
this.saveCurrentData();
this.releaseResources();
},
saveCurrentData: function() {
// 保存当前数据
},
releaseResources: function() {
// 释放资源
}
});
onError
- 触发时机：小程序发生脚本错误或API调用失败时触发。
- 应用场景：用于记录详细的错误信息，便于后续分析和调试；将错误信息上传到服务器进行监控；提示用户发生错误，提供解决建议或引导。
实例代码：
App({
onError: function(msg) {
console.error("小程序出错:", msg);
this.logError(msg);
this.reportError(msg);
},
logError: function(msg) {
// 记录错误日志
},
reportError: function(msg) {
// 上报错误信息
}
});
二、页面生命周期函数
页面生命周期函数是在页面加载、渲染、显示、隐藏、卸载等场景下触发的函数。
onLoad
- 触发时机：页面加载时触发，通常在用户进入页面时。
- 应用场景：用于加载页面所需的初始数据；根据页面参数动态设置内容或状态；进行API调用获取页面所需的详细信息等。
实例代码：
Page({
onLoad: function(options) {
console.log("页面加载", options);
this.loadData(options);
},
loadData: function(options) {
// 加载数据
}
});
onShow
- 触发时机：页面显示时触发，每次页面从后台切换到前台都会执行。
- 应用场景：用于检查和更新可能在后台变化的数据；刷新界面，确保显示最新内容；重置与用户交互相关的状态或组件等。
实例代码：
Page({
onShow: function() {
console.log("页面显示");
this.refreshPageData();
},
refreshPageData: function() {
// 刷新数据
}
});
onReady
- 触发时机：页面初次渲染完成时触发，仅在页面首次渲染完成时调用一次。
- 应用场景：用于初始化需要页面完全加载后处理的组件，如图表、地图等；启动需要页面完全加载后的动画等。
实例代码：
Page({
onReady: function() {
console.log("页面初次渲染完成");
this.initChart();
},
initChart: function() {
// 初始化图表
}
});
onHide
- 触发时机：页面被隐藏时触发，比如进入下一个页面或切换到后台。
- 应用场景：用于保存当前页面的状态，以便返回时能够继续；暂停或停止不必要的资源消耗等。
实例代码：
Page({
onHide: function() {
console.log("页面隐藏");
this.savePageState();
this.releasePageResources();
},
savePageState: function() {
// 保存状态
},
releasePageResources: function() {
// 释放资源
}
});
onUnload
- 触发时机：页面卸载时触发，比如从当前页面导航到另一个页面。
- 应用场景：用于在页面卸载时进行清理，如删除临时数据、停止监听等；关闭实时数据连接（如WebSocket）等。
实例代码：
Page({
onUnload: function() {
console.log("页面卸载");
this.cleanup();
this.disconnect();
},
cleanup: function() {
// 清理操作
},
disconnect: function() {
// 断开连接
}
});
三、组件生命周期函数
组件生命周期函数是在组件创建、显示、隐藏、卸载等场景下触发的函数。
created
- 触发时机：在组件实例刚刚被创建时执行。
- 应用场景：通常用于组件的初始化操作。
attached
- 触发时机：在组件实例进入页面节点树时执行。
- 应用场景：通常用于执行一些需要在组件挂载到页面时进行的操作，如获取节点信息等。
ready
- 触发时机：在组件在视图层布局完成后执行。
- 应用场景：通常用于执行一些需要在组件渲染完成后进行的操作，如操作DOM节点等。
moved
- 触发时机：在组件实例被移动到节点树另一个位置时执行。
- 应用场景：通常用于处理组件位置变化时的逻辑。
detached
- 触发时机：在组件实例被从页面节点树移除时执行。
- 应用场景：通常用于执行一些清理工作，如取消定时器、解绑事件监听器等。
error
- 触发时机：每当组件方法抛出错误时执行。
- 应用场景：通常用于捕获并处理组件中的错误。
// 定义一个自定义组件
Component({
// 组件的属性列表
properties: {
myProperty: {
type: String,
value: ''
}
},
// 组件的初始数据
data: {
someData: null
},
// 组件的方法列表
methods: {
myMethod() {
console.log('执行组件方法');
}
},
// 在组件实例进入页面节点树时执行
attached() {
console.log('组件attached生命周期函数执行');
// 这里可以执行如数据请求等初始化操作
this.fetchData();
},
// 在组件实例被从页面节点树移除时执行
detached() {
console.log('组件detached生命周期函数执行');
// 这里可以执行清理操作，如取消网络请求等
},
// 在组件在视图层布局完成后执行
ready() {
console.log('组件ready生命周期函数执行');
// 这里可以执行需要依赖节点信息的操作，如获取节点尺寸等
},
// 自定义方法，用于数据请求
fetchData() {
wx.request({
url: 'https://api.example.com/data',
success: (res) => {
this.setData({
someData: res.data
});
},
fail: (err) => {
console.error('数据请求失败', err);
}
});
}
// 注意：小程序组件中并没有beforeCreate和created这样的生命周期函数，
// 它们是在Vue.js等框架中存在的。小程序组件的生命周期函数包括attached、ready、detached等。
});
- attached：当组件被添加到页面节点树时触发。这里我们执行了数据请求操作。
- detached：当组件从页面节点树中移除时触发。这里可以进行一些清理工作。
- ready：当组件在视图层布局完成后触发。这里可以执行一些需要依赖节点信息的操作。
总结
微信小程序的生命周期函数为开发者提供了在特定阶段执行代码的能力，有助于更好地管理页面的状态和数据。通过合理使用这些生命周期函数，开发者可以实现更高效、更稳定的小程序应用。在实际开发中，应根据具体需求在相应的生命周期函数中编写相应的代码逻辑。
