創建組件：
在項目根目錄創建一個名為components 的文件夾，在文件夾中創建一個以組件名命名的子文件夾，在子文件夾上右鍵點擊選擇創建component 這時會在子文件夾內生成4個基礎文件。
引用組件：
1.在需要引用組件的頁面中，找到頁面的.json 配置文件，新增usingComponents 節點
2.在usingComponents 中，通過鍵值對的形式，注冊組件，鍵為注冊的組件名稱，值為組件的相對引用路徑。
3.在頁面的.wxml 文件中，把注冊的組件名稱，以標簽形式在頁面上使用，即可把組件展示在頁面上。
注意： 注冊組件名稱的時候，建議把名稱注冊為以短橫線鏈接的形式，例如： vant-button 或custom-button
{
"usingComponents": {
"test-com": "../../components/test/test"
}
}
<test-com></test-com>
使用樣式美化組件：
組件對應wxss文件，只對組件內的節點生效，編寫組件需注意：
1.組件和引用組件的頁面不能使用id選擇器，屬性選擇器[a]和標簽名選擇器，需該用class類選擇器。
2.組件和引用組件的頁面中使用后台選擇器(.a b) 在一些極端情況下會有非預期的表現。如遇，請避免。
3.子元素選擇器（.a>b） 只能用於view組件遇其子節點，用於其他組件可能導致非預期情況。
4.繼承樣式，如font， color，會從組件外繼承到組件內。
5.出繼承樣式外，app.wxss 中的樣式，組件所在頁面的樣式對對自定義組件無效。
組件的data與methods
使用data定義組件的私有數據：
小程序組件中的data，和小程序頁面中的data用法一致，只不過
1.頁面的data定義在Page（）函數中
2.組件的data定義在Component() 函數中
在組件的js文件中：
1.如果要訪問data中的數據，直接使用this.data 數據名稱即可。
2.如果要為data中的數據重新賦值，調用this.setData(數據名稱，新值) 即可
在組件的.wxml 文件中：
如果要渲染data中的數據，直接使用{{數據名稱}} 即可。
使用methods定義組件的事件處理函數：
和頁面不同，組件的事件處理函數，必須定義在methods節點中，示例代碼如下：
methods: {
btnHandle: function () {
console.log('test')
}
}
組件的properties
1.properties 的作用
類似於vue組件中的props，小程序組件中的properties是組件對外的屬性，用來接收外界傳遞到組件中的數據。
在小程序中，組件的proerties和data的用法類似，他們都是可讀可寫的只不過：
data更傾向於存儲組件內的私有數據。
properties 更傾向於存儲外界傳遞到組件的數據。
聲明properties的兩種方式：
Component({
properties: {
msg: "hello word"
}
})
Component({
properties: {
msg:{
type: string,
value: "hello word"
}
}
})
為組件傳遞properties 的值：
可以使用數據綁定的形式，向子組件的屬性傳遞動態數據，示例代碼：
// 父組件
<view>
<test-com prop-a="data12312312" prop-b="{{abc}}">
</test-com>
</view>
// 子組件
properties: {
propA: String
}
<view>{{propA}}</view>
組件中修改properties 的值：
小程序中，properties的值是可讀可寫的，他的用法與data一致，可以通過setData 修改properties 中的值。
properties: {
propA: String
},
methods: {
btnHandle: function () {
this.setData({
propA : "abc123"
})
}
}
數據監聽器：
數據監聽器可以用於監聽和響應任何屬性和數據字段的變化，從而執行特定的操作，作用類似於vue中的wacth
數據監聽器從小程序基礎庫版本2.61開始支持
監聽器的基本語法如下：
observers: {
"字段A,字段B": function (字段A新值, 字段B新值) {
do something
}
},
組件的生命周期：
組件的生命周期，指的是組件滋生的一些函數，這些函數在特殊時間點或遇到一些特殊的框架事件時被自動觸發。
其中，最重要的生命周期是， created, attached, detached 包含一個組件實例生命流程的最主要時間點。
+組件實例剛剛被創建好時： created 生命周期被觸發，此時還不能調用setData。通常情況下，這個生命周期只應該用於該組件this添加一些自定義屬性字段。
+ 在組件完全初始化完畢，進入頁面節點樹后，attached生命周期被觸發，此時this.tata已被初始化完畢，這個生命周期很有用，絕大多數初始化工作可以在這個時機進行。
+ 在組件離開頁面節點樹后，detached 生命周期被觸發，退出一個頁面時，如果該組件還在頁面節點樹中，則detached會被觸發。
組件可用的全部生命周期
created 組件剛剛被創建時執行
attached 組件實例進入頁面節點樹樹執行
ready 組件在試圖層布局完成后執行
moved 組件被移動到節點樹另一個位置時執行
detached 組件從頁面節點樹移除時執行
error 組件方法拋出錯誤時執行
自定義生命周期函數：
生命周期方法可以直接定義在Component 構造器的第一級參數中。
自小程序基礎庫版本2.23起，組件的生命周期也可以在lifetimes 字段內進行聲明（這是推薦的方法，優先級最高）
Component({
lifetimes: {
attached () {
},
detached () {
}
},
})
組件所在頁面的生命周期:
有一些特殊的生命周期，他們並非於組件有很強的關聯性，但有時組件需要獲知，以便組件內部處理，這樣的生命周期稱為“組件所在頁面的生命周期”，在pageLifetimes 定義段中定義，其中可用的生命周期包括：
show 組件所在頁面被展示時執行
hide 組件所在頁面被隱藏時執行
resize (object) 組件所在頁面尺寸發生變化時執行。
組件插槽：
在組件的我先忙了中可以包含slot 節點，用於承載組件使用着提供的wxml結構。
默認情況下，一個組件的wxml中只能有一個slot，需要使用多slot時，可以在組件js中聲明啟用。
注意： 小程序目前只有默認插槽和多個插槽，暫不支持作用域插槽。