前言
在做微信小程序開發(fā)的過程中邮利，我認為組件式開發(fā)是必須要掌握的一種技能庶溶，官方是這樣介紹的：
從小程序基礎庫版本?1.6.3?開始秘症，小程序支持簡潔的組件化編程匪凉。所有自定義組件相關特性都需要基礎庫版本?1.6.3?或更高捌肴。
開發(fā)者可以將頁面內(nèi)的功能模塊抽象成自定義組件，以便在不同的頁面中重復使用藕咏；也可以將復雜的頁面拆分成多個低耦合的模塊状知，有助于代碼維護。自定義組件在使用時與基礎組件非常相似孽查。
到目前為止饥悴，已經(jīng)有很多優(yōu)秀的微信小程序框架，并且里面封裝了很多基礎的且常用的組件盲再，我建議初學者盡量多看看他們的源碼铺坞，會有很大的幫助的。在這里我給大家介紹幾款我認為比較優(yōu)秀的ui框架洲胖。
1.mpvue（基于 Vue.js 的小程序開發(fā)框架济榨，從底層支持 Vue.js 語法和構(gòu)建工具體系。）
2.minui（基于規(guī)范的小程序 UI 組件庫绿映，自定義標簽組件擒滑，簡潔、易用叉弦、工具化）
3.vant-weapp（輕量丐一、可靠的小程序 UI 組件庫）
接下來大家跟著我的步驟一起來操作吧~~（我會帶大家實現(xiàn)一個收藏功能）
官方并沒有明確規(guī)定自定義組件的文件放在哪里，但是為了自己或團隊的方便淹冰，我還是建議大家在根目錄下創(chuàng)建一個components目錄库车，用來存放所有組件。
創(chuàng)建完目錄后樱拴，我們再來看看一個組件需要哪幾部分組成柠衍。
自定義組件類似于頁面，一個自定義組件由?json?wxml?wxss?js?4個文件組成晶乔。例如我們創(chuàng)建一個collection組件珍坊，在components目錄下創(chuàng)建collection目錄。
右鍵點擊collection目錄正罢，選擇新建阵漏，再選擇Components會出現(xiàn)如下輸入框。
在輸入框內(nèi)輸入index后敲回車翻具，會自動幫你創(chuàng)建好自定義組件所需要的文件履怯。（關于index的命名大家可以隨意起），這一點用起來非常方便裆泳。
要編寫一個自定義組件叹洲，首先需要在?json?文件中進行自定義組件聲明（將?component?字段設為?true?可這一組文件設為自定義組件）：
{
????"component": true
}
由于咱們是使用的自動創(chuàng)建方式，所以會自動幫我們聲明好晾虑。如下：
在自定義組件的?js?文件中疹味，需要使用?Component()?來注冊組件，并提供組件的屬性定義帜篇、內(nèi)部數(shù)據(jù)和自定義方法糙捺。
組件的屬性值和內(nèi)部數(shù)據(jù)將被用于組件?wxml?的渲染，其中笙隙，屬性值是可由組件外部傳入的洪灯。
代碼示例：
collection/index.wxml
<view class='collection'>
????<image src='{{collected?"images/heart-fill.png":"images/heart.png"}}'></image>
</view>
collection/index.wxss
.collection {
? ? width:50rpx;
? ? height:50rpx;
}
.collection image {
? ? width:100%;
? ? height:100%;
}
collection/index.js
Component({
????properties: {
????????// 這里定義了collected屬性，屬性值可以在組件使用時指定
? ? ? ??collected: {?
? ??????????type: Boolean,
? ??????????value: false
?????????}
????},
????data: {
????????// 這里是一些組件內(nèi)部數(shù)據(jù)
????},
????methods: {
????????// 這里是一個自定義方法
????????_onCollection: function() {
????????????????let collected = this.properties.collected;
????????????????this.setData({ collected: !collected })
????????????????this.triggerEvent('collected', this.properties.collected);
????????}
????}
})
由于咱們是使用的自動創(chuàng)建方式竟痰，所以會自動幫我們創(chuàng)建好Component構(gòu)造器签钩。關于Component構(gòu)造器的使用大家可以查看官方文檔，里面介紹的非常詳細坏快，我在這里就不再過多說明了铅檩。點擊跳轉(zhuǎn)
使用自定義組件
使用已注冊的自定義組件前，首先要在頁面的?json?文件中進行引用聲明莽鸿。此時需要提供每個自定義組件的標簽名和對應的自定義組件文件路徑昧旨，如我們在index目錄下使用collection組件：
{????
????"usingComponents": {???????
?????????"v-collection": "/components/collection/index"????
????}
}
注意：必須要使用雙引號，單引號會報錯祥得。
其中“v-collection”大家可以自行命名兔沃。
這樣，在頁面的?wxml?中就可以像使用基礎組件一樣使用自定義組件级及。節(jié)點名即自定義組件的標簽名乒疏，節(jié)點屬性即傳遞給組件的屬性值。
代碼示例：
pages/index/index.wxml
<view>
? ? <!--以下是對一個自定義組件的使用>
? ??<v-collection collected='{{collected}}' bind:collected='onCollection' />
</view>
pages/index/index.js
Page({
? ? data: {
? ? ? ? collected: false
????},
? ? onCollection: function(event) {
? ? ? ? let collected = event.detail;
? ? ? ? let str = collected? '收藏成功':'取消收藏';
? ? ? ? console.log(str);
????}
})
組件有兩種寫法：<v-collection />或<v-collection></v-collection>饮焦，大家可以自行選擇
如果在組件內(nèi)使用本地圖片或圖標的話怕吴，我建議大家在當前組件目錄下創(chuàng)建一個images來存放組件所需的圖標，便于日后的維護县踢。
以上代碼可以直接復制使用械哟。
如有疑問歡迎大家下方留言。
附贈一個自己開發(fā)的小程序：（大部分功能全都是由組件構(gòu)成）
