微信 小程序应用,页面,组件的生命周期

组件生命周期

组件的生命周期:指的是组件自身的一些钩子函数,这些函数在特定的时间节点时被自动触发

组件的生命周期函数需要在 lifetimes 字段内进行声明

最重要的生命周期是 created attached detached 包含一个组件生命周期流程的最主要时间点

定义段 描述
created 在组件实例刚刚被创建时执行,注意此时不能调用 setData (还没有对模板解析)
attached 在组件实例进入页面节点树时执行 (模板已经解析完毕,并且挂载到页面上)
ready 在组件布局完成后执行
moved 在组件实例被移动到节点树另一个位置时执行
detached 在组件实例被从页面节点树移除时执行 (组件被销毁了)
  1. 【组件实例刚刚被创建好时】, created 生命周期被触发。此时,组件数据 this.data 就是在 Component 构造器中定义的数据 data此时还不能调用 setData 通常情况下,这个生命周期只应该用于给组件 this 添加一些自定义属性字段。

  2. 【在组件完全初始化完毕】、进入页面节点树后, attached 生命周期被触发。此时, this.data 已被初始化为组件的当前值。这个生命周期很有用,绝大多数初始化工作可以在这个时机进行。

  3. 【在组件离开页面节点树后】, detached 生命周期被触发。退出一个页面时,如果组件还在页面节点树中,则 detached 会被触发。

js 复制代码
Component({
  
  lifetimes: {
    created: function () {
      // 在组件实例刚刚被创建时执行,注意此时不能调用 setData 
      // 一般用来为组件添加一些自定义属性字段。
    },
    attached: function() {
      // attached 在组件完全初始化完毕、进入页面节点树后执行
      // 模板已经解析完毕,并且挂载到页面上
      // 一般都是在这里写对应的交互
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
    
    // coding...
  }
    
  // coding...
})

组件所在页面的生命周期

组件还有一些特殊的生命周期,这类生命周期和组件没有很强的关联

主要用于组件内部监听父组件的展示、隐藏状态,从而方便组件内部执行一些业务逻辑的处理

组件所在页面的生命周期有 4 个: show、 hide、 resize、 routeDone,需要在 pageLifetimes 字段内进行声明

js 复制代码
// components/custom06/custom06.js
Component({

  // coding...

  // 组件所在页面的生命周期
  pageLifetimes: {

    // 监听组件所在的页面展示(后台切前台)状态
    show () {
      console.log('组件所在的页面被展示')
    },

    // 监听组件所在的页面隐藏(前台切后台、点击 tabBar)状态
    hide () {
      console.log('组件所在的页面被隐藏')
    }

  }

})

小程序生命周期总结

小程序冷启动,钩子函数执行的顺序

保留当前页面(navigate) 以及 关闭当前页面(redirect)

切后台 以及 切前台(热启动)

相关推荐
一匹电信狗14 小时前
【Linux我做主】进程优先级
linux·运维·服务器·c++·ubuntu·小程序·unix
壹立科技1 天前
Java源码构建智能名片小程序
java·开发语言·小程序
shadouqi1 天前
问题1:uniapp在pages样式穿刺没有问题,在components组件中样式穿刺小程序不起效果
小程序·uni-app
2501_915909061 天前
iOS电池寿命与App能耗监测实战 构建完整性能监控系统
android·ios·小程序·https·uni-app·iphone·webview
一只开心鸭!1 天前
原生微信小程序实现语音转文字搜索---同声传译
微信小程序·小程序
weixin_lynhgworld1 天前
旧物回收小程序:科技赋能,让旧物回收焕发生机
科技·小程序
此心光明事上练2 天前
微信小程序组件发布为 npm 包的具体步骤
微信小程序·小程序·npm
Byte_Me2 天前
从东南亚出发:小程序容器技术如何助力 App 快速打入全球市场?
小程序
gongzemin2 天前
微信第三方平台的配置
微信·微信小程序·资讯
小白_ysf2 天前
uniapp开发微信小程序(新旧版本对比:授权手机号登录、授权头像和昵称)
微信小程序·小程序·uni-app