目录
input组件
type属性
参数
自定义组件
创建组件
使用组件
给自定义组件添加属性
slot
事件
绑定事件
自定义组件事件
生命周期
监听组件所在页面的生命周期
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 | 组件所在的页面尺寸变化时执行 |
