（四）小程序学习笔记——自定义组件

news2025/1/13 13:41:37

1、组件注册——usingComponents

（1）全局注册：在app.json文件中配置 usingComponents进行注册，注册后可以在任意页面使用。
（2）局部注册，在页面的json文件中配置suingComponents进行注册，注册后只能子啊当前页面使用。

 "usingComponents": {
 	 "custom-checkbox": "./components/custom-checkbox/custom-checkbox"
 }

2、properties——接收传递进来的属性，类似vue的props

接收：

  properties: {
    label: {
      //数据的类型只能是String、Array、Number、Boolean、Object
      //也可以为null,表示不限制类型
      type: String,
      value: ''
    }
  },

访问：

this.properties.label

修改：

this.setData({
	label:"在组件内部修改 Properties中的数据"
})

在JS中可以访问和获取properties中的数据，但是一般不建议修改，会造成数据流的混乱。

3、wxml 自定义组件插槽——slot（同vue 的插槽一样）

  • 默认插槽：
  • 具名插槽：
组件A
<view>
<slot name="slot-right">
</view>
组件B
<text slot="slot-right">具名插槽<text>

在自定义组件的js文件开启支持多slot：

Component({
  options: {
    multipleSlots: true
  },
 })

4、自定义组件的样式和注意事项

  1. 在自定义的wxss文件中，不允许使用标签选择器、ID 选择器、属性选择器。请使用class类选择器。
  2. 子选择器（.a>.b）只能用于view 和子组件，用于其他组件（标签）可能会导致样式失效。
  3. 继承样式，例如：color、font 等都会从组件外继承。
  4. （除继承样式外）全局样式、组件所在页面的样式文件中的样式都对自定义组件 无效。
  5. 官方不推荐做法： 不建议全局样式文件 、父级页面之间使用标签选择器设置样式。
  6. 组件和组件使用者如果使用了后代选择器（.a .b），可能会出现一些非预期情况

5、组件样式隔离——stylelsolation

stylelsolation：用于配置样式隔离选项。主要有三个属性值

  • isolated ：表示样式隔离，在自定义组件内外，使用了相同class属性的样式不会相互影响。默认值。
  • apply-shared：组件的使用者、页面的wxss样式可以影响自定义组件中的样式，但是自定义组件不会影响到外部组件使用者、页面的wxss设置的样式。
  • shared：组件的使用者、页面的wxss和自定义组件中的样式可以相互影响，甚至还可以影响到其他使用了 “apply-shared”、"shared"属性的自定义组件。

配置：在自定义组件的js文件中

Component({
  options: {
 	// styleIsolation: 'isolated'
 	// styleIsolation: 'apply-shared'
    styleIsolation: 'shared'
  },
 })

**注意：**自定义组件中不可以直接修改默认组件的样式，比如修改复选框的样式。如果想要修改需要 stylelsolation：“shared”；但是shared属性还会修改其他页面的样式、组件使用者的样式、以及其他使用了“apply-shared”\“shared”属性的自定义组件的样式。此时可以给可以使想要受影响的组件单独添加一个命名空间（类名）

6、自定义组件的数据监听器——observers（类似于vue->watch）

  //用于监听数据属性是否发生了变化
  observers:{
    //key：需要监听的数据
    //value:就是一个回调函数，形参：最新的数据
    num: function (newNum) {
    },

    //同时监听多个数据使用字符串，用逗号分隔
    "num，count": function (newNun, NewCount) {
    },
    //支持监听属性，以及内部数据的变化，使用数据路径
    "obj.name": function (newName) {
    },
    "arr[1]": function (newItem) {
      console.log(newItem)
    },
    //监听所有属性的变化使用通配符：**
    "obj.**": function (newObj) {
      console.log(newObj)
    }
  }

7、组件通信——父子组件传值

  • 父组件往子组件传值：
    （1）父组件wxml中使用数据绑定方式向子组件传递动态数据。
    （2）子组件通过properties接收父组件传递的数据。（如果需要将properties中的数据赋值给data中的数据，通过observers实现）
  • 子组件向父组件传值：
    （1）自定义组件内部使用triggerEvent方法发射一个自定义事件，同时可以携带数据。（类似于 $emit）

this.triggerEvent('myevent',this.data.num)

（2）在父组件的自定义组件标签上通过ind方法监听发射的事件，同时绑定事件的处理函数，在事件的处理函数中通过对象获取到传递的数据。

<custom bind:myevent='getData'></custom>

getData(event){
//event。detail 获取子组件传递给父组件的数据
console.log(event) 
}

8、获取组件实例——selectComponent

获取到子组件实例之后就可以任意访问子组件的数据和方法

  //获取子组件对象，参数为class选择器或者id选择器。
      const res = this.selectComponent(".child");
     // const res = this.selectComponent("#child");
      console.log(res.data.num)

9、自定义组件的生命周期

组件的生命周期：指的是组件自身的一些钩子函数，这些函数在特定的时间节点时被自动触发。
组件的生命周期函数需要在 lifetimes 字段内声明
组件的生命周期函数有5个： created（组件实例创建完毕）、attached（模版解析完成挂载到页面）、ready（组件渲染完成）、moved、detached（组件被销毁）
注意：自定义组件的created生命周期函数中不能使用setData，只能添加一些自定义的属性，可以通过this方法添加；一般在attached生命周期函数中做一些页面交互的执行。

  //组件实例被创建好后执行,此时不能再调用setData，在attached中使用，只能添加一些自定义的属性，可以通过this方式添加
    created() {
      console.log("created");
      //添加自定义属性
      this.test = "测试"
    },
    //组件被初始化完毕，模版解析完成，已经把组件挂载到页面上，一般页面中的交互在这执行。
    attached() {
      console.log("attached")
    },
    //组件被销毁时调用，
    detached() {
      console.log("detached")
    }

10、自定义组件所在页面的生命周期

组件还有一些特殊的生命周期，主要用于组件内部监听父组件的展示、隐藏状态，从未放那边组件内部执行一些业务逻辑的处理。
组件所在页面的生命周期有4个：show、hide、resize、routeDone，需要在**pageLifeftimes**字段内进行声明（也是在自定义组件的js文件中）。
在这里插入图片描述

  pageLifetimes:{
    //监听组件所在的页面展示（后台切前台）状态
    show(){

    },
    //监听组件所在页面的隐藏（前台切后台、点击tabBar）状态
    hide(){
      
    }
  }

11、小程序生命周期执行顺序

小程序的生命周期由 应用生命周期、页面生命周期和组件生命周期三部组成。

（1）小程序冷启动，钩子函数的执行顺序：

在这里插入图片描述

（2）保留当前页面和销毁当前页面，进入下一个页面，钩子函数的执行顺序：

在这里插入图片描述

（3）小程序热启动，钩子函数执行顺序：

在这里插入图片描述

12、使用Component构造页面

小程序页面也可以使用Component 方法进行构造
注意事项：
1、要求 .json文件中必须包含usingComonents字段
在这里插入图片描述
2、里面的配置项需要和ComPonent中的配置保持一致。
3、页面中Page 方法 有一些钩子函数、事件监听方法，这些钩子函数、事件监听方法必须在methods对象中
4、组件的属性 properties也可以接受页面的参数，在onLoad钩子函数中可以通过this.data进行获取。

为什么需要使用Component方法进行构造页面？

Component方法功能比Page 方法强大很多，如果使用Component方法构造页面，可以实现更加复杂的页面逻辑开发。

13、组件的复用机制**Behavior（{}）**

小程序的behavios方法是一种代码复用的方式，可以将一些通用的逻辑和方法提取出来，然后在多个组件中复用，然后在多个组件中复用，从而减少代码冗余，提高代码的可读性。

使用Behavior()方法，每个behavior可以包含一组属性、数据、生命受气函数和方法
组件引用它时，它的属性、数据和方法会被合并到组件中，生命周期函数也会在对应时机被调用。

在组件中新建一个behavior文件，将一些公用的属性，数据，方法导出

const behavior = Behavior({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    num: 9
  },

  /**
   * 组件的方法列表
   */
  methods: {
    sendData() {
      this.triggerEvent('myevent', this.data.num);
    }

  },

  //用于监听数据属性是否发生了变化
  // observers: {
  //   //key：需要监听的数据
  //   //value:就是一个回调函数，形参：最新的数据
  //   num: function (newNum) {
  //   },

  //   //同时监听多个数据使用字符串，用逗号分隔
  //   "num，count": function (newNun, NewCount) {
  //   },
  //   //支持监听属性，以及内部数据的变化，使用数据路径
  //   "obj.name": function (newName) {
  //   },
  //   "arr[1]": function (newItem) {
  //     console.log(newItem)
  //   },
  //   //监听所有属性的变化使用通配符：**
  //   "obj.**": function (newObj) {
  //     console.log(newObj)
  //   }
  // }
  //组件生命周期生命对象
  // lifetimes: {

  //   //组件实例被创建好后执行,此时不能再调用setData，在attached中使用，只能添加一些自定义的属性，可以通过this方式添加
  //   created() {
  //     console.log("created");
  //     //添加自定义属性
  //   },
  //   //组件被初始化完毕，模版解析完成，已经把组件挂载到页面上，一般页面中的交互在这执行。
  //   attached() {
  //     console.log("attached")
  //   },
  //   //组件被销毁时调用，
  //   detached() {
  //     console.log("detached")
  //   }
  // },

  // pageLifetimes:{
  //   //监听组件所在的页面展示（后台切前台）状态
  //   show(){

  //   },
  //   //监听组件所在页面的隐藏（前台切后台、点击tabBar）状态
  //   hide(){

  //   }
  // }
});

export default behavior;

组件的js文件引入behavior，并注册

import behavior from "./behavior"
Component({
  behaviors: [behavior]
})

注意：如果组件和behavior相同情况：

  • properties 相同，则采用就近原则，使用组件内部的数据
  • data 相同，如果是对象类型，属性会进行合并，如果不是对象类型的数据，就近原则，展示的以组件内部为准。
  • methods 相同:则采用就近原则，使用组件内部的数据
  • lifetimes 相同：如果存在相同的生命周期函数，生命周期函数都会被触发。先执行behavior里面的生命周期函数，再执行组件年内部的生命周期函数。

14、外部样式类——externalClassess定义若干个外部样式类

默认情况下，组件和组件使用者之间如果存在相同的类名，不会相互影响，组件使用者如果想自改组件的样式，需要就解除样式隔离。但是解除样式隔离后，在极端情况下，会产生样式冲突、css嵌套太深等问题，从而给我们开发带来一定的麻烦。

外部样式类：使用组件时，组件使用者可以给组件传入css类名，通过传入的类名修改组件的样式。
如果需要使用外部样式类修改组件的样式，在Component 中需要用 externalClasses若干外部样式类。

//自定义组件的js文件
Component({
  externalClasses:[],
})
//自定义组件的wxml组件
<view class="my-class box"> </view>

//父组件
<custom-checkbox  extend-class="my-class"></custom-checkbox>

//父组件的wxss文件
.my-class{
color:lightsalmon !important;
}

注意：
如果在同一个节点上，存在外部样式类和普通内部样式类，两个类的优先级都是未定义的。建议：在使用在不样式类时，样式需要通过 ！important添加权重

15、自定义组件总结：

在这里插入图片描述

自定义组件开发文档

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

2023 广东省大学生程序设计竞赛(部分题解)

2023 广东省大学生程序设计竞赛(部分题解)

目录 A - Programming Contest B - Base Station Construction C - Trading D - New Houses E - New but Nostalgic Problem I - Path Planning K - Peg Solitaire A - Programming Contest 签到题&#xff1a;直接模拟 直接按照题目意思模拟即可&#xff0c;为了好去…
阅读更多...
labview强制转换的一个坑

labview强制转换的一个坑

32位整形强制转换成枚举的结果如何&#xff1f; 你以为的结果是 实际上的结果是 仔细看&#xff0c;枚举的数据类型是U16&#xff0c;"1"的数据类型是U32&#xff0c;所以转换产生了不可预期的结果。所以使用强制转换时一定要保证两个数据类型一致&#xff0c;否则…
阅读更多...
04 - 步骤 JSON input

04 - 步骤 JSON input

简介 Kettle 的 JSON Input 步骤是用于从 JSON 格式的数据源中读取数据的步骤。它允许用户指定 JSON 格式的输入数据&#xff0c;然后将其转换成 Kettle 中的行流数据&#xff0c;以供后续的数据处理、转换和加载操作使用。 使用 场景 1、拖拽到面板 2、指定JSON input 为 K…
阅读更多...
正点原子[第二期]Linux之ARM（MX6U）裸机篇学习笔记-9.1-LED灯（模仿STM32驱动开发实验）

正点原子[第二期]Linux之ARM（MX6U）裸机篇学习笔记-9.1-LED灯（模仿STM32驱动开发实验）

前言&#xff1a; 本文是根据哔哩哔哩网站上“正点原子[第二期]Linux之ARM&#xff08;MX6U&#xff09;裸机篇”视频的学习笔记&#xff0c;在这里会记录下正点原子 I.MX6ULL 开发板的配套视频教程所作的实验和学习笔记内容。本文大量引用了正点原子教学视频和链接中的内容。…
阅读更多...
阿里云开源大模型开发环境搭建

阿里云开源大模型开发环境搭建

ModelScope是阿里云通义千问开源的大模型开发者社区&#xff0c;本文主要描述AI大模型开发环境的搭建。 如上所示&#xff0c;安装ModelScope大模型基础库开发框架的命令行参数&#xff0c;使用清华大学提供的镜像地址 如上所示&#xff0c;在JetBrains PyCharm的项目工程终端控…
阅读更多...
【IDEA】IDEA自带Maven/JDK，不需要下载

【IDEA】IDEA自带Maven/JDK，不需要下载

IDEA是由Java编写的&#xff0c;为了保证其运行&#xff0c;内部是自带JDK的。IDEA 2021 及 之后的版本是自带Maven的&#xff1a; 视频连接&#xff1a; https://www.bilibili.com/video/BV1Cs4y1b7JC?p4&spm_id_frompageDriver&vd_source5534adbd427e3b01c725714cd…
阅读更多...
3-4STM32C8T6按键控制LED开与关

3-4STM32C8T6按键控制LED开与关

实物接线如下&#xff1a; 为了代码的简洁性&#xff0c;这里需要对LED与KEY进行封装如下&#xff1a; #include "stm32f10x.h" // Device headervoid LED_Init(void) {RCC_APB2PeriphClockCmd(RCC_APB2Periph_GPIOA, ENABLE);GPIO_InitTypeDef GP…
阅读更多...
粤嵌gec6818开发板-播放视频、音频文件（管道文件控制）

粤嵌gec6818开发板-播放视频、音频文件（管道文件控制）

前段时间做了一个项目&#xff0c;用到了linux环境下gec6818开发板播放视频、音频文件&#xff0c;在这里给大家分享一下。 这里使用的方法是利用mplayer播放器进行播放&#xff0c;首先先给开发板装上mplayer播放器&#xff0c;这里就不详细说明了。 我用的是管道文件来控制视…
阅读更多...
如何解决DA14531编译工程出现大量报错的问题

如何解决DA14531编译工程出现大量报错的问题

在编译DA14531某个工程时&#xff0c;在这台电脑可以编译&#xff0c;另外一台电脑就编译不过&#xff0c;出现很多错误问题。那要怎样处理呢&#xff1f; 建议安装新MDK版本 可能是MDK版本问题&#xff0c;在不同的电脑安装不同的MDK版本&#xff0c;用新的版本可以编译通过&…
阅读更多...
ZABAPGIT问题，导入github上的程序包时报 DBSQL_DUPLICATE_KEY_ERROR

ZABAPGIT问题，导入github上的程序包时报 DBSQL_DUPLICATE_KEY_ERROR

跟踪程序发现在94050行 INSERT seocompotx FROM TABLE it_descriptions 报的错 刚开始&#xff0c;不想着改动他&#xff0c;把seocompotx 表的数据做下指定清楚&#xff0c;但是5次清楚后&#xff0c;果断注释掉 改成 MODIFY seocompotx FROM TABLE it_descriptions。 在用…
阅读更多...
Winfrom —— 计算阶乘

Winfrom —— 计算阶乘

首先搭建一个界面 创建listBox输入框进行输入内容 界面图如下 计算按钮的事件 private void button1_Click(object sender, EventArgs e) {if (textBox1.Text.Length 0){textBox1.Text "";}else{int n 1;int sum 1;n Convert.ToInt32(textBox1.Text);for (; n…
阅读更多...
成像测井基础-1

成像测井基础-1

一、成像测井系统简介 成像测井是一种能探测地层的某个特性(如岩石成分、孔隙度、渗透率)在以井轴为垂直坐标(z)、以井径为径向坐标、以方位角为方向坐标(θ)的柱状坐标系(r&#xff0c;θ,z )中分布的测井方法&#xff0c;且可以按井壁的展开平面或沿某个方位的剖面进行图像显…
阅读更多...
Hi3519AV100 处理器⾼速全局快⻔相机

Hi3519AV100 处理器⾼速全局快⻔相机

⾼速全局快⻔相机采⽤ 1英⼨全局快⻔ Sensor&#xff0c;⽀持 H.264/H.265 编码&#xff0c;8 百万 分辨率模式下最⾼帧率可达 50 帧/秒&#xff0c;1080P 模式下最⾼帧率可达 120 帧/秒。主控采⽤ Hi3519AV100 处理器&#xff0c;集成 2 Tops AI 算⼒ NPU &#xff0c;⽀持⼤…
阅读更多...
必应广告投放怎么做？怎么开户推广？

必应广告投放怎么做？怎么开户推广？

今天搜索引擎广告依旧是企业提升品牌知名度、吸引潜在客户的关键渠道之一&#xff0c;必应Bing&#xff0c;作为全球第二大搜索引擎&#xff0c;不仅拥有庞大的用户基础&#xff0c;更以其精准的定向能力和高效的转化效率&#xff0c;成为众多企业拓展市场的优选平台。 一、必…
阅读更多...
Mysql_数据库事务

Mysql_数据库事务

文章目录 &#x1f60a; 作者&#xff1a;Lion J &#x1f496; 主页&#xff1a; https://blog.csdn.net/weixin_69252724 &#x1f389; 主题&#xff1a; MySQL__事务&#xff09; ⏱️ 创作时间&#xff1a;2024年04月26日 ———————————————— 这里写目…
阅读更多...
基于python的舞蹈经验分享交流网站django+vue

基于python的舞蹈经验分享交流网站django+vue

1.运行环境&#xff1a;python3.7/python3.8。 2.IDE环境&#xff1a;pycharmmysql5.7/8.0; 3.数据库工具&#xff1a;Navicat11 4.硬件环境&#xff1a;windows11/10 8G内存以上 5.数据库&#xff1a;MySql 5.7/8.0版本&#xff1b; 运行成功后&#xff0c;在浏览器中输入&am…
阅读更多...
Nginx负载均衡主备模式

Nginx负载均衡主备模式

1. 背景 使用Nginx代理后端服务&#xff0c;有时候某些服务是不能使用多台负载均衡&#xff0c;但又想保障高可用&#xff0c;所以采用主备模式&#xff0c;记录如下&#xff1a; 2. 参考 nginx 负载均衡Nginx-负载均衡-后端状态max_conns、down、backup、max_fails、fail_t…
阅读更多...
Docker: 如何不新建容器 修改运行容器的端口

Docker: 如何不新建容器 修改运行容器的端口

目录 一、修改容器的映射端口 二、解决方案 三、方案 一、修改容器的映射端口 项目需求修改容器的映射端口 二、解决方案 停止需要修改的容器 修改hostconfig.json文件 重启docker 服务 启动修改容器 三、方案 目前正在运行的容器 宿主机的3000 端口 映射 容器…
阅读更多...
修改Docker容器内文件的三种方式

修改Docker容器内文件的三种方式

说明&#xff1a;本文介绍修改Docker容器内文件的三种方式 方式一&#xff1a;直接修改 敲下面的命令&#xff0c;进入Docker容器&#xff0c;如mysql docker exec -it mysql /bin/bash修改mysql的配置文件&#xff0c;/etc/my.cnf vim /etc/my.cnf如下&#xff0c;如果vim…
阅读更多...
【机器学习】基于扩散模型的文本到音频生成：突破数据局限，优化音频概念与实践顺序

【机器学习】基于扩散模型的文本到音频生成：突破数据局限，优化音频概念与实践顺序

基于扩散模型的文本到音频生成&#xff1a;突破数据局限&#xff0c;优化音频概念与时间顺序 一、现有模型的局限与挑战二、偏好数据集的构建与利用三、Diffusion-DPO损失的应用与模型微调四、实例与代码展示五、总结与展望 随着数字化技术的迅猛发展&#xff0c;音乐和电影行业…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023