小程序入门（七）—— 自定义组件

莫凡是莫烦
1,709 阅读5分钟

组件

局部引用组件

在页面的 .json 配置文件中引用组件的方式，叫做“局部引用”。示例代码如下：

image.png

image.png

全局引入组件

image.png

全局引用 VS 局部引用

根据组件的使用频率和范围，来选择合适的引用方式：

  • 如果某组件在多个页面中经常被用到，建议进行“全局引用”

  • 如果某组件只在特定的页面中被用到，建议进行“局部引用

组件和页面的区别

从表面来看，组件和页面都是由 .js、.json、.wxml 和 .wxss 这四个文件组成的。但是，组件和页面的 .js 与.json 文件有明显的不同：

  • 组件的 .json 文件中需要声明 "component": true 属性

image.png

  • 组件的 .js 文件中调用的是 Component() 函数

image.png

  • 组件的事件处理函数需要定义到 methods 节点中

组件样式

1. 组件样式隔离

默认情况下，自定义组件的样式只对当前组件生效，不会影响到组件之外的

UI 结构

好处：

① 防止外界的样式影响组件内部的样式

② 防止组件的样式破坏外界的样式

2.组件样式隔离注意点

  • app.wxss 中的全局样式对组件无效

  • 只有 class 选择器会有样式隔离效果，id 选择器、属性选择器、标签选择器不受样式隔离的影响

建议：在组件和引用组件的页面中建议使用 class 选择器，不要使用 id、属性、标签选择器！

3. 修改组件的样式隔离选项

默认情况下，自定义组件的样式隔离特性能够防止组件内外样式互相干扰的问题。但有时，我们希望在外界能够控制组件内部的样式，此时，可以通过 styleIsolation 修改组件的样式隔离选项，用法如下：

image.png 986faa43f6bb81ecee6766b7d4b72fd.jpg

数据、方法和属性

1.data数据

在小程序组件中，用于组件模板渲染的私有数据，需要定义到 data 节点中，示例如下：

image.png

2. methods 方法

在小程序组件中，事件处理函数和自定义方法需要定义到 methods 节点中，示例代码如下：

C49557937103271B698A15B0E00D0AFE.png 60eed2591c3cf789e9cda9d2dbadd2d.jpg

3. properties 属性

在小程序组件中，properties 是组件的对外属性，用来接收外界传递到组件中的数据，示例代码如下：

2AE50C0B71521970EAFD0B60158BE26C.png

组件传递可设置max的值，同时利用设定的max控制count的最大上限

D4E18E61DE90DF4A5568FACEA6AEE1AF.png

4. data 和 properties 的区别

在小程序的组件中，properties 属性和 data 数据的用法相同，它们都是可读可写的，只不过：

  • data 更倾向于存储组件的私有数据
  • properties 更倾向于存储外界传递到组件中的数据

数据监听器

1. 什么是数据监听器

数据监听器用于监听和响应任何属性和数据字段的变化，从而执行特定的操作。它的作用类似于 vue 中的

watch 侦听器。在小程序组件中，数据监听器的基本语法格式如下：

525E9F082751297A46DD033DABFF1F29.png

具体使用如下：（n1+n2=sum） 933B60728EB611B29D5A8CF62AFC02B6.png

14200F9B4C1B6DE5218EA3F45217B8A8.png 如果某个对象中需要被监听的属性太多，为了方便，可以使用通配符 ** 来监听对象中所有属性的变化，示例

代码如下：

5EC4E133D5EE81DE9136F566D7A25E2B.png

纯数据字段

1. 什么是纯数据字段

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

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

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

2. 使用规则

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

image.png

3. 使用纯数据字段改造数据监听器案例

image.png

组件的生命周期

1. 组件全部的生命周期函数

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

F90971496CD409FE199B281497FEF9EF.png

2. 组件主要的生命周期函数

在小程序组件中，最重要的生命周期函数有 3 个，分别是 created、attached、detached。它们各自的特点

如下：

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

  • 此时还不能调用 setData

  • 通常在这个生命周期函数中，只应该用于给组件的 this 添加一些自定义的属性字段

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

  • 此时， this.data 已被初始化完毕

  • 这个生命周期很有用，绝大多数初始化的工作可以在这个时机进行（例如发请求获取初始数据）

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

  • 退出一个页面时，会触发页面内每个自定义组件的 detached 生命周期函数

  • 此时适合做一些清理性质的工作

3. lifetimes 节点

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

B77B66D44755118B5C8A7F86664D0ECA.png

组件所在页面的生命周期

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

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

例如：每当触发页面的 show 生命周期函数的时候，我们希望能够重新生成一个随机的 RGB 颜色值。

在自定义组件中，组件所在页面的生命周期函数有如下 3 个，分别是：

7F048C3E4DA3AC6B492BAC5913468898.png

B6EF0008256FD224D1AF22362869DA63.png

2. 生成随机的 RGB 颜色值

79E950286209C0BDAC1C66D153D0F497.png

5886EA2BA49C2DA04130DA7B17D7131D.png

**开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 4 天，[点击查看活动详情](https://juejin.cn/post/7194721470063312933 "https://juejin.cn/post/7194721470063312933")**
avatar
文章
阅读
粉丝