微信小程序之生命周期

本文介绍了微信小程序的生命周期概念,包括生命周期的分类、函数以及应用和页面的生命周期函数。重点讲解了小程序中页面生命周期函数的使用,并提供了示例代码。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

生命周期是什么
我们可以把每个小程序运行的过程,概括为生命周期:
1. 小程序的启动,表示生命周期的开始
2. 小程序的关闭,表示生命周期的结束
3. 中间小程序运行的过程,就是小程序的生命周期
生命周期的分类
在小程序中,生命周期分为两类,分别是:
1. 应用生命周期
	特指小程序从启动 -> 运行 -> 销毁的过程
2. 页面生命周期
	特指小程序中,每个页面的加载 -> 渲染 -> 销毁的过程

页面的生命周期范围较小,应用程序的生命周期范围较大

生命周期的函数
生命周期函数:
	是由小程序框架提供的内置函数,会伴随着生命周期,自动按次序执行。
生命周期函数的作用:
	允许程序员在特定的时间点,执行某些特定的操作。例如:页面刚加载的时候,可以在 onLoad 生命周期函数中初始化页面的数据。

注意:生命周期强调的是时间段,生命周期函数强调的是时间点。

生命周期函数的分类
在小程序中,生命周期函数分为两类,分别是:
1. 应用生命周期函数
	特指小程序从启动 -> 运行 -> 销毁期间依次调用的那些函数
2. 页面生命周期函数
	特指小程序中,每个页面从加载 -> 渲染 -> 销毁期间依次调用的那些函数
应用的生命周期函数
小程序的应用生命周期函数需要在 app.js 中进行声明,示例代码如下:
// app.js 文件
App({
	// 小程序初始化完成时,执行此函数,全局只触发一次,可以做一些初始化的工作
	onLaunch: function(options) {},
	// 小程序启动,或从后台进入前台显示时触发
	onShow: function(options) {},
	// 小程序从前台进入后台时触发
	onHide: function() {}
})
页面的生命周期函数

小程序的页面生命周期函数需要在页面的 .js 中进行声明,示例代码如下:

// 页面的 .js 文件
Page({
	// 监听页面加载,一个页面只调用 1 次
	onLoad: function(options) {},
	// 监听页面显示
	onShow: function() {},
	// 监听页面初次渲染完成,一个页面只调用 1 次
	onReady: function() {},
	// 监听页面隐藏
	onHide: function() {}
	// 监听页面卸载,一个页面只调用 1 次
	onUnload: function() {}
})
### 微信小程序组件生命周期解析 #### 组件主要生命周期函数 在微信小程序框架内,组件拥有特定的生命周期钩子来响应不同阶段的状态变化。这些状态涵盖了从创建到销毁的过程。 - **created**: 当组件实例刚被创建完成时触发此事件[^3]。此时,组件的数据观测 (data observer) 和其他初始化设置已经准备就绪,但是尚未渲染至页面上。 - **attached**: 此回调会在组件实例首次加入页面节点树之后立即调用[^4]。这意味着该组件现在已经是可见的一部分,并且其内部结构也已经被构建出来;然而,在这个时刻之前发生的任何样式调整可能还未生效。 - **detached**: 这是在组件即将离开当前视图并最终被销毁前的一个重要通知点。它允许开发者清理资源或执行必要的收尾工作,比如取消网络请求、解除定时器等操作。 #### 页面级生命周期方法 除了上述针对单个组件的方法外,还有专门用于处理整个页面行为的一组生命周期接口: - `show`: 每当页面重新显示给用户的时候都会触发这一事件,无论是初次加载还是返回导航栈中的某一页。 - `hide`: 对应于`show`, 它标志着页面暂时不可见,可能是由于跳转到了另一个页面或是应用进入了后台模式。 - `resize`: 如果设备屏幕大小发生变化,则会激活此功能以便应用程序能够适配新的布局尺寸。 ```javascript Component({ lifetimes: { attached: function() {}, detached: function() {} }, pageLifetimes: { show: function() {}, hide: function() {}, resize: function(size) {} } }); ``` 通过合理利用这些生命周期函数,可以有效地管理组件的行为逻辑以及优化用户体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

帅帅的猪头

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值