微信小程序的自定义组件的开发细节很多，我们需要重点关注几个核心点：

几个流行的前端框架（Vue / React / Angular）都在一定程度上遵循了Web组件规范，微信小程序的自定义组件也是如此。

这是组件化的最直接优势。如果不使用组件，则每次遇到相同的业务场景时都需要重写代码，并且分离的组件可以在其适用的场景中重用，这在一定程度上减少了开发时间。

减少代码维护的难度

想象一下，如果页面的所有UI源代码都集中在同一个HTML文件中，则当页面中的导航栏出现错误时，您需要在数千甚至数十个HTML文件中找到对应的导航栏数千行HTML标签。

如果导航栏分为一个组件，则只需查看该组件。这种情况在工作中很常见，该示例可以充分说明组件化在降低代码维护难度方面的优势。

减少系统重建的难度

提到“重构-改进现有代码的设计”：当系统复杂性增加到一定水平并且难以维护时，重构不是一次性行为，而是每天高频，小规模的重构行为。

坦率地说，无论重构范围有多小，都应该通过重构不断改进系统。但是，这种做法对代码的可维护性提出了极大的挑战，这间接地说明了组件化对重构工作的积极影响：通过提高代码的可维护性，间接减少了重构系统的难度。

微信小程序的自定义组件是小程序开发领域中组件化的具体实践，具有上述三个优点。无论是工作还是面试，开发出色的自定义组件的能力都是衡量小程序开发人员（甚至是前端开发人员）的核心指标之一。

要为微信小程序创建自定义组件，您需要使用组件构造器，这是微信小程序结构系统中最小的粒度构造器。最外层是页面构造器，最外层是应用程序构造器。

从外到内是App> Page> Component，每个级数都是1：N关系：

1个应用程序（即1个小程序）可以包含N（N> = 1）个页面； 1页可以包含N（N> =1）个组件。

每个自定义组件的资源必须包括四个基本文件：

与传统的前端开发相比，小程序自定义组件的wxml和wxss文件的写入方法基本上类似于HTML和CSS。不要特别注意。区别主要体现在js和json文件中。

必须通过json文件中的component字段将该组件声明为自定义组件，如下所示：

{

"component": true

}

由js文件中的Component构造函数创建的组件的逻辑实体如下：

Component({

behaviors:[],

properties:{},

data: {},

lifetimes: {},

pageLifetimes: {},

methods: {}

});

除了4个基本文件之外，自定义组件还可以包含一些其他必要的资源，例如图片。

您可以看到，除了wxml / wxss / js / json文件之外，还有两个图像文件小程序，可以由wxml中的相对目录直接引用，如下所示：

<image src="./photo.png">image>

对于组件，生命周期是指从组件创建到破坏的过程。在此过程的里程碑阶段，将公开一些挂钩函数，以方便开发人员为不同阶段编写逻辑。这些功能称为“生命周期功能”。

微信小程序自定义组件的生命周期功能如下：

与Vue和React相比，小程序自定义组件的生命周期更接近于Web组件规范。

比较Web组件规范和小程序自定义组件的生命周期，两者具有某些相似之处，但并不完全相同，总结了以下几点：

附加函数和分离函数分别对应于Web组件规范的connectedCallback和断开连接回调，并且在功能上是一致的；

已移动的功能类似于Web组件规范采用的Callback，但功能并不完全相同。由于小应用程序不支持iframe，因此文档类别中的组件不会迁移，只能在同一文档的不同父节点之间迁移。因此，没有采用状态，并且移动的功能可以理解为采用的变体；

与Vue / React不同，小程序没有类似于Vuex或Redux的数据流管理模块，因此小程序的自定义组件之间的通信过程采用了相对原始的事件驱动模型，即子程序组件引发事件将数据传递到父组件，然后父组件通过属性将数据传递到子组件。

除了事件驱动的通信之外，小程序还提供了一种更简单，更粗鲁的方法：

父组件可以通过selectComponent方法直接获得子组件的实例对象，然后可以访问此子组件的任何属性和方法。然后，该子组件的某个属性通过属性传递给另一个子组件。

相比之下，事件驱动方法在过程中更优雅，更可控，因此通常建议使用事件驱动通信方法。

如果您想真正理解组件化的思想，建议您参考小程序的文档，尝试实现一个小程序自定义组件。