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

自定义组件

      • 纯数据字段
          • 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)        }      })   
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/130624.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

快速了解推荐引擎检索技术

目录 一、推荐引擎和其检索技术 二、推荐引擎的整体架构和工作过程 (一)用户画像 (二)文章画像 (三)推荐算法召回 三、基于内容的召回 (一)召回算法 (二&#xf…

C#高级--IO详解

零、文章目录 IO详解 1、IO是什么 (1)IO是什么 IO是输入/输出的缩写,即Input/Output。在计算机领域,IO通常指数据在内部存储器和外部存储器或其他周边设备之间的输入和输出。输入和输出是信息处理系统(例如计算器&…

分享者 - 携程旅游创作者搬砖项目图文教程

大家好!携程这个出行旅游平台相信大家都不陌生吧。 每天都有大量的旅客在里面浏览攻略,寻找灵感和旅游建议。 那么,我们的项目就是把一些优质的小红书平台上的旅游攻略或作品,经过处理后搬运到携程平台上发布。 这个项目如何操作呢…

Portraiture4.1.2最新中文汉化版

提起PS后期修图人像美白磨皮,大家会想到各种磨皮工具,其中Portraiture这款磨皮效率超高,是99%摄影师的必备插件,一秒磨皮,无卡顿,效果好!人像摄影师人均一款,磨皮质感非常好&#xf…

Java 正则表达式重复匹配篇

重复匹配 * 可以匹配任意个字符,包括0个字符。 可以匹配至少一个字符。? 可以匹配0个或一个字符。{n} 可以精确指定 n 个字符。{n,m} 可以精确匹配 n-m 个字符。你可以是 0 。 匹配任意个字符 匹配 D 开头,后面是任意数字的字符, String …

独创改进 | RT-DETR 引入双向级联特征融合结构 RepBi-PAN | 附手绘结构图原图

本专栏内容均为博主独家全网首发,未经授权,任何形式的复制、转载、洗稿或传播行为均属违法侵权行为,一经发现将采取法律手段维护合法权益。我们对所有未经授权传播行为保留追究责任的权利。请尊重原创,支持创作者的努力,共同维护网络知识产权。 文章目录 YOLOv6贡献RepBi-…

实习记录--(海量数据如何判重?)--每天都要保持学习状态和专注的状态啊!!!---你的未来值得你去奋斗

海量数据如何判重? 判断一个值是否存在?解决方法: 1.使用哈希表: 可以将数据进行哈希操作,将数据存储在相应的桶中。 查询时,根据哈希值定位到对应的桶,然后在桶内进行查找。这种方法的时间复…

一站式解决方案:体验亚马逊轻量服务器/VPS的顶级服务与灵活性

文章目录 一、什么是轻量级服务器/VPS 二、服务器创建步骤 三、服务器连接客户端(私钥登录) 四、使用服务器搭建博客网站 五、个人浅解及总结 一、什么是轻量级服务器/VPS 亚马逊推出的轻量级服务器/VPS:是一种基于云计算技术的虚拟服务器解决方案。它允许用户…

0005Java安卓程序设计-ssm基于Android的网店系统

文章目录 **摘要**目录系统设计开发环境 编程技术交流、源码分享、模板分享、网课教程 🐧裙:776871563 摘要 随着Internet的发展,人们的日常生活已经离不开网络。未来人们的生活与工作将变得越来越数字化,网络化和电子化。网上管…

Spring Boot 3 整合 xxl-job 实现分布式定时任务调度,结合 Docker 容器化部署(图文指南)

目录 前言初始化数据库Docker 部署 xxl-job下载镜像创建容器并运行访问调度中心 SpringBoot 整合 xxl-jobpom.xmlapplication.ymlXxlJobConfig.java执行器注册查看 定时任务测试添加测试任务配置定时任务测试结果 结语附录xxl-job 官方文档xxl-job 源码测试项目源码 前言 xxl-…

代码随想录算法训练营第四十三天丨 动态规划part06

518.零钱兑换II 思路 这是一道典型的背包问题,一看到钱币数量不限,就知道这是一个完全背包。 对完全背包还不了解的同学,可以看这篇:动态规划:关于完全背包,你该了解这些!(opens new window)…

Spring Boot spring.factories的原理

文章目录 1. spring.factories 用法2. spring.factories 实现原理3. spring.factories 用于解决什么问题? 3.1 业务场景思考及 starter 机制引入3.2 Spring Boot starter 机制 4. 小结 近期看到业务代码里用到 spring.factories 的配置,觉得场景不合适…

Java基础篇 | 多线程详解

✅作者简介:大家好,我是Leo,热爱Java后端开发者,一个想要与大家共同进步的男人😉😉 🍎个人主页:Leo的博客 💞当前专栏: Java从入门到精通 ✨特色专栏&#xf…

RMI初探

接口 import java.rmi.Remote; import java.rmi.RemoteException;public interface IFoo extends Remote {String say(String name) throws RemoteException; }import java.rmi.Remote; import java.rmi.RemoteException;public interface IBar extends Remote {String buy(Str…

【Nginx38】Nginx学习:SSL模块(二)错误状态码、变量及宝塔配置分析

Nginx学习:SSL模块(二)错误状态码、变量及宝塔配置分析 继续我们的 SSL 模块的学习。上回其实我们已经搭建起了一个 HTTPS 服务器了,只用了三个配置,其中一个是 listen 的参数,另外两个是指定密钥文件的地址…

overleaf里插入中文语句

作业要求是需要插入中文 我直接插入中文生成pdf会报错: 解决办法: overleaf官网里提供了教程:https://www.overleaf.com/learn/latex/Chinese 使用XeLaTeX或者LuaLaTeX进行编译是支持UTF-8编码。所以改变编译器的步骤如下: 点击…

3,感兴趣区域ROI

1,简介 ROI,感兴趣区域(region of interest),截取图像 2,获取方法 方法1:使用Rect cv::Mat srccv::imread("*.bmp");//读取原图 cv::Mat matROI src(cv::Rect(100,200,50,100));//截取原图&…

版本控制系统-SVN

SVN Apache Subversion 通常被缩写成 SVN,是一个开放源代码的版本控制系统。 官网:https://subversion.apache.org 资料:https://svnbook.red-bean.com、https://www.runoob.com/svn/svn-tutorial.html 下载:https://sourceforg…

初学Flutter:实现底部导航切换

效果展示 flutter bottomNavBar 主要实现代码 入口文件:main.dart import package:flutter/material.dart; import package:flutter_demo/components/bottomNavBar.dart; import package:flutter_demo/views/cart.dart; import package:flutter_demo/views/cata.d…

向量数据库的崛起与多元化场景创新

向量数据库的崛起与多元化场景创新 前言: 在当今数字化时代,数据被认为是黄金,对于企业、科学家和决策者而言都具有巨大的价值。然而,随着数据规模的不断增长,有效地管理、存储和检索数据变得愈发复杂。这就引入了向量…