隨著小程序的流行，越來越多的開發(fā)者開始涉足小程序的開發(fā)，而在小程序的開發(fā)過程中，組件的使用是不可避免的一部分。小程序內(nèi)置了很多常用的組件，比如button、view（視圖容器）、text（文本）等，但是這些內(nèi)置組件并不能滿足我們在開發(fā)過程中的所有需求，所以我們需要使用自定義組件。組件以滿足更多需求。

什么是自定義組件？

自定義組件是指除了小程序內(nèi)置的組件之外，開發(fā)者自己定義封裝的組件。自定義組件封裝了一些常用的UI元素，如列表、輪播、導(dǎo)航等，方便在小程序中復(fù)用。自定義組件可以理解為一個(gè)獨(dú)立的功能模塊，可以被多個(gè)頁面使用。這意味著您只需要編寫一次自定義組件，就可以在多個(gè)頁面中使用它。

如何創(chuàng)建自定義組件？

在創(chuàng)建自定義組件之前，您需要了解一些基本規(guī)則。

1. 自定義組件的存放位置必須在`/components`目錄下。如圖所示：

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

2. 自定義組件的文件名必須以“.wxml”、“.wxss”、“.js”、“.json”后綴結(jié)尾。

3. 自定義組件的`js`文件必須`exports`一個(gè)自定義組件。

4. 自定義組件的`json`配置文件中，`component`字段的值必須用`-`連接單詞，且首字母必須小寫。

創(chuàng)建自定義組件的詳細(xì)步驟：

第一步：首先在小程序根目錄下創(chuàng)建一個(gè)`components`目錄：

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

步驟2：在`components`目錄下創(chuàng)建一個(gè)名為`my-component`的目錄，并在該目錄下創(chuàng)建如下所示的四個(gè)文件：`my-component.wxml`、`my-component.wxss`、`my-component .js` 和`my-component.json`。

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

第三步：在`my-component.wxml`中編寫自定義組件的模板：

````html

{{文本}}

點(diǎn)擊我

````

此處的模板代碼實(shí)現(xiàn)了一個(gè)包含文本框和按鈕的自定義組件。

第四步：在`my-component.wxss`中寫入自定義組件的樣式：

````CSS。容器{

顯示：flex；

對齊項(xiàng)目：center；

justify-content:center；

彎曲方向：列；

}

.btn{

邊距頂部：20px；

寬度：200px；

高度：40px；

背景顏色：#369;

顏色：#fff；

邊框：無；

大綱：無；

box-shadow:04px4pxrgba(0,0,0,0.3);

邊框半徑：5px；

}

````

這里的樣式代碼可以將組件顯示在中心，并為按鈕添加樣式。

步驟5：在`my-component.js`中編寫自定義組件的邏輯：

```javascript

成分（{

屬性：{

text:字符串，

},

方法：{

onButtonClick(){

console.log('點(diǎn)擊按鈕！');

},

},

});

````

這里的邏輯代碼用于添加組件的屬性和方法。

第六步：在`my-component.json`中寫入自定義組件的配置信息：

```json

{

'組件':true,

“usingComponents”:{}

}

````

這里的配置文件用于聲明當(dāng)前文件是自定義組件，可以在其他頁面使用。

使用自定義組件

創(chuàng)建自定義組件后，您可以在其他頁面中引用和使用它。使用自定義組件的步驟如下：

第一步：在需要使用自定義組件的`wxml`文件中添加`usingComponents`語句：

````html

````

這里的name 屬性是當(dāng)前頁面使用的組件的名稱。該名稱可以在頁面的“wxml”中使用來引用組件的UI 和邏輯。 `src` 屬性指定自定義組件的路徑。

步驟2：使用剛剛在頁面的`wxml`中聲明的自定義組件：

````html

````

這里的“text”屬性是自定義組件的屬性，可以通過“properties”字段在自定義組件中定義。

概括

自定義組件在小程序的開發(fā)中發(fā)揮著非常重要的作用，可以讓開發(fā)者在開發(fā)過程中更加方便快捷的編寫出自己想要的功能和UI。在實(shí)際開發(fā)過程中，使用自定義組件時(shí)應(yīng)該遵循一些基本規(guī)則，可以通過“properties”和“methods”字段添加組件屬性和方法。