目錄
input組件
type屬性
type屬性有number(數字)，text，idcard(身份證)，digit(帶小數點數字)
參數
| confirm-type | 設置鍵盤右下角按鈕的文字，僅在type='text'時生效。例如：在鍵盤右下角加一個發送send，前往go，next下一個，done完成，search搜索 |
| cursor-spacing | 在輸入框被鍵盤擋住的時候，指定光標與鍵盤的距離，單位px或rpx。取 input 距離底部 的距離和 cursor-spacing 指定的距離的最小值作爲光標與鍵盤的距離。如果沒有指定這個值，並且輸 入框被擋到了，那麼距離鍵盤的距離爲0。(就是說點開input框之後，鍵盤和input框之間的距離) |
| auto-focus | 自動聚焦，拉起鍵盤 |
| confirm-hold | 點擊鍵盤右下角按鈕時是否保持鍵盤不收起。默認值false，即點擊右下角的東西，鍵盤收起。 |
| bindinput | 鍵盤輸入時觸發，處理函數可以直接 return 一個字符串，將替換輸入框的內容。 |
| bindfocus | 輸入框聚焦時觸發 |
自定義組件
創建組件
- 自定義一個components(自己起名)文件夾，用來存放所有自定義的組件。
- 再針對每一個組件創建一個文件夾，用來存放這個組件相關的文件。比如 mybox 這個組件，那麼 可以創建一個 mybox 的一個文件夾。
- 在指定組件的文件夾中 右鍵->新建Component 創建組件。這樣創建的目的是在 json 文件中添 加 "component": true ，將其申明爲一個組件。
wxml中中做好組件的節點佈局，加入：
<!--me.wxml-->
<view class="outter">
<view class="inner">網絡課堂</view>
</view>
css省略
使用組件
在json文件中，加入
{
"usingComponents": {
"mybox": "/components/mybox/mybox"
}
在wxml中就可以使用<mybox></mybox>
給自定義組件添加屬性
在組件的js文件中，在properties中添加屬性，添加屬性的時候，需要指定兩個值，一個是type，代表的是這個屬性的類型，一個是value，代表的是這個屬性的默認值。示例：
//me.js
Component({
properties: {
showInner: {
type: Boolean,
value: false
}
}
})
然後在 wxml 模板中就可以使用了。
<!--me.wxml-->
<mybox showInner="true"></mybox>
還有另外一種使用data的形式，data中的數據可以渲染到組件的代碼中，但是使用data不能作爲屬性來使用。
slot
在使用小程序內置的組件的時候，比如 view ，我們還可以在 view 中添加其他的組件。這個功能可以通 過 slot 節點來實現。示例代碼如下：
<view class="outter">
<view wx:if="" class="inner">網絡課堂</view>
<slot></slot>
</view>
以後在使用這個組件的時候，還可以添加自己的節點。示例：
<mybox showInner="true">
<view>這是index中添加的</view>
</mybox>
以上是添加一個slot，如果想要添加多個 slot ，那麼需要在 js 文件中添加一個multipleSlots屬性，示例代碼如下：
Component({
options: {
multipleSlots: true
},
...
在 wxml 文件中，需要給每一個slot都指定name:
<mybox showInner="true">
<view slot="before">這是before的組件</view>
<view slot="after">這是after的組件</view>
</mybox>
事件
綁定事件
組件可以直接再外面綁定事件。和普通的一樣。
<my-component bindtap="tapEvent"></my-component>
自定義組件事件
自定義組件事件。直接在組件內綁定事件。並且如果我們想在組件內捕獲到事件後，要通知到父組 件，那麼可以通過 triggerEvent 方法來觸發自定義的事件。
<view class="outter">
<view class="inner" bindtap="onInnerTapEvent">
</view>
然後在組件的 js 文件中，使用以下代碼進行捕獲和傳遞給父組件
Component({
method: {
onInnerTapEvent: function(event){
console.log("組件內監聽到了innerTapEvent事件");
var detail = {} // detail對象，提供給事件監聽函數
var option = {} // 觸發事件的選項
this.triggerEvent("customevent",detail,option);
} } })
然後在使用組件的地方，需要給自定義事件綁定監聽方法： bindcustomevent="onCustomEventEvent"
生命週期
組件的生命週期，指的是組件自身的一些函數，這些函數在特殊的時間點或遇到一些特殊的框架事件時被自動觸發。
其中，最重要的生命週期是 created/attached/detached ，包含一個組件實例生命流程的最主要時間點。
- 組件實例剛剛被創建好時，created生命週期被觸發。此時組件數據this.data 就是在Component構造器中定義的數據data。此時還不能調用setData。通常情況下，這個生命週期只應該用於給組件this添加一些自定義屬性字段。
- 在組件完全初始化完畢、進入頁面節點樹後，attached生命週期被觸發。此時，this.data已被初始化爲組件的當前值。這個生命週期很有用，絕大多數初始化工作可以在這個時機進行。
- 在組件離開頁面節點樹後，detached生命週期被觸發。退出一個頁面時，如果組件還在頁面節點樹中，則detached會被觸發。
監聽組件所在頁面的生命週期
還有一些特殊的生命週期，它們並非與組件有很強的關聯，但有時組件需要獲知，以便組件內部處理。 這樣的生命週期稱爲“組件所在頁面的生命週期”，在 pageLifetimes 定義段中定義。
| 生命週期 | 描述 |
| show | 組件所在的頁面被展示時執行 |
| hide | 組件所在的頁面被隱藏時執行 |
| resize | 組件所在的頁面尺寸變化時執行 |