微信小程序：表单页面开发说明

做微信小程序，对于将用户输入的表单数据一次性提取到js中比较疑惑，后处理流程如下：

参考官方文档：

https://developers.weixin.qq.com/miniprogram/dev/component/form.html

 

1.写表单的wxml页面

如下的wxml 需要注意的是：

（1）<form bindsubmit="formSubmit" bindreset="formReset"> 在form中必须配置这两个绑定事件

 

（2）每个表单的子组件（比如input、switch等）都要起个名字：

<input placeholder="例如：王老师" name='name'></input>

<input placeholder="您的手机号" name='contact'></input>

 

（3）表单提交按钮：需要属性  form-type="submit"

表单重置按钮：需要属性 form-type="reset"

<button class="flex-sub padding-sm margin-xs radius cu-btn bg-green lg" form-type="submit">确认提交</button>
        <button class="flex-sub padding-sm margin-xs radius cu-btn bg-red lg" form-type="reset">清空数据</button>

<form bindsubmit="formSubmit" bindreset="formReset">
	<view class="cu-form-group margin-top">
		<view class="title">您的称呼</view>
		<input placeholder="例如：王老师" name='name'></input>
	</view>
	<view class="cu-form-group">
		<view class="title">您的性别</view>
		<switch class="switch-sex" checked name='sex'></switch>
	</view>
	<view class="cu-form-group">
		<view class="title">您的年龄</view>
		<input placeholder="例如：26" name='age'></input>
	</view>
	<view class="cu-form-group">
		<view class="title">所在地区</view>
		<picker mode="region" bindchange="RegionChange" value="{{region}}" custom-item="{{customItem}}" name='location'>
			<view class="picker">
				{{region[0]}}，{{region[1]}}，{{region[2]}}
			</view>
		</picker>
	</view>
	<view class="cu-form-group">
		<view class="title">联系方式</view>
		<input placeholder="您的手机号" name='contact'></input>
	</view>


	<view class="cu-form-group margin-top">
		<view class="title">音乐种类</view>
		<picker bindchange="PickerChange" value="{{index}}" range="{{picker}}" name='music_type'>
			<view class="picker">
				{{index?picker[index]:'请输入教授音乐的种类'}}
			</view>
		</picker>
	</view>
	<view class="cu-form-group">
		<view class="title">课时费</view>
		<input placeholder="单位：元" name='tuition'></input>
	</view>
	<view class="cu-form-group">
		<view class="title">可招收学生数</view>
		<input placeholder="单位：个" name='students_num'></input>
	</view>


	<view class="cu-form-group">
		<textarea maxlength="-1" disabled="{{modalName!=null}}" bindinput="textareaAInput"
			placeholder="自我介绍" name='desc'></textarea>
	</view>

	<view class="flex margin-top">
		<button class="flex-sub padding-sm margin-xs radius cu-btn bg-green lg" form-type="submit">确认提交</button>
		<button class="flex-sub padding-sm margin-xs radius cu-btn bg-red lg" form-type="reset">清空数据</button>
	</view>
</form>

2.写表单的 js 逻辑

在这个回调方法 formSubmit 中可以将表单数据全打印出来，然后自定义接口可以向后台发送数据

  //提交表单数据
  formSubmit: function (e) {
    console.log('form表单提交的数据为：', e.detail.value);
  },
  //重置表单数据表单数据
  formReset: function (e) {
    console.log('重置表单数据')
  }

const app = getApp();
Page({
  data: {
    index: null,
    picker: ['小提琴', '大提琴', '钢琴', '其他'],
    region: ['江苏省', '南京市', '建邺区'],
    imgList: [],
    modalName: null
  },
  //音乐种类
  PickerChange(e) {
    console.log(e);
    this.setData({
      index: e.detail.value
    })
  },

  //选择所在地区
  RegionChange: function (e) {
    this.setData({
      region: e.detail.value
    })
  },

  //选择图片上传
  ChooseImage() {
    wx.chooseImage({
      count: 4, //默认9
      sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album'], //从相册选择
      success: (res) => {
        if (this.data.imgList.length != 0) {
          this.setData({
            imgList: this.data.imgList.concat(res.tempFilePaths)
          })
        } else {
          this.setData({
            imgList: res.tempFilePaths
          })
        }
      }
    });
  },
  //查看图片
  ViewImage(e) {
    wx.previewImage({
      urls: this.data.imgList,
      current: e.currentTarget.dataset.url
    });
  },
  //删除上传图片
  DelImg(e) {
    wx.showModal({
      title: '召唤师',
      content: '确定要删除这张图片吗？',
      cancelText: '不删除',
      confirmText: '确定删除',
      success: res => {
        if (res.confirm) {
          this.data.imgList.splice(e.currentTarget.dataset.index, 1);
          this.setData({
            imgList: this.data.imgList
          })
        }
      }
    })
  },
  //自我介绍输入框
  textareaAInput(e) {
    this.setData({
      textareaAValue: e.detail.value
    })
  },

  //提交表单数据
  formSubmit: function (e) {
    console.log('form表单提交的数据为：', e.detail.value);
  },
  //重置表单数据表单数据
  formReset: function (e) {
    console.log('重置表单数据')
  }

})