文章目录
0.生命周期的直观定义
生命周期定义:在某一时刻会自动调用的钩子回调函数就叫做生命周期
1.小程序的全局生命周期
在App.js中验证:
// app.js
App({
// 1 应用第一次启动就会调用的函数
onLaunch() {
// 最早的ajax请求 以及获取用户信息
console.log('onLaunch 1 应用第一次启动就会调用的函数')
},
onShow() {
// 应用被用户看到 就会调用onShow生命周期
// 用法当页面重新显示 可以重置新的数据 进行新的ajax请求
console.log('onShow 应用被用户看到 就会调用onShow生命周期 ')
},
onHide(){
// 应用隐藏的时候就会自动触发
// 用法 清除定时器 不再占用用户内存
console.log('onHide 应用隐藏的时候就会自动触发 ')
},
onError(err){
console.log('onerror',err)
}
})
结果:
刷新页面:打印onLaunch,加载完后打印onShow,
点击虚拟home键,打印onHide
随便弄个语法错误,打印onError
2.小程序的页面生命周期
在pages/movies/movies.js中验证:
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log('onload')
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
console.log('onReady 生命周期函数--监听页面初次渲染完成')
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
console.log('onshow 生命周期函数--监听页面显示')
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
console.log(' onHide 生命周期函数--监听页面隐藏')
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
console.log(' onUnload生命周期函数--监听页面卸载 ')
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
console.log('onPullDownRefresh')
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
console.log('onReachBottom 页面上拉触底事件的处理函数')
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
console.log('onshareAppMessage')
},
// 页面一滚动就触发了
onPageScroll() {
console.log('onpagescroll')
}
})
结果:
先后打印全局的onLaunch和onShow,
再打印页面的onLoad,onShow,onReady
点击虚拟home键,先隐藏页面的onHide在隐藏全局的onHide,
借助导航组件的第四个跳转方法 <navigator open-type="redirect" url='/pages/test8/test8'>跳页面2 </navigator>
,打印onUnload,
页面下拉时,打印 onPullDownRefresh,
网上拉触底了,打印 onReachBottom
点击发送给朋友,打印 onShareAppMessage
页面中的组件加载顺序:onLoad>onShow>onReady
onLoad(Object query) 页面加载时触发。一个页面只会调用一次,
可以在 onLoad的参数中获取打开当前页面路径中的参数。
onShow() 页面显示/切入前台时触发。
onReady() 页面初次渲染完成时触发。一个页面只会调用一次,
代表页面已经准备妥当,可以和视图层进行交互。
所以加载顺序是先加载onLoad,再是onShow,最后onReady
3.小程序的组件生命周期
定义
组件的生命周期,指的是组件自身的一些函数,
这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。
其中,最重要的生命周期有 created,attached和detached ,包含一个组件实例生命流程的最主要时间点。
流程
1.组件实例刚刚被创建好时, created 生命周期被触发。
此时,组件数据 this.data 就是在 Component 构造器中定义的数据 data 。
此时还不能调用 setData 。
通常情况下,这个生命周期只应该用于给组件 this 添加一些自定义属性字段。
2.在组件完全初始化完毕、进入页面节点树后, attached生命周期 被触发。
此时, this.data 已被初始化为组件的当前值。
这个生命周期很有用,绝大多数初始化工作可以在这个时机进行。
3.在组件离开页面节点树后, detached 生命周期被触发。退出一个页面时,如果组件还在页面节点树中,则 detached 会被触发。
组件的生命周期方法定义在哪里
生命周期方法可以直接定义在 Component 构造器的第一级参数中
组件的的生命周期也可以在 lifetimes 字段内进行声明
(这是推荐的方式,其优先级最高)。
在components/tab/index.js中验证
// components/tab/index.js
Component({
/**
* 组件的属性列表
*/
properties: {
aaa:{
type:String,
value:''
}
},
lifetimes: {
created:function(){
console.log('组件created')
},
attached: function() {
// 在组件实例进入页面节点树时执行
console.log('组件attached')
},
detached: function() {
// 在组件实例被从页面节点树移除时执行
console.log('组件 detached')
},
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
a1(){
console.log('1')
this.triggerEvent('a1',123)
}
}
})