当前位置: 首页 > news >正文

【微信小程序】自定义组件(二)

自定义组件

      • 纯数据字段
          • 1、什么是纯数据字段
          • 2、使用规则
      • 组件的生命周期
          • 1、组件全部的生命周期函数
          • 2、组件主要的生命周期函数
          • 3、lifetimes节点
      • 组件所在页面的生命周期
          • 1、什么是组件所在页面的生命周期
          • 2、 pageLifetimes节点
          • 3、生成随机的颜色值

纯数据字段

1、什么是纯数据字段

概念:纯数据字段指的是那些不用于界面渲染的data字段。8

应用场景:例如有些情况下,某些data中的字段既不会展示在界面上,也不会传递给其他组件,仅仅在当前组件内部使用。带有这种特性的data字段适合被设置为纯数据字段。

好处:纯数据字段有助于提升页面更新的性能

2、使用规则

在Component构造器的options节点中,指定pureDataPattern 为一个正则表达式,字段名符合这个正则
表达式的字段将成为纯数据字段,示例代码如下:

Component({options:{//指定所有-开头的数招段为纯数招字段pureDataPattern:/*_/},data:{a:true, //普通数据字晚b:true//纯数据字段}
})

组件的生命周期

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

在小程序组件中,最重要的生命周期函数有3个,分别是created. attached. detached.

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

    • 此时还不能调用setData
    • 通常在这个生命周期函数中, 只应该用于给组件的this 添加- -些自定义的属性字段
  • 在组件完全初始化完毕、进入页面节点树后, attached生命周期函数会被触发

    • 此时, this.data 已被初始化完毕
    • 这个生命周期很有用, 绝大多数初始化的工作可以在这个时机进行(例如发请求获取初始数据)
  • 在组件离开页面节点树后,detached生命周期函数会被触发

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

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

组件所在页面的生命周期

1、什么是组件所在页面的生命周期

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

例如:每当触发页面的show生命周期函数的时候,我们希望能够重新生成一一个随机的RGB颜色值。在自定义组件中,组件所在页面的生命周期函数有如下3个,分别是:

生命周期函数参数描述说明
show在组件件所在的页面被展示时执行
resize组件所在的页面被隐藏时执行
hideObject Size组件所在的页面尺寸变化时执行
2、 pageLifetimes节点

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

pageLifetimes:{show:function(){ //页面被展示console.log('show');},hide:function(){ //页面被隐藏console.log('hide');},resize:function(size) { //页面尺寸变化console.log('resize');}
3、生成随机的颜色值
_randomColor(){      this.setData({  //为data里面的_rgb纯数据字段重新赋值       _rgb:{         r:Math.floor(Math.random() *256),g:Math.floor(Math.random() *256),   b:Math.floor(Math.random() *256)        }      })   
}

相关文章:

【微信小程序】自定义组件(二)

自定义组件 纯数据字段1、什么是纯数据字段2、使用规则 组件的生命周期1、组件全部的生命周期函数2、组件主要的生命周期函数3、lifetimes节点 组件所在页面的生命周期1、什么是组件所在页面的生命周期2、 pageLifetimes节点3、生成随机的颜色值 纯数据字段 1、什么是纯数据字…...

llinux的更目录下的文件作用和举例

Linux是一种开源的操作系统,其文件系统采用了一种层次化的结构。在Linux文件系统中,最顶层的目录被称为根目录,也就是“/”(斜杠)。在根目录下,有很多文件和目录,它们各自有着不同的作用。本文将…...

20231106_抽象类abstract

抽象类abstract 关键字 abstract运用抽象类抽象方法:修饰抽象类中的某个方法,强制子类重写该方法 归纳 关键字 abstract 对于子类必须要实现特定方法,当时父类无法明确时,可定义为抽象类及抽象方法 不合理: 动物吃东西是基础,在这里写吃的方法过于简单,信息没有实际意义; 怎…...

yolov5 obb旋转框 tensorrt部署

文章目录 1.生成engine文件2.检测图像3.代码yolov5-obb tensorRT部署代码结合王新宇和fish-kong两者的代码,可以多batch批量检测旋转框 yolov5旋转框检测: https://blog.csdn.net/qq_42754919/article/details/134145174 1.生成engine文件 首先需要将pt文件转换成wts文件,…...

http中的Content-Type类型

浏览器的Content-Type 最近在做web端下载的时候需要给前端返回一个二进制的流,需要在请求头中设置一个 writer.Header().Set("Content-Type", "application/octet-stream")那么http中的Content-Type有具体有哪些呢?他们具体的使用场…...

【C语法学习】17 - fwrite()函数

文章目录 1 函数原型2 参数3 返回值4 示例 1 函数原型 fwrite():将ptr指向的内存空间中储存的数据块写入与指定流stream相关联的二进制文件中,函数原型如下: size_t fwrite(const void *ptr, size_t size, size_t count, FILE *stream)2 参…...

CWE(Common Weakness Enumeration,通用缺陷枚举)

参考链接:https://cwe.mitre.org/ CWE(Common Weakness Enumeration,通用缺陷枚举)和CVE(Common Vulnerabilities & Exposures,通用漏洞和风险)都是在计算机软件安全领域中非常重要的公开数…...

华为政企视频会议产品集

产品类型产品型号产品说明 maintainProductCloudMCU基础版-ARM华为CloudMCU是为面向云化需求而推出的功能强大的企业云通信融合媒体平台。融合视频、音频和数据等多种媒体内容,接入从会议室到个人PC、手机等设备,实现统一无缝的沟通协作。maintainProduc…...

IntelliJ IDEA 2022创建Maven项目

IntelliJ IDEA 2022创建Maven项目 点击New Project 配置一下下 (1). 选择Maven Archetype (2). 输入Name就是你的项目名称 (3). 输入Location是你的项目保存目录 (4). 选择JDK (5). 选择Catalog一般默认选择Internal即可 在Archetype这里我们选择一个模板来创建Maven项目 …...

有限域的Fast Multiplication和Modular Reduction算法实现

1. 引言 关于有限域的基础知识,可参考: RISC Zero团队2022年11月视频 Intro to Finite Fields: RISC Zero Study Club 有限域几乎是密码学中所有数学的基础。 ZKP证明系统中的所有运算都是基于有限域的: 使用布尔运算的数字电路&#xf…...

第八章:security testing

文章目录 Security Testingbuffer overflow 的例子Fuzzing 测试Random Testing好处坏处Mutation-based Fuzzing好处坏处Generation-based Fuzzing好处坏处Memory DebuggerUndefined Behaviors (未定义行为)Security Testing 渗透测试(或称为pentesting)是指攻击软件以寻找安…...

Linux系统下一些配置建议整理

1. 【推荐】高并发服务器建议调小 TCP 协议的 time_wait 超时时间。 说明:操作系统默认 240 秒后,才会关闭处于 time_wait 状态的连接,在高并发访问下,服 务器端会因为处于 time_wait 的连接数太多,可能无法建立新的…...

【launch文件中如何启动gdb调试单个节点多个节点】

文章目录 调试多个节点在ROS中,如果需要用gdb调试节点,你可以在.launch文件中添加相关的参数。以下是一个例子,展示如何为一个节点启动gdb调试: <launch><node pkg="your_package" type="your_node...

Unity中Shader的GI的直接光实现

文章目录 前言一、在上一篇文章中&#xff0c;得到GI相关数据后&#xff0c;需要对其进行Lambert光照模型计算二、在准备好上面步骤后&#xff0c;我们需要准备缺少的数据1、准备上图中的 s.Normal2、准备上图中的 s.Albedo 前言 Unity中Shader的GI的直接光实现&#xff0c;基…...

JAVA进程和线程

哈喽~大家好呀&#xff0c;这篇来看看JAVA进程和线程。 &#x1f947;个人主页&#xff1a;个人主页​​​​​ &#x1f948; 系列专栏&#xff1a;【日常学习上的分享】 &#x1f949;与这篇相关的文章&#xff1a; Redis快速入…...

3.2-Docker Image概述

...

JS自定义深浅度克隆

function deepClone(obj, cache new WeakMap()) {if (typeof obj ! object) return obj //普通类型&#xff0c;直接返回if (obj null) return objif (cache.get(obj)) return cache.get(obj)//防止循环引用&#xff0c;程序进入死循环if (obj instanceof Date) return new D…...

MySQL之表的约束

目录 表的约束1.空属性2.默认值3.列描述4.zerofill5.主键6.自增长7.唯一键8.外键 表的约束 真正约束字段的是数据类型&#xff0c;数据类型规定了数据的用法、范围…假如我们没有按照其规定的约束&#xff0c;那么数据将插入不成功但是数据类型约束很单一&#xff0c;需要有一…...

Go基础——接口、并发

1、接口 Go 语言提供了另外一种数据类型即接口&#xff0c;它把所有的具有共性的方法定义在一起&#xff0c;任何其他类型只要实现了这些方法就是实现了这个接口。接口可以让不同的类型绑定到一组公共的方法上&#xff0c;从而实现多态和灵活的设计。Go 语言中的接口是隐式实现…...

zookeeper本地部署和集群搭建

zookeeper&#xff08;动物园管理员&#xff09;是一个广泛应用于分布式服务提供协调服务Apache的开源框架 Zookeeper从设计模式角度来理解&#xff1a;是一个基于观察者模式设计的分布式服务管理框架&#xff0c;它 负责存储和管理大家都关心的数据 &#xff0c;然 后 接受观察…...

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的?

&#x1f9e0; 智能合约中的数据是如何在区块链中保持一致的&#xff1f; 为什么所有区块链节点都能得出相同结果&#xff1f;合约调用这么复杂&#xff0c;状态真能保持一致吗&#xff1f;本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里&#xf…...

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ASP.NET Core 是一个跨平台的开源框架&#xff0c;用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录&#xff0c;以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...

突破不可导策略的训练难题:零阶优化与强化学习的深度嵌合

强化学习&#xff08;Reinforcement Learning, RL&#xff09;是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程&#xff0c;然后使用强化学习的Actor-Critic机制&#xff08;中文译作“知行互动”机制&#xff09;&#xff0c;逐步迭代求解…...

VB.net复制Ntag213卡写入UID

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

使用van-uploader 的UI组件,结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

Cloudflare 从 Nginx 到 Pingora:性能、效率与安全的全面升级

在互联网的快速发展中&#xff0c;高性能、高效率和高安全性的网络服务成为了各大互联网基础设施提供商的核心追求。Cloudflare 作为全球领先的互联网安全和基础设施公司&#xff0c;近期做出了一个重大技术决策&#xff1a;弃用长期使用的 Nginx&#xff0c;转而采用其内部开发…...

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...

GC1808高性能24位立体声音频ADC芯片解析

1. 芯片概述 GC1808是一款24位立体声音频模数转换器&#xff08;ADC&#xff09;&#xff0c;支持8kHz~96kHz采样率&#xff0c;集成Δ-Σ调制器、数字抗混叠滤波器和高通滤波器&#xff0c;适用于高保真音频采集场景。 2. 核心特性 高精度&#xff1a;24位分辨率&#xff0c…...

Hive 存储格式深度解析:从 TextFile 到 ORC,如何选对数据存储方案?

在大数据处理领域&#xff0c;Hive 作为 Hadoop 生态中重要的数据仓库工具&#xff0c;其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式&#xff0c;很多开发者常常陷入选择困境。本文将从底…...

C++.OpenGL (20/64)混合(Blending)

混合(Blending) 透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...