每個(gè)自定義組件由四個(gè)代碼文件組成：

json 文件：用于放置一些最基本的組件配置。
wxml 文件：組件模版。
wxss 文件：組件的樣式，只在組件內(nèi)部節(jié)點(diǎn)上生效（這個(gè)文件是可選的）。
js 文件：組件的js代碼，承載組件的主要邏輯。
這四個(gè)文件與編寫一個(gè)頁(yè)面時(shí)用到的四個(gè)文件非常類似，但也有區(qū)別。下面將介紹如何利用這四個(gè)文件編寫一個(gè)簡(jiǎn)單的自定義組件。

1,現(xiàn)在json文件中聲明這是一個(gè)組件

image.png

2，編寫wxml

image.png

image.png

簡(jiǎn)單的 Component 構(gòu)造器調(diào)用包含3個(gè)定義段： methods 中的方法可以用來包含組件的事件回調(diào)函數(shù)； data 是組件的內(nèi)部數(shù)據(jù)，可以用 this.setData 方法來改變； properties 中聲明這個(gè)組件的屬性，上例中聲明了 title 屬性，這樣，組件外部在使用組件時(shí)就可以指定這個(gè)屬性的值。
4,編寫css

image.png

image.png

6，在wxml中正式使用組件

image.png

image.png

7，效果：

image.png