跟著小豬來做小程序開發(fā)：表單
前言
在上兩篇文章中小豬介紹了模板消息的使用情況，期間因?yàn)樾〕绦蚰０逑⒌南拗?，在非支付場景下想使用模板消息那么必須使用微信小程序的表單來獲取formId，這樣就強(qiáng)制限制了必須有用戶進(jìn)行交互的情況下才可以使用模板消息功能，防止了小程序的模板消息功能被濫用。
這一篇文章介紹下小程序的表單相關(guān)。
基礎(chǔ)
稍微熟悉HTML的讀者肯定知道html 的表單，微信小程序基于html程序，但是限制了原h(huán)tml表單的使用，只封裝了我們常用的組件和屬性。這樣即防止了html表單的復(fù)雜變化，也提供了常用的組件功能。
今天小豬簡單介紹幾個(gè)常用的表單組件。
組件
官方文檔地址：https://mp.weixin.qq.com/debug/wxadoc/dev/component/
表單，將組件內(nèi)的用戶輸入的<switch/> <input/> <checkbox/> <slider/> <radio/> <picker/>提交。
表單組件用來提交表單，微信小程序允許我們?yōu)楸韱翁砑尤缦聦傩?/p>
|屬性名 |類型| 說明|
|—|—|—|
|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)簽名- |-說明- |
|—|—|：
|button |按鈕|
|form |表單|
|input |輸入框|
|checkbox| 多項(xiàng)選擇器|
|radio |單項(xiàng)選擇器|
|picker |列表選擇器|
|picker-view |內(nèi)嵌列表選擇器|
|slider |滾動(dòng)選擇器|
|switch |開關(guān)選擇器|
|label |標(biāo)簽|
建議讀者分別寫上這些標(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: ['美國', '中國', '巴西', '日本'],
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發(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')
}
})
|
到界面上簡單做幾個(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]
}
|
