小程序的生命周期-Toy模板网

这篇具有很好参考价值的文章主要介绍了小程序的生命周期。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、生命周期的分类

二、生命周期函数的应用

1、（全局）应用的生命周期函数

2、页面的生命周期函数

3、组件的生命周期函数

一、生命周期的分类

1、应用的生命周期

指小程序从启动—>运行—>销毁的过程

2、页面的生命周期

指每个页面，从加载—>渲染—>卸载的过程

3、组件的生命周期

每个子组件，创建—>进入页面节点渲染—>被页面节点移除的过程

二、生命周期函数的应用

1、（全局）应用的生命周期函数

* 在官方文档里，框架-框架接口-APP里可看到

App({
  // 监听小程序初始化
  onLaunch (options) {
     ...
  },

  // 监听小程序启动显示
  onShow (options) {
     ...
  },

  // 监听小程序隐藏（切入后台时）
  onHide () {
     ...
  },
})

2、页面的生命周期函数

//index.js
Page({
  // 监听页面加载，一个页面只调用一次
  onLoad: function(options) {
      ...
  },

  // 页面显示时
  onShow: function() {
     ...
  },

  // 页面初次渲染完毕
  onReady: function() {
     ...
  },

  // 页面隐藏
  onHide: function() {
     ...
  },

  // 页面卸载
  onUnload: function() {
     ...
  },
})

3、组件的生命周期函数

官方推荐的方式是，组件的的生命周期可以在 lifetimes 字段内进行声明，其优先级最高文章来源地址https://www.toymoban.com/news/detail-412623.html

Component({
  // 在该字段下声明
  lifetimes: {

    created: function() {
      // 在组件实例被创建时，会触发
    },

    attached: function() {
      // 在组件实例进入页面节点树时执行
    },

    ready: function() {
      // 在组件在视图层布局完成后执行
    },

    moved: function() {
      // 在组件实例被移动到节点树另一个位置时执行
    },

    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },

    error: function() {
      // 每当组件方法抛出错误时执行
    },

  },
  
})

到了这里，关于小程序的生命周期的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！