zl程序教程

您现在的位置是:首页 >  工具

当前栏目

微信小程序学习第9天——自定义组件的生命周期与组件所在页面的生命周期

组件微信学习程序 自定义 页面 生命周期 所在
2023-09-11 14:21:26 时间

一、组件的生命周期

1、全部的生命周期函数

生命周期函数参数说明
created 组件实例刚被创建好时,执行created函数
attached完全初始化完毕、进入页面节点树后,执行attached 函数
ready组件在视图层布局完成时执行
moved组件实例被移动到节点树另一个位置时执行
detached组件实例被从页面节点树移除时执行
errorObject Error每当组件方法抛出错误时执行

2、主要的生命周期函数

主要的生命周期函数特点用途
created此时还不能调用setData只应该用于给组件的this添加一些自定义的属性字段
attachedthis.data已初始化完毕绝大多数初始化的工作可以在这个时机进行(例如发请求获取初始数据)
detached退出页面时触发页面内每个自定义组件的 detached 函数做一些清理性质的工作

3、lifetimes节点

组件的生命周期函数,需要定义在lifetimes节点

Component({
  lifetimes:{
    attached(){ }
  },

二、组件所在页面的生命周期

有时,自定义组件的行为依赖于页面状态的变化,此时就需要用到组件所在页面的生命周期

1、组件所在页面的生命周期函数

生命周期函数参数说明
show组件所在页面被展示时执行
hide组件所在页面被隐藏时执行
resizeObject Size组件所在页面尺寸变化时执行

2、pageLifetimes节点

组件所在页面的生命周期函数,需要定义在 pageLifetimes 节点

Component({
  pageLifetimes:{
    show(){ }
  },