從小程序基礎庫版本 1.6.3 開始盔沫，小程序支持簡潔的組件化編程。所有自定義組件相關特性都需要基礎庫版本 1.6.3 或更高。
開發(fā)者可以將頁面內的功能模塊抽象成自定義組件冰沙，以便在不同的頁面中重復使用；也可以將復雜的頁面拆分成多個低耦合的模塊执虹，有助于代碼維護拓挥。自定義組件在使用時與基礎組件非常相似。
如何創(chuàng)建和使用自定義組件呢袋励？
創(chuàng)建自定義組件：類似于頁面侥啤，一個自定義組件由 json， wxml茬故， wxss盖灸， js 4個文件組成。
1.要編寫一個自定義組件磺芭，首先需要在 json 文件中進行自定義組件聲明（將 component 字段設為 true 可將這一組文件設為自定義組件）：
{
"component": true
}
2.在 wxml 文件中編寫組件模板
<view class="inner">
{{innerText}}
</view>
<slot></slot>
3.在 wxss 文件中加入組件樣式赁炎，它們的寫法與頁面的寫法類似。
.inner {
color: red;
}
注意：在組件wxss中不應使用ID選擇器徘跪、屬性選擇器和標簽名選擇器甘邀。
4.組件的js文件，需要使用 Component() 來注冊組件垮庐，并提供組件的屬性定義松邪、內部數(shù)據(jù)和自定義方法。
Component({
properties: {
// 這里定義了innerText屬性哨查，屬性值可以在組件使用時指定
innerText: {
type: String,
value: 'default value',
}
},
data: {
// 這里是一些組件內部數(shù)據(jù)
someData: {}
},
methods: {
// 這里是一個自定義方法
customMethod: function(){}
}
})
4.使用自定義組件
首先要在需要引用組件的頁面的 json 文件中進行引用聲明逗抑。此時需要提供每個自定義組件的標簽名和對應的自定義組件文件路徑：
{
"usingComponents": {
// 組件名字：組件文件路徑
"component-name": "subpage1"
}
}
5.在頁面中引用組件
<view>
<text>組件頁面</text>
<!-- 以下是對一個自定義組件的引用 -->
<component-name inner-text="我是子組件">
<view>這里是插入到組件slot中的內容</view>
</component-name>
</view>
效果圖：
注意事項
一些需要注意的細節(jié)：
因為 WXML 節(jié)點標簽名只能是小寫字母、中劃線和下劃線的組合寒亥，所以自定義組件的標簽名也只能包含這些字符邮府。
自定義組件也是可以引用自定義組件的，引用方法類似于頁面引用自定義組件的方式（使用 usingComponents 字段）溉奕。
自定義組件和頁面所在項目根目錄名不能以“wx-”為前綴褂傀，否則會報錯。
注意加勤，是否在頁面文件中使用 usingComponents 會使得頁面的 this 對象的原型稍有差異仙辟，包括：
使用 usingComponents 頁面的原型與不使用時不一致同波，即 Object.getPrototypeOf(this) 結果不同。
使用 usingComponents 時會多一些方法叠国，如 selectComponent 未檩。
出于性能考慮，使用 usingComponents 時粟焊， setData 內容不會被直接深復制冤狡，即 this.setData({ field: obj }) 后 this.data.field === obj 。（深復制會在這個值被組件間傳遞時發(fā)生项棠。）
如果頁面比較復雜悲雳，新增或刪除 usingComponents 定義段時建議重新測試一下。
