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

前言

在上两篇文章中小猪介绍了模板消息的使用情况，期间因为小程序模板消息的限制，在非支付场景下想使用模板消息那么必须使用微信小程序的表单来获取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事件’ ) } } )

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

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

例如下面的表单

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 ] }

免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

标签聚合

【小程序源码网资源版权风险说明】：
本站为避免不必要的纷争，分享的所有资源中一切可能有版权风险的资源将全部转载自第三方网站或平台，站长只为大家提供相关资源的介绍和跳转引导。因可能有疏忽大意，所以如有遗漏资源侵犯了您的合法权利，请联系站长删除。
【小程序源码网资源下载使用说明】：
本站所分享的一切QQ小程序源码,thinkphp整站源码,微信小程序源码,图文教程等资源仅供用户学习参考使用，任何人不得作其他用途，违者自行承担所有责任。
【小程序源码网毫无人看的介绍】：
本站又称Z站，原名贼娘网，开站于2018年，换过三任站长，目前站长是第四任站长，本站是一个主要分享免费开源小程序源码/网站源码/免费素材/教程资源的网站，主要小程序资源有用于学习的小程序源码，也有正版原创可商用的小程序源码，是一个公益博客型网站。
【小程序源码网原创源码版权申明】：
未经小程序源码网许可，任何人不得擅自使用本站原创首发源码进行商业行为(除本站VIP用户在期限内，版权无使用限制)，否则将依法承担相应赔偿责任。
【小程序源码网转载文章版权申明】：
本站所转载的QQ小程序或微信小程序源码与其他资源仅供学习，任何人不得作其他用途，违者自行承担所有责任。
【小程序源码网站长最后的屁话】：
如有您认为本站有任何侵犯您合法权益的文章，或者您有什么疑问需求，欢迎联系站长QQ，站长24小时在线，备注公司名称和源码版权问题或者需要小程序定制开发等站长业务类型可急速处理，如果您只是交流小程序的一些开发问题或源码问题可以加入QQ群讨论，就不用加站长啦，对于白嫖党，QQ群才是处理问题的天堂，当然站长也欢迎大家骚扰~
小程序源码网 » 跟着小猪来做小程序开发：表单