小程序生命周期的使用

onload

  相当于vue中的created 第一次进入界面

onshow

   相当于vue中的beforemount 挂载之前 还没有挂载

onready

  相当于 vue中的mount 完成dom渲染并且进行挂载

### 小程序生命周期详解 小程序生命周期是指从小程序启动到销毁期间经历的一系列阶段和事件。这些生命周期方法主要用于监听小程序的状态变化,并在特定时刻执行相应的逻辑操作。以下是小程序的主要生命周期方法及其执行顺序[^4]: - **onLaunch**:小程序初始化完成时触发,全局只触发一次。此方法适合用于初始化全局数据或配置。 - **onShow**:小程序启动或从后台进入前台显示时触发。可以在此方法中处理页面恢复的逻辑。 - **onHide**:小程序从前台进入后台时触发。适合用于保存用户数据或释放部分资源。 - **onError**:小程序发生脚本错误或 API 调用失败时触发。可用于记录错误日志。 - **onPageNotFound**:小程序页面未找到时触发。可以用于处理页面跳转错误。 ```javascript App({ onLaunch: function() { console.log('小程序初始化'); }, onShow: function() { console.log('小程序进入前台'); }, onHide: function() { console.log('小程序进入后台'); }, onError: function(msg) { console.error('小程序发生错误', msg); }, onPageNotFound: function(res) { console.warn('页面未找到', res); } }); ``` --- ### 组件生命周期详解 组件生命周期是指一个组件从创建到销毁的整个过程。了解组件生命周期对于优化性能、管理资源和提升用户体验至关重要。微信小程序的组件生命周期包括多个阶段,每个阶段都有特定的生命周期函数可以调用[^1]。 以下是组件生命周期的主要方法及其执行顺序: #### 1. 组件实例初始化阶段 - **created**:组件实例刚刚被创建时执行。此时,组件的数据字段尚未绑定到实际 DOM 上。 - **attached**:组件与页面节点树绑定完成时执行。此时,组件的数据字段已经绑定到实际 DOM 上,但可能还未渲染到屏幕上。 - **ready**:组件布局完成后执行。此时,组件的子组件也已完成布局。 #### 2. 组件运行阶段 - **moved**:组件所在的页面被移动到新窗口时执行。这一阶段较少使用。 #### 3. 组件销毁阶段 - **detached**:组件实例从页面节点树中移除时执行。适合用于清理定时器或释放资源。 ```javascript Component({ lifetimes: { created: function() { console.log('组件实例被创建'); }, attached: function() { console.log('组件与页面节点树绑定完成'); }, ready: function() { console.log('组件布局完成'); }, moved: function() { console.log('组件所在的页面被移动到新窗口'); }, detached: function() { console.log('组件实例从页面节点树中移除'); } } }); ``` --- ### 页面生命周期(组件所在页面的生命周期) 除了组件自身的生命周期外,组件还可以通过 `pageLifetimes` 定义其所在页面的生命周期方法。这些方法并非直接与组件关联,但有时组件需要获知页面状态以进行内部处理[^2]。 以下是页面生命周期的主要方法及其执行顺序: - **show**:组件所在的页面被展示时执行。 - **hide**:组件所在的页面被隐藏时执行。 - **resize**:组件所在的页面尺寸发生改变时执行。 ```javascript Component({ pageLifetimes: { show: function() { console.log('页面被展示'); }, hide: function() { console.log('页面被隐藏'); }, resize: function(size) { console.log('页面尺寸发生改变', size); } } }); ``` --- ### 生命周期方法的执行顺序总结 1. **小程序全局生命周期**:`onLaunch -> onShow -> onHide -> onError -> onPageNotFound` 2. **组件生命周期**:`created -> attached -> ready -> moved -> detached` 3. **页面生命周期**(通过 `pageLifetimes` 定义):`show -> hide -> resize` ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值