一、创建阶段
在uniapp中,创建阶段的生命周期函数有两个,分别是onLaunch和onLoad。其中onLaunch只在小程序初始化时触发一次,而onLoad在每次页面加载时都会触发。
1、onLaunch函数:在小程序初始化完成时,会触发onLaunch函数。这个函数一般用于全局的数据初始化和逻辑处理。
// 全局变量的定义和初始化
// 需要在onLaunch里边定义和初始化
App({
globalData: {
userInfo: null
}
})
2、onLoad函数:在小程序页面加载时,会触发onLoad函数,可以在这个函数中进行特定页面的数据初始化和逻辑处理。
Page({
data: {
motto: 'Hello World'
},
onLoad: function (options) {
// 页面初始化 options为页面跳转所带来的参数
console.log(options)
}
})
二、渲染阶段
在uniapp中,渲染阶段的生命周期函数只有一个,就是onReady。这个函数在页面渲染完成时触发。
Page({
onReady: function () {
// 页面渲染完成
}
})
在onReady函数中,可以进行一些DOM操作。
三、更新阶段
在uniapp中,更新阶段的生命周期函数有两个,分别是onShow和onHide。onShow函数在页面显示时触发,onHide函数在页面隐藏时触发。
1、onShow函数:在页面显示时,会触发onShow函数,可以在这个函数中进行页面数据的更新和逻辑处理。
Page({
onShow: function () {
// 页面显示
}
})
2、onHide函数:在页面隐藏时,会触发onHide函数,可以在这个函数中进行页面数据的保存和清除。
Page({
onHide: function () {
// 页面隐藏
}
})
四、销毁阶段
在uniapp中,销毁阶段的生命周期函数只有一个,就是onUnload。这个函数在页面被销毁时触发。
Page({
onUnload: function () {
// 页面卸载
}
})
五、其他生命周期函数
除了上面提到的五个生命周期函数,uniapp还有其他的一些生命周期函数。
1、onShareAppMessage:在页面转发时触发。
Page({
onShareAppMessage: function () {
return {
title: '自定义转发标题',
path: '/page/user?id=123'
}
}
})
2、onPullDownRefresh:在下拉刷新时触发。
Page({
onPullDownRefresh: function () {
console.log('下拉刷新')
}
})
3、onReachBottom:在上拉触底时触发。
Page({
onReachBottom: function () {
console.log('上拉触底')
}
})
4、onPageScroll:在页面滚动时触发。
Page({
onPageScroll: function (e) {
console.log(e.scrollTop)
}
})
5、onResize:在页面尺寸改变时触发。
Page({
onResize: function (size) {
console.log(size.windowWidth)
console.log(size.windowHeight)
}
})
6、onTabItemTap:在tab栏被点击时触发。
Page({
onTabItemTap(item) {
console.log(item.index)
console.log(item.pagePath)
console.log(item.text)
}
})
总结
通过本文的介绍,我们了解了uniapp的生命周期函数,以及每个生命周期函数的作用。在编写uniapp应用时,生命周期函数能够让我们在特定的时机进行特定的处理,使应用更加健壮和高效。