派大星总结小程序中的声命周期
1、什么是生命周期
- 生命周期( Life Cycle )是指一个对象从创建 -> 运行 -> 销毁的整个阶段,强调的是一个时间段
我们可以把每个小程序运行的过程,也概括为生命周期: - 小程序的启动,表示生命周期的开始
- 小程序的关闭,表示生命周期的结束
- 中间小程序运行的过程,就是小程序的生命周期
2、生命周期的分类
- 在小程序中,生命周期分为两类,分别是:
① 应用生命周期
特指小程序从启动 -> 运行 -> 销毁的过程
② 页面生命周期
特指小程序中,每个页面的加载 -> 渲染 -> 销毁的过程
3、什么是生命周期函数
- 生命周期函数
由小程序框架提供的内置函数,会伴随着生命周期,自动按次序执行。 - 生命周期函数的作用
允许程序员在特定的时间点,执行某些特定的操作
例如,页面刚加载的时候,可以在 onLoad 生命周期函数中初始化页面的数据。
注意:生命周期强调的是时间段,生命周期函数强调的是时间点。
4、生命周期函数的分类
小程序中的生命周期函数分为两类,分别是:
① 应用的生命周期函数
- 特指小程序从启动 -> 运行 -> 销毁期间依次调用的那些函数
② 页面的生命周期函数 - 特指小程序中,每个页面从加载 -> 渲染 -> 销毁期间依次调用的那些函数
5. 应用的生命周期函数
- 小程序的应用生命周期函数需要在 app.js 中进行声明
① onLaunch
② onShow
③ onHide
/**
*当小程序初始化完成时,会触发onLaunch(全局只触发一次) */
onLaunch:function(){
console.log("onLaunch")
},
/**
*当小程序启动,或从后台进入前台显示,会触发onShow
*前台:手机打开该小程序就处于前台运行
*后台:手机回到主页,且未关闭小程序,此时小程序就处于后台运行 */
onShow:function(options){
console.log("onShow")
},
/**
*当小程序从前台进入后台,会触发onHide */
onHide:function(){
console.log("onHide")
}
6、 页面的生命周期函数
小程序的页面生命周期函数需要在页面的 .js 文件中进行声明,
/**
*生命周期函数--监听页面加载,一个页面只调用一次 */
onLoad:function(options){
},
/**
*生命周期函数--监听页面初次渲染完成,一个页面只调用一次 */
onReady:function(){
},
/**
*生命周期函数--监听页面显示 */
onShow:function(){
},
/**
*生命周期函数--监听页面隐藏 */
onHide:function(){
},
/**
*生命周期函数--监听页面卸载,一个页面只调用一次 */
onUnload:function(){
}
7、组件的生命周期
一.组件自身的什么周期
- 组件全部的生命周期函数
小程序组件可用的全部生命周期如下表所示:
重要的三个生命周期函数:
1.created--------不能调用setData。应用于组件的this添加一些自定义属性字段
2.attached--------组件完全初始化完毕,进入页面节点树之后.(可以发送请求)
3.detached-------离开页面节点树之后,清理性工作
-
组件主要的生命周期函数
在小程序组件中,最重要的生命周期函数是 created 、 attached 、 ready 、 detached 。它们各自的
特点
如下:
① 组件实例刚被创建好的时候, created 生命周期函数会被触发
此时调用 setData 不会有效果
通常在这个生命周期函数中,只应该用于给组件的 this 添加一些自定义的属性字段
② 在组件完全初始化完毕、进入页面节点树后, attached 生命周期函数会被触发
此时, this.data 已被初始化完毕
这个生命周期很有用,绝大多数初始化的工作可以在这个时机进行(例如发请求获取初始数据)
③ 在组件离开页面节点树后, detached 生命周期函数会被触发
退出一个页面时,会触发页面内每个自定义组件的 detached 生命周期函数
此时适合做一些清理性质的工作,例如,清除定时器
④ 代表组件渲染完成的生命周期函数为 ready
可以操作页面 -
lifetimes 节点
在小程序组件中,生命周期函数可以直接定义在 Component 构造器的第一级参数中,也可以在
lifetimes 字段内进行声明(这是推荐的方式,其优先级最高)
Component({
//推荐用法
lifetimes:{
attached(){},//在组件实例进入页面节点树时执行
detached(){},//在组建实例被从页面节点树移除时执行
}
})
二.组件所在页面的生命周期
-
什么是组件所在页面的生命周期
有时,自定义组件的行为依赖于页面状态的变化,此时就需要用到组件所在页面的生命周期。
例如:每当触发页面的 show 生命周期函数的时候,我们希望能够重新生成一个随机的 RGB 颜色值。
在自定义组件中,组件所在页面的生命周期函数有如下 3 个,分别是:
所以组件所在页面的生命周期, 相当于在组件中, 监听了组件所在页面的一些事件. -
pageLifetimes 节点
组件所在页面的生命周期函数,需要定义在 pageLifetimes 节点中,
Component({
//组件在页面的生命周期函数在该节点定义
pageLifetimes:{
show(){},//页面被展示
hide(){},//页面被隐藏
resize(){},// 页面尺寸变化
}
})
我们可以利用组件所在页面的生命周期, 在页面每次被展示的时候, 随机生成 RGB 颜色值
Component({
//组件在页面的生命周期函数在该节点定义
pageLifetimes:{
//组件所在的页面被展示时,随机生成一个颜色值
show(){
this.setData({
_rgb:{
r:Math.floor(Math.random()*256),
g:Math.floor(Math.random()*256),
b:Math.floor(Math.random()*256),
}),
},
hide(){},//页面被隐藏
resize(){} //页面尺寸变化
}
})