跟着小猪来做小程序开发吧——表单

2017-04-18

前言

在上两篇文章中小猪介绍了模板消息的使用情况，期间因为小程序模板消息的限制，在非支付场景下想使用模板消息那么必须使用微信小程序的表单来获取formId，这样就强制限制了必须有用户进行交互的情况下才可以使用模板消息功能，防止了小程序的模板消息功能被滥用。

这一篇文章介绍下小程序的表单相关。

基础

稍微熟悉HTML的读者肯定知道html 的表单，微信小程序基于html程序，但是限制了原html表单的使用，只封装了我们常用的组件和属性。这样即防止了html表单的复杂变化，也提供了常用的组件功能。

今天小猪简单介绍几个常用的表单组件。

组件

官方文档地址：https://mp.weixin.qq.com/debug/wxadoc/dev/component/

表单，将组件内的用户输入的<switch/> <input/> <checkbox/> <slider/> <radio/> <picker/>提交。

表单组件用来提交表单，微信小程序允许我们为表单添加如下属性

属性名	类型	说明
report-submit	Boolean	是否返回 formId 用于发送模板消息
bindsubmit	EventHandle	携带 form 中的数据触发 submit 事件，event.detail = {value : {‘name’: ‘value’} , formId: ‘’}
bindreset	EventHandle	表单重置时会触发 reset 事件

上述的bindsubmit属性和bindreset属性都可以绑定一个js的事件函数，然后在用户点击提交和重置按钮时触发：例如下面的表单和对应js代码：

//<form bindsubmit="formSubmit" bindreset="formReset">
//<button formType="submit">Submit</button>
//<button formType="reset">Reset</button>
//js
Page({
  formSubmit: function(e) {
    console.log('form发生了submit事件，携带数据为：', e.detail.value)
  },
  formReset: function\(\) {
    console.log('form发生了reset事件')
  }
})

目前小程序支持如下的标签:

建议读者分别写上这些标签，然后提交数据比对下具体的属性值。

例如下面的表单


<form bindsubmit="formSubmit" bindreset="formReset">
  <view class="section section_gap">
    <view class="section__title">switch</view>
    <switch name="switch"/>
  </view>
  <view class="section section_gap">
    <view class="section__title">slider</view>
    <slider name="slider" show-value ></slider>
  </view>

  <view class="section">
    <view class="section__title">input</view>
    <input name="input" placeholder="please input here" />
  </view>
<view class="section">
  <view class="section__title">地区选择器</view>
  <picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
    <view class="picker">
      当前选择：{{array[index]}}
    </view>
  </picker>
</view>

<view class="section">
  <view class="section__title">时间选择器</view>
  <picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
    <view class="picker">
      当前选择: {{time}}
    </view>
  </picker>
</view>

<view class="section">
  <view class="section__title">日期选择器</view>
  <picker mode="date" value="{{date}}" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
    <view class="picker">
      当前选择: {{date}}
    </view>
  </picker>
</view>

  <view class="section section_gap">
    <view class="section__title">radio</view>
    <radio-group name="radio-group">
      <label><radio value="radio1"/>radio1</label>
      <label><radio value="radio2"/>radio2</label>
    </radio-group>
  </view>

  <view class="section section_gap">
    <view class="section__title">checkbox</view>
    <checkbox-group name="checkbox">
      <label><checkbox value="checkbox1"/>checkbox1</label>
      <label><checkbox value="checkbox2"/>checkbox2</label>
    </checkbox-group>
  </view>
  <view class="btn-area">
    <button formType="submit">Submit</button>
    <button formType="reset">Reset</button>
  </view>
</form>

配合下列js代码：


var app = getApp\(\)
Page({
  data:{
    array: ['美国', '中国', '巴西', '日本'],
    objectArray: [
      {        id: 0,        name: '美国'      },
      {        id: 1,        name: '中国'      },
      {        id: 2,        name: '巴西'      },
      {        id: 3,        name: '日本'      }
    ],
    index: 0,
    date: '2016-09-01',
    time: '12:01'
  },
  bindPickerChange: function(e) {
    console.log('picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      index: e.detail.value
    })
  },
  bindDateChange: function(e) {
    this.setData({
      date: e.detail.value
    })
  },
  bindTimeChange: function(e) {
    this.setData({
      time: e.detail.value
    })
  },
  formSubmit: function(e) {
    console.log('form发生了submit事件，携带数据为：', e.detail.value)
  },
  formReset: function\(\) {
    console.log('form发生了reset事件')
  },
  onLoad:function\(\){
      console.log('sform load')
  }
})

到界面上简单做几个输入值，点击提交按钮，看看后台对应获取到的值大概为：


Object{
    switch: true, 
    slider: 29, 
    input: "smallerpig.com", 
    radio-group: "radio2", 
    checkbox: Array[1]
    }