小程序生命周期由应用生命周期、页面生命周期和组件生命周期构成,在课堂上我们已经学习了应用生命周期,使用学习工具自主学习页面生命周期和组件生命周期。 要求:1.阐述概念 2.阐述涉及到的生命周期函数 ()
时间: 2025-06-03 11:13:58 浏览: 13
### 小程序页面生命周期
小程序的页面生命周期是指一个页面从创建到销毁的整个过程,了解这一过程对于优化性能、管理资源和提升用户体验至关重要[^1]。微信小程序的页面生命周期包括多个阶段,每个阶段都有特定的生命周期函数可以调用。以下是页面生命周期的主要函数列表:
- **onLoad**:页面加载时触发,参数为上个页面传递的数据,仅在页面第一次加载时执行。
- **onShow**:页面显示/切入前台时触发,每次页面显示都会触发。
- **onReady**:页面初次渲染完成时触发,注意如果渲染速度快,可能在页面加载时就已经触发。
- **onHide**:页面隐藏/切入后台时触发。
- **onUnload**:页面卸载时触发,例如当用户关闭页面或跳转到其他页面时。
- **onPullDownRefresh**:下拉刷新时触发。
- **onReachBottom**:页面上拉触底事件触发。
- **onShareAppMessage**:用户点击右上角菜单中的“转发”按钮时触发。
- **onPageScroll**:页面滚动时触发。
- **onResize**:页面尺寸变化时触发。
```javascript
Page({
onLoad: function (options) {
console.log('页面加载', options);
},
onShow: function () {
console.log('页面显示');
},
onReady: function () {
console.log('页面初次渲染完成');
},
onHide: function () {
console.log('页面隐藏');
},
onUnload: function () {
console.log('页面卸载');
}
});
```
### 小程序组件生命周期
组件的生命周期指的是组件自身的一些函数,这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发[^3]。以下是组件生命周期的主要函数列表:
- **created**:组件实例刚刚被创建好时触发。此时,`this.data` 是在 `Component` 构造器中定义的数据,但还不能调用 `setData`。
- **attached**:组件实例进入页面节点树时触发。此时,`this.data` 已被初始化为组件的当前值,大多数初始化工作可以在这一时机进行。
- **ready**:组件布局完成后触发,可以用于需要操作组件布局完成后才能进行的工作。
- **moved**:组件实例被移动到节点树的另一个位置时触发。
- **detached**:组件实例被从页面节点树移除时触发。
```javascript
Component({
lifetimes: {
created: function () {
console.log('组件实例刚刚被创建');
},
attached: function () {
console.log('组件实例进入页面节点树');
},
ready: function () {
console.log('组件布局完成');
},
detached: function () {
console.log('组件实例被移除');
}
}
});
```
### 总结
小程序的页面生命周期和组件生命周期是小程序开发中的重要概念,合理使用这些生命周期函数可以帮助开发者更好地管理页面和组件的状态,从而提升应用的性能和用户体验。
阅读全文
相关推荐















