微信小程序_16,组件的生命周期

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

组件的全部生命周期函数:

小程序可用的全部生命周期如下表所示:

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

组件主要的生命周期函数:

在小程序中,最重要的生命周期函数有3个,分别是created,attached,detached.它们各自的特点如下:

1.组件实例刚被创建好的时候,created生命周期函数会被触发

  • 此时还不能调用setData
  • 通常在这个生命周期函数中,只应该用于给组件的this添加一些自定义的属性字段

2.在组件完全初始化完毕,刚进入页面节点树后,attached生命周期函数会被触发

  • 此时,this.data已被初始化完毕
  • 这个生命周期很有用,绝大多数初始化的工作可以在这个时机进行(例如发请求获取初始数据)

3.在组件离开页面节点树后,detached生命周期函数会被触发

  • 退出一个页面时,会触发页面内每个自定义组件的detached生命周期函数
  • 此时适合做一些清理性质的工作

定义组件的生命周期函数:

lifetimes节点:

在小程序中,生命周期函数可以直接定义在Component构造器的第一级参数中,可以在lifetimes字段内进行声明(这是推荐的方式,其优先级最高),示例代码如下:

Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },
  // 推荐用法:
  lifetimes: {
    // 在组件实例进入页面节点树时执行
    attached() {},
    // 在组件实例被从页面节树移除时执行
    detached() {}
  },
  // 以下是旧式的定义方式:
  // 在组件实例进入页面节点树时执行
  attached() {},
  // 在组件实例被从页面节树移除时执行
  detached() {},
})

新旧两种方式都存在时,会优先使用新的,往后不建议使用旧的方式了

什么是组件所在页面的生命周期函数:

有时,自定义组件的行为依赖于页面状态的变化,此时就需要用到组件所在页面的生命周期
例如:每当触发页面的show生命周期函数的时候,我们希望能够重新生成一个随机的RGB颜色值:
在自定义组件中,组件所在的页面的生命周期函数有如下3个,分别是:

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

pageLifetimes

组件所在页面的生命周期函数,需要定义在pageLifetimes节点中,示例代码如下:

// components/lifetimes/lifetimes.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },
  pageLifetimes: {
    show: function () {
      console.log('页面被展示了');
    },
    hide: function () {
      console.log('页面被隐藏了');
    },
    resize: function () {
      console.log('页面变化了');
    },
  },
})

生成随机的RGB颜色值:

Component({
  pageLifetimes: {
    show: function () {
      console.log('页面被展示了,生成随机颜色');
      this._randomColor()
    },
    hide: function () {
      console.log('页面被隐藏了');
    },
    resize: function () {
      console.log('页面变化了');
    },
  },
    // 生成随机RGB颜色值:
    _randomColor() {
      this.setData({
        _rgb: {
          r: Math.floor(Math.random() * 256),
          g: Math.floor(Math.random() * 256),
          b: Math.floor(Math.random() * 256),
        }
      })
    }
})

运行:
微信小程序_16,组件的生命周期

这里就是组件监听了页面的状态,在每次进入页面时,生成一个随机的RGb值,文章来源地址https://www.toymoban.com/news/detail-486089.html

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序显示loading效果,微信小程序节流效果,微信小程序生命周期,微信小程序组件的创建与使用

            文档地址:wx.showLoading(Object object) | 微信开放文档         请求前 显示loading 效果 ,请求结束后隐藏loading         下拉触底需要时间比较长,但是可能会一直进行请求,我们可以 设置一个 加载状态 ,用来控制什么时候 才可以加载         当我们loading 效果为tr

    2024年02月10日
    浏览(66)
  • 微信小程序:uni-app页面Page和组件Component生命周期执行的先后顺序

    文档 页面生命周期 https://uniapp.dcloud.net.cn/tutorial/page.html#lifecycle 组件生命周期 https://uniapp.dcloud.net.cn/tutorial/page.html#componentlifecycle 经测试,得出结论: H5和微信小程序的生命周期函数调用顺序不一致 一般情况下,主要使用的周期函数如下,他们的执行顺序是固定的 页面 组件

    2024年02月08日
    浏览(54)
  • 微信小程序全局生命周期和页面生命周期

    目录 前言  小程序的生命周期 页面生命周期

    2024年02月11日
    浏览(51)
  • 微信小程序的全局生命周期和页面生命周期

            生命周期是指一个程序或者软件从创建、到开始、暂停、唤起、停止、卸载的过程,由于微信小程序分为全局和页面两部分,所有从这两部分来讲解微信小程序的生命周期            全局生命周期指的是使用App() 函数注册一个小程序,接受一个object参数,其指定

    2024年02月16日
    浏览(45)
  • 微信小程序 —— 生命周期

    小程序的生命周期,写在对象中。 全局 == 放在 app.js 中的 App({})中;单个页面 == 放在对应 js 文件中的 Page({})。 ⚠️注意:App({})必须在全局的app.js中调用,必须调用且只能调用一次。 onLaunch  —— 小程序初始化时触发,只触发一次(重新加载即触发) onShow —— 页面显示时

    2024年01月17日
    浏览(42)
  • 微信小程序生命周期

    必须在 app.js 中调用,必须调用且只能调用一次。 onLaunch : 小程序初始化完成时触发,全局只触发一次。 云开发的初始化 方便其他页面直接调用云开发的SDK 发送请求获取用户的个人信息 方便其他页面使用 获取本地存储数据 方便其他页面使用 onShow :小程序启动或切前台显

    2023年04月16日
    浏览(45)
  • 微信小程序——生命周期

    微信小程序有以下几个生命周期函数: onLaunch :小程序初始化时触发,只会执行一次。可以在此函数中进行全局的初始化操作。 onShow :小程序启动或从后台进入前台显示时触发。可以在此函数中执行需要在小程序显示时进行的逻辑操作。 onHide :小程序从前台进入后台时触

    2024年02月09日
    浏览(46)
  • 微信小程序 生命周期

    在小程序中,生命周期分为两类 应用生命周期 指小程序从启动-运行-销毁的过程 页面生命周期 特指小程序页面的加载-渲染-销毁的过程 生命周期函数是由小程序框架提供的内置函数,会自动按次序执行,生命周期函数允许程序员在特定的时间点执行某些特定的操作,比如,

    2024年02月13日
    浏览(40)
  • 微信小程序的生命周期

    生命周期(Life Cycle)是指一个对象从创建 - 运行 - 销毁的整个阶段,强调的是一个时间段。 我们可以把每个小程序运行的过程,也概括为生命周期: 小程序的启动,表示 生命周期的开始 小程序的关闭,表示 生命周期的结束 在小程序中,生命周期分为两类,分别是: ①应

    2024年02月03日
    浏览(46)
  • 微信小程序——生命周期详解(代码解读)

    ✅作者简介:2022年 博客新星 第八 。热爱国学的Java后端开发者,修心和技术同步精进。 🍎个人主页:Java Fans的博客 🍊个人信条:不迁怒,不贰过。小知识,大智慧。 💞当前专栏:微信小程序学习分享 ✨特色专栏:国学周更-心性养成之路 🥭本文内容:微信小程序——使

    2024年02月07日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包