一、小程序有提供专门的表单托管,和ng,vue,ant一样可以一起提交所有表单的数据
直接看代码:
wxml:
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 section_gap" view class="section__title"radio/view radio-group name="radio-group" labelradio value="radio1"/radio1/label labelradio value="radio2"/radio2/label /radio-group /view view class="section section_gap" view class="section__title"checkbox/view checkbox-group name="checkbox" labelcheckbox value="checkbox1"/checkbox1/label labelcheckbox value="checkbox2"/checkbox2/label /checkbox-group /view view class="btn-area" button formType="submit"Submit/button /view/formpage的逻辑部分:
const page = { onLoad() { wx.setNavigationBarTitle({ title: '表单测试' }); }, data: {}, formSubmit: function(event) { console.log('form发生了submit事件,携带数据为:', e.detail.value) },};注意:wxml里面的bindsubmit的值就是提交管理整个表单值得函数,botton只是告诉你这个是提交的action,触发的是bindsubmit所对应的函数
也就说:
button formType="submit"Submit/button只是触发提交的动作发生,真正的触发的是bindsubmit所赋值的formSubmit函数对表单数据进行提交
bindsubmit="formSubmit"
例子来源于官网
https://developers.weixin.qq.com/miniprogram/dev/component/form.html
效果:













