小程序的生命周期

Posted 张美丽呀

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了小程序的生命周期相关的知识,希望对你有一定的参考价值。

目录

一、生命周期的分类

二、生命周期函数的应用

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 字段内进行声明,其优先级最高

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

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

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

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

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

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

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

  ,
  
)

以上是关于小程序的生命周期的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序:渲染流程、生命周期和触发顺序

微信小程序生命周期

小程序 app生命周期(app全局变量)

微信小程序生命周期

小程序的生命周期

小程序生命周期