🚀前言

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

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

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

🚀一、自定义组件基础

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

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

1. 创建组件文件夹

   • 在示例工程的根目录下，首先新建一个名为 component 的文件夹，用来存放你创建的自定义组件。

2. 创建页面文件

   • 在 pages 文件夹下，创建一组名为 customComponent 的页面文件，用于演示自定义组件。

3. 自定义组件的文件结构

   • 自定义组件与页面类似，也是由四个文件组成：
     • JSON 文件：负责组件的配置。
     • WXML 文件：负责组件的结构。
     • WXSS 文件：负责组件的样式。
     • JavaScript 文件：负责组件的数据和逻辑。

4. 使用微信开发者工具创建自定义组件

   • 你可以在 component 文件夹下新建一组名为 component1 的自定义组件文件。无需手动创建每个文件，微信开发者工具提供了相应的创建工具：
     • 右键点击 component 文件夹，选择弹出菜单中的“新建 Component”选项，工具会自动为你创建所需的文件。

5. 观察 component1.json 文件

   • 创建完成后，首先查看 component1.json 文件中默认生成的代码：

     {
       "component": true,
       "usingComponents": {}
     }
     

     • component 设置为 true，标志着这是一个自定义组件。

6. 编写组件结构（component1.wxml）

   • 在 component1.wxml 文件中，编写组件的结构代码：

     <view>
       <view style="text-align: center;">{{title}}</view>
       <slot></slot>
     </view>
     

     • 这里使用了 slot 插槽，允许在使用自定义组件时，将内部的元素插入到指定位置。

7. 定义组件的外部属性（component1.js）

   • 在 component1.js 文件中，定义组件的外部属性。这里我们定义了一个名为 title 的属性，用来设置标题文本：

     Component({
       properties: {
         title: {
           type: String,
           value: "自定义组件的标题"
         }
       }
     });
     

     • title 的类型为 String，默认值为 "自定义组件的标题"。

8. 在页面中使用自定义组件

   • 在 customComponent.json 文件中，注册使用自定义组件，代码如下：

     {
       "usingComponents": {
         "component1": "../../component/component1/component1"
       }
     }
     

     • 注意引入的路径要正确，确保 component1 组件能够正确加载。

9. 在页面中使用自定义组件（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 标签所在的位置。

10. 运行并体验效果

    • 在微信开发者工具中运行你的代码，查看自定义组件的效果。你会看到标题“按钮组”以及按钮组的显示效果。

🔎2.关于 Component 组件构造器

🦋2.1 Component 构造器概述

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

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

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

🦋2.3 properties 配置项

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

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

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

☀️2.4.1 可访问的属性

☀️2.4.2 可调用的方法

🦋2.5 数据修改与视图更新

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

🔎3.组件的生命周期

🦋3.1 组件生命周期方法

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

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

☀️3.1.2 生命周期方法说明

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

🦋3.2 pageLifetimes 选项

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

☀️3.2.1 pageLifetimes 方法说明

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

🦋3.3 总结

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