微信小程序开发笔记 - 小程序的四种生命周期函数

小程序的四种生命周期函数

目录

• 小程序的四种生命周期函数
  • 1. 应用的生命周期函数
  • 2. 页面的生命周期函数
  • 3. 组件的生命周期函数
  • 4. 组件所在页面的生命周期函数

• 生命周期是指一个对象从创建→运行→销毁的整个阶段
• 生命周期函数是由小程序框架提供的内置函数，会伴随着生命周期，自动按次序执行。生命周期函数允许程序员在特定的时间点，执行某些特定的操作

1. 应用的生命周期函数

• 特指小程序从启动→运行→销毁的过程

• 小程序的应用生命周期函数需要在app.js中声明

  生命周期函数	描述说明
  onLaunch	小程序初始化完成时，执行此函数，全局只触发一次
  onShow	小程序启动，或从后台进入前台显示时触发
  onHide	小程序从前台进入后台时触发

2. 页面的生命周期函数

• 特指小程序中，每个页面的加载→渲染→销毁的过程

• 小程序的页面生命周期函数需要在页面的.js文件中声明

  生命周期函数	描述说明
  onLoad	监听页面加载，一个页面只加载一次
  onShow	监听页面显示
  onReady	监听页面初次渲染完成，一个页面只调用一次
  onHide	监听页面隐藏
  onUnload	监听页面卸载，一个页面只调用一次

3. 组件的生命周期函数

• 小程序的组件生命周期函数需要在组件的.js文件中声明

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

• 三个主要生命周期

  • 组件实例刚被创建好时，created生命周期函数会被触发
    • 此时还不能调用setData
    • 在这个生命周期函数中，通常只用于给组件的this添加一些自定义的属性字段
  • 在组件完全初始化完毕。进入页面节点树后，attached生命周期函数会被触发
    • 此时，this.data已被初始化完毕
    • 在这个生命周期函数中，绝大多数初始化的工作可以在这个时机进行
  • 在组件离开页面节点树后，detached生命周期函数会被触发
    • 退出一个页面时，会触发页面内每个自定义组件的detached生命周期函数
    • 此时适合做一些清理性质的工作

• 定义方式

  生命周期函数需要声明在lifetimes字段内

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

4. 组件所在页面的生命周期函数

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

• 小程序的组件生命周期函数需要在组件的.js文件中声明

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

• 定义方式

  Component({
      pageLifetimes:{
          show:function(){},
          hide:function(){},
          resize:function(size){}
      }
  })