前言
在上两篇文章中小猪介绍了模板消息的使用情况，期间因为小程序模板消息的限制，在非支付场景下想使用模板消息那么必须使用微信小程序的表单来获取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代码：
1
2
3
4
5
6
7
8
9
10
11
12
|
//<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事件')
}
})
|
目前小程序支持如下的标签:
|- 标签名- |-说明- |
|—|—|：
|button |按钮|
|form |表单|
|input |输入框|
|checkbox| 多项选择器|
|radio |单项选择器|
|picker |列表选择器|
|picker-view |内嵌列表选择器|
|slider |滚动选择器|
|switch |开关选择器|
|label |标签|
建议读者分别写上这些标签，然后提交数据比对下具体的属性值。
例如下面的表单
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
原作者: 模板之家
来自: 网络收集
| 
