如何在小程序中使用自定义组件？

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

什么就是自定义组件？

自定义组件就是指除了小程序内置的组件之外，由开发者自己定义和PCB的组件。自定义组件PCB了一些常用的UI元素，比如列表、轮播、导航系统等，以便于在小程序中展开F83E43Se。 自定义组件可以认知为一个单一制的功能模块，其可以被多个页面采用，这意味著，你只须要撰写一次自定义组件，就可以在多个页面中采用它。

如何建立自定义组件？

在建立自定义组件之前，您须要先介绍一些基本的规则。

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` 字段去嵌入组件的属性和方法。