【愚公系列】《微信小程序与云开发从入门到实践》029-自定义组件基础

原创

愚公搬代码

发布于 2025-01-21 00:01:07

3310

标题	详情
作者简介	愚公搬代码
头衔	华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。
近期荣誉	2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主等。
博客内容	.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
欢迎	👍点赞、✍评论、⭐收藏

🚀前言

随着移动互联网的快速发展，微信小程序作为一种新兴的应用形态，已经成为了众多开发者和企业的重要选择。它不仅拥有广泛的用户基础，还具备轻便、便捷的特点，能够实现丰富的功能和良好的用户体验。而在小程序的开发过程中，自定义组件的使用则是提升代码复用性和维护性的重要手段。

本文将深入探讨微信小程序自定义组件的基础知识。我们将为您介绍自定义组件的概念、创建方法以及使用场景，帮助您在小程序开发中更高效地构建复杂的用户界面。无论您是小程序开发的新手，还是希望进一步提升开发技能的老手，相信本文都能为您提供有价值的参考。

让我们一起踏上探索自定义组件的旅程，掌握这一重要技能，为您的小程序开发增添更多可能性！

🚀一、自定义组件基础

在小程序开发框架中提供了非常丰富的内置组件，很多时候，自定义组件也是在这些内置组件的基础上进行组合和扩展而来的。

🔎1.创建一个自定义组件

创建组件文件夹
- 在示例工程的根目录下，首先新建一个名为 component 的文件夹，用来存放你创建的自定义组件。
创建页面文件
- 在 pages 文件夹下，创建一组名为 customComponent 的页面文件，用于演示自定义组件。
自定义组件的文件结构
- 自定义组件与页面类似，也是由四个文件组成：
  - JSON 文件：负责组件的配置。
  - WXML 文件：负责组件的结构。
  - WXSS 文件：负责组件的样式。
  - JavaScript 文件：负责组件的数据和逻辑。
使用微信开发者工具创建自定义组件
- 你可以在 component 文件夹下新建一组名为 component1 的自定义组件文件。无需手动创建每个文件，微信开发者工具提供了相应的创建工具：
  - 右键点击 component 文件夹，选择弹出菜单中的“新建 Component”选项，工具会自动为你创建所需的文件。
观察 component1.json 文件
- 创建完成后，首先查看 component1.json 文件中默认生成的代码：{ "component": true, "usingComponents": {} }
  - component 设置为 true，标志着这是一个自定义组件。
编写组件结构（component1.wxml）
- 在 component1.wxml 文件中，编写组件的结构代码：<view> <view style="text-align: center;">{{title}}</view> <slot></slot> </view>
  - 这里使用了 slot 插槽，允许在使用自定义组件时，将内部的元素插入到指定位置。
定义组件的外部属性（component1.js）
- 在 component1.js 文件中，定义组件的外部属性。这里我们定义了一个名为 title 的属性，用来设置标题文本：Component({ properties: { title: { type: String, value: "自定义组件的标题" } } });
  - title 的类型为 String，默认值为 "自定义组件的标题"。
在页面中使用自定义组件
- 在 customComponent.json 文件中，注册使用自定义组件，代码如下：{ "usingComponents": { "component1": "../../component/component1/component1" } }
  - 注意引入的路径要正确，确保 component1 组件能够正确加载。
在页面中使用自定义组件（customComponent.wxml）
- 在 customComponent.wxml 中使用自定义组件，代码如下：<component1 title="按钮组"> <view style="display: flex; flex-direction: row; justify-content: space-between;"> <button type="primary" size="mini">按钮1</button> <button type="primary" size="mini">按钮2</button> <button type="primary" size="mini">按钮3</button> </view> </component1>
  - 通过 title 属性设置组件标题。
  - 使用 slot 插槽，组件内部的内容（按钮）将被插入到 slot 标签所在的位置。
运行并体验效果
- 在微信开发者工具中运行你的代码，查看自定义组件的效果。你会看到标题“按钮组”以及按钮组的显示效果。

🔎2.关于 Component 组件构造器

🦋2.1 `Component` 构造器概述

在开发自定义组件时，页面的数据和方法是通过 Page 构造器配置的，自定义组件也是通过 Component 构造器来进行配置。下面我们将详细介绍 Component 构造器中传入的可配置属性，以及其内部封装的一些方法。

🦋2.2 `Component` 构造器参数对象的属性

Component 构造器接受一个配置对象，配置对象的属性如下表所示：

属性名	类型	说明
`properties`	对象	配置组件的外部属性，允许指定属性类型、默认值等。
`data`	对象	组件内部使用的数据。
`observers`	对象	组件的数据监听器，可以监听 `properties` 和 `data` 的变化。
`methods`	对象	组件的内部方法。
`behaviors`	数组	混入到组件中的行为。
`created`	函数	组件创建时的生命周期函数。
`attached`	函数	组件挂载到页面时的生命周期函数。
`ready`	函数	组件准备就绪时的生命周期函数。
`moved`	函数	组件从一个页面移动到另一个页面时的生命周期函数。
`detached`	函数	组件从页面中卸载时的生命周期函数。
`relations`	对象	定义组件间的关系。
`externalClasses`	数组	定义组件可接收的外部样式类。
`options`	对象	组件的选项对象。
`lifetimes`	对象	组件的生命周期声明对象。
`pageLifetimes`	对象	组件所在页面的生命周期声明对象。
`definitionFilter`	函数	定义过滤器，用于组件扩展。

🦋2.3 `properties` 配置项

在 Component 中，properties 是非常重要的配置项，它用于定义组件的外部属性（即父组件传递给当前组件的数据）。每个属性都可以指定类型、默认值、回调函数等。具体的配置对象如下表所示：

属性名	类型	说明
`type`	数组	属性的类型，例如 `String`、`Number`、`Boolean` 等。
`optionalTypes`	数组	可选类型。
`value`	任意类型	属性的初始值。
`observer`	函数	当属性值变化时的回调函数。

🦋2.4 组件实例对象的属性和方法

在组件的方法、生命周期函数以及监听回调中，可以使用 this 关键字来访问组件实例对象。以下是 Component 构造器生成的组件实例对象可以访问的属性和可调用的方法。

☀️2.4.1 可访问的属性

属性名	类型	说明
`id`	字符串	获取组件节点的 ID。
`dataset`	对象	获取组件节点的 `dataset` 数据。
`data`	对象	获取组件的数据。
`properties`	对象	获取组件的外部属性。
`pageRouter`	对象	获取组件所在页面的路由对象。

☀️2.4.2 可调用的方法

方法名	参数	说明
`setData`	`data`（Object）	设置组件的 `data` 数据，并触发视图更新。
`triggerEvent`	`name`（String）, `detail`（Object）, `options`（Object）	触发自定义事件。
`createSelectorQuery`	无	创建一个选择器对象，用于获取组件实例。
`createIntersectionObserver`	无	创建一个 `IntersectionObserver` 对象，用来判断节点是否可见。
`createMediaQueryObserver`	无	创建一个 `MediaQueryObserver` 对象，用来监听 `media query` 状态的变化。
`selectComponent`	`selector`（String）	使用选择器选择组件实例节点，返回匹配到的第一个实例。
`selectAllComponents`	`selector`（String）	使用选择器选择组件实例节点，返回匹配到的所有实例。
`getRelationNodes`	`relationKey`（String）, `callback`（Function）	获取指定关系所对应的所有关联节点。
`setUpdatePerformanceListener`	`listener`（Function）	设置性能更新监听器。
`animate`	`keyframes`（Array）, `duration`（Number）, `callback`（Function）	执行关键帧动画。
`clearAnimation`	`callback`（Function）	清除关键帧动画。

🦋2.5 数据修改与视图更新

在组件内部，可以通过 this.data 来访问组件的数据，但直接修改 this.data 不会同步更新视图。为了触发视图更新，必须使用 this.setData() 方法进行数据修改。

🔎3.组件的生命周期

🦋3.1 组件生命周期方法

组件的生命周期方法用于管理组件从创建到销毁的整个过程。与页面的生命周期不同，组件除了拥有自身的生命周期方法外，还可以通过 pageLifetimes 选项来感知和响应页面的生命周期。

☀️3.1.1 组件本身的生命周期方法

方法名	意义
`created`	组件实例被创建时执行的回调方法。此时组件的数据未准备好，不能调用 `setData`。
`attached`	组件实例被挂载到页面时的回调方法。
`ready`	组件在视图层布局完成后的回调方法。
`moved`	组件在节点树中的位置移动时的回调方法。
`detached`	组件被从页面节点树移除时的回调方法。
`error`	组件发生错误时的回调方法。

☀️3.1.2 生命周期方法说明

created：当组件实例被创建时调用。此时，组件的数据尚未准备好，不能调用 setData 方法进行数据修改。
attached：当组件被挂载到页面时调用，这时可以开始访问组件的数据和界面。
ready：组件的视图渲染完成时调用，通常在这里进行视图相关的初始化操作。
moved：当组件在父容器中位置发生变化时调用，主要用于处理位置变化的相关逻辑。
detached：组件从页面的 DOM 树中移除时调用，通常在这里进行清理操作，如销毁定时器等。
error：当组件内部发生错误时调用，通常用于捕获错误并进行处理。

🦋3.2 `pageLifetimes` 选项

pageLifetimes 选项使得组件可以感知并响应其所在页面的生命周期变化。这是组件与页面生命周期交互的一种方式。

方法名	意义
`show`	当组件所在的页面被展示时的回调方法。
`hide`	当组件所在的页面被隐藏时的回调方法。
`resize`	当组件所在的页面尺寸发生变化时的回调方法（如旋转屏幕）。

☀️3.2.1 `pageLifetime`s 方法说明

show：当组件所在的页面被展示时调用，适用于页面重新展示时需要触发的操作。
hide：当组件所在的页面被隐藏时调用，通常用于处理组件隐藏时的资源清理。
resize：当页面尺寸变化时（如旋转屏幕）调用，适用于处理页面布局变化的逻辑。

🦋3.3 总结

组件除了拥有自己的生命周期方法（如 created, attached, ready 等），还可以通过 pageLifetimes 选项感知页面生命周期的变化（如 show, hide, resize）。
组件的生命周期方法帮助开发者在组件的不同阶段进行初始化、资源清理、视图更新等操作。
在 created 生命周期中，组件的 data 尚未准备好，无法调用 setData 方法来更新数据。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S11#重启人生

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S11#重启人生

登录后参与评论

0 条评论

热度