微信小程序之生命周期

微信小程序生命周期详解
本文介绍了微信小程序的生命周期概念,包括生命周期的分类、函数以及应用和页面的生命周期函数。重点讲解了小程序中页面生命周期函数的使用,并提供了示例代码。
生命周期是什么
我们可以把每个小程序运行的过程,概括为生命周期:
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() {}
})
<think>好的,我现在需要回答用户关于UniApp开发微信小程序生命周期的问题。首先,我得回忆一下UniApp和微信小程序生命周期相关知识。 UniApp是一个使用Vue.js开发的跨平台框架,支持编译到微信小程序。所以它的生命周期应该结合了Vue的生命周期小程序自身的生命周期。但用户可能更关注的是在UniApp中开发微信小程序时,具体的生命周期函数是怎样的。 首先,我需要明确UniApp的生命周期微信小程序原生生命周期的区别和联系。UniApp为了跨平台兼容,封装了一套统一的生命周期,同时也允许访问各平台特有的生命周期。比如,在微信小程序中,原生有onLoad、onShow等,而UniApp可能有对应的onLaunch、onShow,同时还有Vue的created、mounted等。不过,用户的问题是专门关于微信小程序生命周期在UniApp中的使用,可能需要说明UniApp如何处理这些。 接下来,我需要整理UniApp中的应用生命周期和页面生命周期。应用级别的生命周期可能包括onLaunch、onShow、onHide等,而页面级别的有onLoad、onShow、onReady、onUnload等。同时,UniApp中的Vue组件生命周期如created、mounted也会存在,但需要区分它们与小程序生命周期的执行顺序。 需要注意的是,UniApp中推荐使用其封装的统一生命周期,但也可以通过使用onLoad这样的原生函数。这时候可能需要解释两者之间的关系,比如,在页面中同时使用onLoad和onShow,它们的执行顺序是怎样的,或者与Vue的生命周期钩子的先后顺序。 此外,可能还需要提到全局生命周期和页面生命周期的区别,以及组件内的生命周期。用户可能想知道在页面加载时,各个钩子的触发时机,例如onLoad在页面加载时触发,onReady在初次渲染完成后触发,onShow在页面显示时触发,onHide在页面隐藏时触发,onUnload在页面卸载时触发。 同时,可能需要注意一些常见的误区,比如在UniApp中使用Vue的生命周期钩子是否能替代小程序原生的生命周期。例如,created钩子可能在小程序的onLoad之前执行,但具体细节需要查证,避免给出错误信息。 还需要举例说明每个生命周期函数的应用场景,比如onLoad用于接收页面参数,onReady用于操作页面DOM,但要注意在UniApp中不能直接操作DOM,而是通过操作数据驱动视图。 最后,可能需要给出一个执行顺序的例子,帮助用户理解各个生命周期函数的触发时机,例如应用启动时的onLaunch,然后打开页面时的onLoad、onShow、onReady等,以及页面跳转时的onHide和onUnload。 在整理这些信息时,需要确保准确无误,同时结构清晰,分点说明应用生命周期、页面生命周期,以及它们的执行顺序和常见用途。可能还需要提醒用户注意UniApp的跨平台特性,某些微信小程序特有的生命周期可能在其他平台不适用,但在编译到微信时可以使用。</think>在UniApp开发微信小程序时,生命周期分为 **应用生命周期** 和 **页面生命周期** 两部分,以下是详细说明: --- ### 一、应用生命周期(全局) 在`App.vue`中定义,控制整个小程序的全局行为: 1. **`onLaunch`** - **触发时机**:小程序初始化完成时(全局只触发一次) - **典型用途**:获取场景值、初始化全局数据 ```javascript export default { onLaunch(options) { console.log('App launched', options.scene) } } ``` 2. **`onShow`** - **触发时机**:小程序启动或从后台进入前台 - **参数**:`options`包含打开小程序的路径、场景值等 - **用途**:监听小程序切换前后台 3. **`onHide`** - **触发时机**:小程序从前台进入后台(如切到手机桌面) - **用途**:清理定时器、保存临时数据 --- ### 二、页面生命周期(单个页面) 在页面`.vue`文件中定义,控制单个页面的行为: 1. **`onLoad`** - **触发时机**:页面加载时(首次进入或路由跳转) - **参数**:`options`接收页面传递的参数 - **用途**:初始化页面数据,例如:`this.id = options.id` 2. **`onShow`** - **触发时机**:页面显示/切入前台时 - **用途**:更新动态数据(如刷新用户登录状态) 3. **`onReady`** - **触发时机**:页面初次渲染完成(类似Vue的`mounted`) - **用途**:操作DOM(需通过`uni.createSelectorQuery`) 4. **`onHide`** - **触发时机**:页面隐藏/切入后台(如跳转到其他页面) - **用途**:暂停页面动画、视频播放 5. **`onUnload`** - **触发时机**:页面卸载时(如关闭页面或路由返回) - **用途**:清理定时器、取消网络请求 --- ### 三、生命周期执行顺序 1. **应用启动** `App.onLaunch` → `App.onShow` → `Page.onLoad` → `Page.onShow` → `Page.onReady` 2. **切后台再返回** `App.onHide`(切后台) → `App.onShow`(返回前台) → `Page.onShow` 3. **页面跳转** 当前页`onHide` → 新页`onLoad` → 新页`onShow` → 新页`onReady` --- ### 四、注意事项 1. **与Vue生命周期的关系** - `created` → 在`onLoad`之前触发 - `mounted` → 与`onReady`基本同时触发 - 建议优先使用UniApp生命周期,避免跨平台兼容问题 2. **原生小程序生命周期** 如需使用微信原生钩子(如`onPullDownRefresh`),需在`.vue`中直接定义: ```javascript export default { onPullDownRefresh() { // 处理下拉刷新 } } ``` --- ### 五、示例代码 ```javascript // 页面代码示例 export default { onLoad(options) { console.log('页面参数:', options.id) }, onShow() { console.log('页面显示') }, onReady() { console.log('页面渲染完成') } } ``` 通过理解这些生命周期钩子,可以更精准地控制数据加载、交互逻辑和资源管理。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

帅帅的猪头

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

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

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

打赏作者

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

抵扣说明:

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

余额充值