随着小程序的普及，越来越多的开发者开始涉足小程序的开发，而在小程序的开发过程中，组件的使用是不可避免的一部分。 小程序中内置了很多常用组件，例如 button（按钮）、view（视图容器）、text（文本）等，但是这些内置组件并不能满足我们在开发过程中的所有需求，因此，我们需要使用自定义组件来满足更多的需求。

什么是自定义组件？

自定义组件是指除了小程序内置的组件之外，由开发者自己定义和封装的组件。自定义组件封装了一些常见的UI元素，例如列表、轮播、导航等，以便于在小程序中进行复用。 自定义组件可以理解为一个独立的功能模块，其可以被多个页面使用，这意味着，你只需要编写一次自定义组件，就可以在多个页面中使用它。

如何创建自定义组件？

在创建自定义组件之前，您需要先了解一些基本的规则。

1.自定义组件的存放位置必须在 `/components` 目录下。如图所示：

[](https://imgtu.com/i/D5jHlt)

2. 自定义组件的文件名必须以 `.wxml`、`.wxss`、`.js` 和 `.json` 后缀结尾。

3. 自定义组件的 `js` 文件必须 `exports` 出一个自定义 Component。

4. 自定义组件的 `json` 配置文件中， `component` 字段的值必须以 `-` 连接单词，且第一个字母必须小写。

创建自定义组件的详细步骤：

步骤一：首先在小程序的根目录中创建一个 `components` 目录：

[](https://imgtu.com/i/D5P84f)

步骤二：在 `components` 目录下创建一个名为 `my-component` 的目录，并在该目录中创建如下所示的四个文件： `my-component.wxml` 、`my-component.wxss`、 `my-component.js`和 `my-component.json`。

[](https://imgtu.com/i/D5PuWQ)

步骤三：在 `my-component.wxml` 中编写自定义组件的模板：

```html

{{text}}

点击我

```

此处的模板代码实现了一个包含一个文本框和一个按钮的自定义组件。

步骤四：在 `my-component.wxss` 中编写自定义组件的样式：

```css

.container {

display: flex;

align-items: center;

justify-content: center;

flex-direction: column;

}

.btn {

margin-top: 20px;

width: 200px;

height: 40px;

background-color: #369;

color: #fff;

border: none;

outline: none;

box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3);

border-radius: 5px;

}

```

此处的样式代码可以实现居中显示组件，并给按钮添加了样式。

步骤五：在 `my-component.js` 中编写自定义组件的逻辑：

```javascript

Component({

properties: {

text: String,

},

methods: {

onButtonClick() {

console.log('Click the button!');

},

},

});

```

此处的逻辑代码用于添加组件的属性和方法。

步骤六：在 `my-component.json` 中编写自定义组件的配置信息：

```json

{

"component": true,

"usingComponents": {}

}

```

此处的配置文件用于声明当前文件是一个自定义组件，并且可以在其他页面中使用。

使用自定义组件

在创建了自定义组件之后，就可以在其他页面中引用和使用它了。使用自定义组件的步骤如下：

步骤一：在需要使用自定义组件的 `wxml` 文件中添加 `usingComponents` 声明：

```html

```

此处的 `name` 属性是当前页面使用该组件的名称，在该页面的 `wxml` 中可以使用该名称来引用该组件的 UI 和逻辑。`src` 属性则指定自定义组件的路径。

步骤二：在该页面的 `wxml` 中使用刚才声明的自定义组件：

```html

```

此处的 `text` 属性是自定义组件的属性，可以通过 `properties` 字段在自定义组件中定义。

小结

自定义组件在小程序开发中起到非常重要的作用，可以使开发者在开发过程中更加方便、快捷地编写出自己想要的功能和UI。 在实际的开发过程中，使用自定义组件应遵循一些基本的规则，并可以通过 `properties` 和 `methods` 字段来添加组件的属性和方法。