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

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.hqwc.cn/news/661948.html

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

相关文章

UnityAssetStore免费好用的插件（持续更新）

UnityAssetStore免费好用的插件（持续更新）

一、特效插件 1、Cartoon FX Remaster Free Cartoon FX Remaster Free插件有100款左右的特效。获取Cartoon FX Remaster Free插件 2、Particle Pack Particle Pack插件有多款火焰特效以及各种溶解粒子效果。获取Particle Pack插件 3、War FX 该资源包可以有不同的火焰效果…
阅读更多...
【C语言】指针篇- 深度解析Sizeof和Strlen：热门面试题探究（5/5)

【C语言】指针篇- 深度解析Sizeof和Strlen：热门面试题探究（5/5)

&#x1f308;个人主页&#xff1a;是店小二呀 &#x1f308;C语言笔记专栏&#xff1a;C语言笔记 &#x1f308;C笔记专栏&#xff1a; C笔记 &#x1f308;喜欢的诗句:无人扶我青云志 我自踏雪至山巅 文章目录 一、简单介绍Sizeof和Strlen1.1 Sizeof1.2 Strlen函数1.3 Sie…
阅读更多...
【C++】详解string类

【C++】详解string类

目录 简介 框架 构造 全缺省构造函数 ​编辑 传对象构造函数 拷贝构造 析构函数 容量 size() capacity&#xff08;&#xff09; empty() clear() reserve() ​编辑 resize() 遍历 检引用符号"[ ]"的重载 迭代器 begin() end() rbegin() rend(…
阅读更多...
PhpAdmin-getshell

PhpAdmin-getshell

PhpAdmin-getshell 通过未授权成功写入&#xff0c;然后getshell 路径&#xff1a;C:\phpstudy_pro\Extensions\MySQL5.7.26\ 写入木马&#xff1a; into写入文件&#xff1a; 使用需看要secure_file_priv的值。 当value为“null”时&#xff0c;不允许读取任意文件 当value为…
阅读更多...
JavaEE 初阶篇-深入了解网络原理中传输层的端口号与 UDP 协议报文格式

JavaEE 初阶篇-深入了解网络原理中传输层的端口号与 UDP 协议报文格式

&#x1f525;博客主页&#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文章目录 1.0 端口号概述 1.1 端口号的作用 1.2 端口号不能重复被多个进程绑定 2.0 传输层协议 - UDP 2.1 UDP 的特性 2.2 UDP 的报文格式 1.0 端口号概述 端口号是计算机网络中…
阅读更多...
AI视频教程下载：用 ChatGPT 和 WordPress 创建赚钱网站

AI视频教程下载：用 ChatGPT 和 WordPress 创建赚钱网站

您是否有兴趣开设网站&#xff08;博客&#xff09;&#xff0c;但不知道从何入手&#xff1f; 或者您已经开设了网站&#xff08;博客&#xff09;&#xff0c;但难以从中获利&#xff1f; 别找啦&#xff01; 本课程旨在教授您使用 WordPress 创建成功盈利网站&#xff08;博…
阅读更多...
汽车CAN总线技术详解

汽车CAN总线技术详解

1. 历史 2. 应用 3. 优点 4. 基础概念 5. 组成 6. 应用 7. 网关 8. 波形分析 参考文献 汽车CAN总线技术详解&#xff08;100多页支持下载&#xff09;
阅读更多...
8、ftp使用教程

8、ftp使用教程

ftp使用教程 1、FTP概述&#xff1a;2、ftp主动模式和被动模式3、配置说明4、多用户配置5、异常6、ftp命令附录 1、FTP概述&#xff1a; ​ FTP是文件传输协议&#xff08;File Transfer Protocal&#xff09;的简写&#xff0c;主要完成与远程计算机的文件传输。 FTP采用客户…
阅读更多...
【Unity动画系统】详解Root Motion动画在Unity中的应用（一）

【Unity动画系统】详解Root Motion动画在Unity中的应用（一）

Root Motion动画与普通动画的区别 普通动画&#xff1a;动画文件里记录的是物体的绝对坐标和方向&#xff0c;在播放动画时&#xff0c;Unity会根据Animation中记录的值&#xff0c;直接修改游戏对象的坐标和方向&#xff0c;每一帧的坐标和方向都是通过插值计算得出来的&…
阅读更多...
TouchGFX 总结

TouchGFX 总结

文章目录 使用中文字体多屏幕间交换数据UI to MCUMCU to UI API文档参考横竖屏切换 使用中文字体 添加一个textArea&#xff0c;默认的英文文本可见&#xff0c;输入中文字体后就看不见了&#xff0c;是因为这个默认的字体不支持中文&#xff0c;改一下字体就可以了&#xff1…
阅读更多...
『大模型笔记』Code Example: Function Calling with ChatGPT

『大模型笔记』Code Example: Function Calling with ChatGPT

Code Example: Function Calling with ChatGPT 文章目录 一. Code Example: Function Calling with ChatGPT二. 参考文献一. Code Example: Function Calling with ChatGPT from openai import OpenAI from dotenv import load_dotenv import json# --------------------------…
阅读更多...
【软件开发规范篇】JAVA后端开发编码格式规范

【软件开发规范篇】JAVA后端开发编码格式规范

作者介绍&#xff1a;本人笔名姑苏老陈&#xff0c;从事JAVA开发工作十多年了&#xff0c;带过大学刚毕业的实习生&#xff0c;也带过技术团队。最近有个朋友的表弟&#xff0c;马上要大学毕业了&#xff0c;想从事JAVA开发工作&#xff0c;但不知道从何处入手。于是&#xff0…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023