跟著小豬來(lái)做小程序開(kāi)發(fā)：表單
前言
在上兩篇文章中小豬介紹了模板消息的使用情況，期間因?yàn)樾〕绦蚰０逑⒌南拗疲诜侵Ц秷?chǎng)景下想使用模板消息那么必須使用微信小程序的表單來(lái)獲取formId，這樣就強(qiáng)制限制了必須有用戶進(jìn)行交互的情況下才可以使用模板消息功能，防止了小程序的模板消息功能被濫用。
這一篇文章介紹下小程序的表單相關(guān)。
基礎(chǔ)
稍微熟悉HTML的讀者肯定知道html 的表單，微信小程序基于html程序，但是限制了原h(huán)tml表單的使用，只封裝了我們常用的組件和屬性。這樣即防止了html表單的復(fù)雜變化，也提供了常用的組件功能。
今天小豬簡(jiǎn)單介紹幾個(gè)常用的表單組件。
組件
官方文檔地址：https://mp.weixin.qq.com/debug/wxadoc/dev/component/
表單，將組件內(nèi)的用戶輸入的<switch/> <input/> <checkbox/> <slider/> <radio/> <picker/>提交。
表單組件用來(lái)提交表單，微信小程序允許我們?yōu)楸韱翁砑尤缦聦傩?/p>
|屬性名 |類型| 說(shuō)明|
|—|—|—|
|report-submit| Boolean |是否返回 formId 用于發(fā)送模板消息|
|bindsubmit|EventHandle|攜帶 form 中的數(shù)據(jù)觸發(fā) submit 事件，event.detail = {value : {‘name’: ‘value’} , formId: ”}|
|bindreset |EventHandle|表單重置時(shí)會(huì)觸發(fā) reset 事件|
上述的bindsubmit屬性和bindreset屬性都可以綁定一個(gè)js的事件函數(shù)，然后在用戶點(diǎn)擊提交和重置按鈕時(shí)觸發(fā)：例如下面的表單和對(duì)應(yīng)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發(fā)生了submit事件，攜帶數(shù)據(jù)為：', e.detail.value)
},
formReset: function() {
console.log('form發(fā)生了reset事件')
}
})
|
目前小程序支持如下的標(biāo)簽:
|- 標(biāo)簽名- |-說(shuō)明- |
|—|—|：
|button |按鈕|
|form |表單|
|input |輸入框|
|checkbox| 多項(xiàng)選擇器|
|radio |單項(xiàng)選擇器|
|picker |列表選擇器|
|picker-view |內(nèi)嵌列表選擇器|
|slider |滾動(dòng)選擇器|
|switch |開(kāi)關(guān)選擇器|
|label |標(biāo)簽|
建議讀者分別寫(xiě)上這些標(biāo)簽，然后提交數(shù)據(jù)比對(duì)下具體的屬性值。
例如下面的表單
|
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">地區(qū)選擇器</view>
<picker bindchange="bindPickerChange" value="{{index}}" range="{{array}}">
<view class="picker">
當(dāng)前選擇：{{array[index]}}
</view>
</picker>
</view>
<view class="section">
<view class="section__title">時(shí)間選擇器</view>
<picker mode="time" value="{{time}}" start="09:01" end="21:01" bindchange="bindTimeChange">
<view class="picker">
當(dāng)前選擇: {{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">
當(dāng)前選擇: {{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: ['美國(guó)', '中國(guó)', '巴西', '日本'],
objectArray: [
{ id: 0, name: '美國(guó)' },
{ id: 1, name: '中國(guó)' },
{ id: 2, name: '巴西' },
{ id: 3, name: '日本' }
],
index: 0,
date: '2016-09-01',
time: '12:01'
},
bindPickerChange: function(e) {
console.log('picker發(fā)送選擇改變，攜帶值為', 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發(fā)生了submit事件，攜帶數(shù)據(jù)為：', e.detail.value)
},
formReset: function() {
console.log('form發(fā)生了reset事件')
},
onLoad:function(){
console.log('sform load')
}
})
|
到界面上簡(jiǎn)單做幾個(gè)輸入值，點(diǎn)擊提交按鈕，看看后臺(tái)對(duì)應(yīng)獲取到的值大概為：
|
1
2
3
4
5
6
7
|
Object{
switch: true,
slider: 29,
input: "smallerpig.com",
radio-group: "radio2",
checkbox: Array[1]
}
|
