input

<input/>是单行输入框，用于收集用户信息，其属性如下：

confirm-type 有效值：

属性篇幅较长，示例代码如下:

<view class="section">
  <input placeholder='默认样式，自动聚焦 ' auto-focus/>
</view>
<view class='section'>
  <input placeholder='内容中的123会被替换为0'bindinput="changeValue" type='number'maxlength="20"/>
</view>
<view class='section'>
<input placeholder='输入3个以上字符会收起键盘'bindinput="hideKeyboard" type='number'/>
</view>

.section{font-size: 12px;padding: 10px 5px;border-bottom: dashed 1px #cecece;}
.section input{border: solid 1px #ccc;padding: 0 5px;background-color: #fff;border-radius: 4px;height: 30px;}

Page({
  changeValue:function(e){
    console.log(e.detail);
    var value = e.detail.value,
    pos =e.detail.cursor,
    left;
    //计算光标的位置
    if(pos!=-1){
//光标在中间位置
  left=value.slice(0,pos);
  //修改后光标位置也要随之改变
  pos = left.replace(/123/g,'0').length;
    }
    return{
      value:e.detail.value.replace(/123/g,'0'),
      cursor:pos
    }
  },
  hideKeyboard:function(e){
    //调用关闭键盘API
    wx.hideKeyboard();
  }
})

执行结果如下:

textarea组件

<textarea/>是多行输入框，小程序中的<teaxtarea/>是一个自闭合标签，它的值需要赋值给value属性，而不是被标签包裹，其属性大部分和<input/>相同，可参考微信文档：https://developers.weixin.qq.com/miniprogram/dev/component/textarea.html

执行代码如下：

<view class="section">
  <textarea bindblur='bindTextAredBlur' auto-height placeholder='自动变高'/>
</view>
<view class='section'>
<textarea placeholder='placeholder颜色是红色的'placeholder-style="color:red"/>
</view>
<view class='section'>
  <textarea placeholder="这是一个可以自动聚焦的textarea" auto-focus/>
</view>

<view class='section'>
 <textarea placeholder='这个只有在按钮点击时才聚焦'focus="{{focus}}"/>
 <button bindtap='bindButtonTap'>使得输入框获得焦点</button>
 </view>

 <view class='section'>
  <form bindsubmit='bindFormSubmit'>
    <textarea placeholder='form中的textarea' name="textarea"/>
    <button form-type='submit'>提交</button>
  </form>
 </view>

Page({
  data: {
    height: 20,
    focus: false
  },
  bindButtonTap() {
    this.setData({
      focus: true
    })
  },
  bindTextAreaBlur(e) {
    console.log(e.detail.value)
  },
  bindFormSubmit(e) {
    console.log(e.detail.value.textarea)
  }
})

执行结果如下：

<textare/>获得焦点的意思大概就是：在真机测试时，能够唤醒键盘

button组件

按钮除了在应用中提供交互功能，按钮的颜色也承载了应用的引导作用，通常在一个程序中一个按钮至少有3种状态：默认点击（default）、建议点击（primary）、谨慎点击（warn），在构建项目时，注意在合适的场景按钮。

由于属性较多，具体属性请参考微信官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/button.html

示例代码如下：

<button>默认按钮样式</button>
<button size='mini'>size:mini</button>
<button type='primary'>type:primary</button>
<button type='warn'>type:warn</button>
<button plain>plain</button>
<button disabled>disabled</button>
<button loading>loading</button>
<button hover-class='my-button-hover'>hover-class:my-button-hover</button>
<button>
<image src="../../images/12.jpg"/>
</button>

button{margin: 5px 0;}
.my-button-hover{background-color: red;color:#fff;}

执行结果如下：

form组件

<from/>是最后一个关键组件，它用于嵌套其他组件，使之形成表单，当触发<from/>submit方法时，会将内部的组件进行组装，作为参数传递给submit方法。通过这种方法我们可以进行前后台的数据进行交互，有以下属性：

组合示例代码如下：

<form bindsubmit="submit" bindreset="reset">
  <view class='section'>
    <view class='title'>switch</view>
    <switch name="myswitch"/>
  </view>
  <view class='section'>
    <view class="title">input</view>
    <input name="myinput" placeholder='请输入内容' value='{{textvalue}}'/>
  </view>
  <view class="section">
    <view class='title'>checkbox</view>
    <checkbox-group name="mycheckbox">
      <label><checkbox value="1"/>中国</label>
      <label><checkbox value="2"/>美国</label>
      <label><checkbox value="3"/>英国</label>
    </checkbox-group>
  </view>
  <view class='section'>
    <view class="title">radio</view>
    <radio-group name="myradio">
    <label>
      <radio value='0'>男</radio>
      <radio value='1'>女</radio>
    </label>
    </radio-group>
  </view>
  <view class='section'>
    <view class='title'>picker</view>
    <picker value='{{index}}' range='{{times}}'bindchange="changePicker">
      <view>时间：{{items[index]}}</view>
    </picker>
  </view>
</form>
<view class='section'>
  <button type='primary' form-type='submit'>提交</button>
  <button form-type='reset'>重置</button>
</view>

.section{font-size: 12px;padding: 10px;border-top: solid 1px #eee;}
.section input{border: solid 1px #ccc;border-radius: 4px;}
.section button{margin-bottom: 10px;}
.section label{margin-right: 20px;}
.section title{margin: 5px 0;}

Page({
  data:{
    times:[
      '20:00',
      '20:30',
      '21:00',
      '21:30',
      '22:00'
    ],
    index:3
  },
  changePicker:function(e){
    this.setData({
      index:e.detail.value
    });
  },
  submit:function(e){
    console.log(e.detail.value);
  },
  reset:function(e){
    console.log('已经重置对象')
  }
})

执行结果如下：