跟著小豬來做小程序開發：表單
前言
在上兩篇文章中小豬介紹了模板消息的使用情況，期間因為小程序模板消息的限制，在非支付場景下想使用模板消息那么必須使用微信小程序的表單來獲取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
57
58
59
60
61
62
63
|
<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代碼：
|
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
|
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')
}
})
|
到界面上簡單做幾個輸入值，點擊提交按鈕，看看后臺對應獲取到的值大概為：
|
1
2
3
4
5
6
7
|
Object{
switch: true,
slider: 29,
input: "smallerpig.com",
radio-group: "radio2",
checkbox: Array[1]
}
|
