微信小程序组件解读和分析:九form表单

Posted 微信开发--51小程序

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序组件解读和分析:九form表单相关的知识,希望对你有一定的参考价值。

form表单组件说明:
表单,将组件内的用户输入的<switch/> <input/> <checkbox/> <slider/> <radio/> <picker/> 提交。
当点击 <form/> 表单中 formType 为 submit 的<button/> 组件时,会将表单组件中的 value 值进行提交,需要在表单组件中加上 name 来作为 key。

 

form表单组件用法:
重置:<button formType="reset">Reset</button>


form表单组件示例代码运行效果如下:

技术分享



提交: <button formType="submit">Submit</button>



技术分享

 

下面是WXML代码:

 

[XML] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
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
<view class="page">
  <view class="page__hd">
    <text class="page__title">表单控件</text>
  </view>
  <form class="page__bd" catchsubmit="formSubmit" catchreset="formReset">
    <view class="section">
      <view class="section__title">您的姓名:</view>
      <input name="name" placeholder="姓名:" />
    </view>
    <view class="section section_gap">
      <view class="section__title">性别:</view>
      <radio-group name="gender">
        <label><radio value="男"/>男</label>
        <label><radio value="女"/>女</label>
        <label><radio value="其他"/>其他</label>
      </radio-group>
    </view>
    <view class="section section_gap">
      <view class="section__title">年龄:</view>
      <slider value="18" name="age" show-value ></slider>
    </view>
    <view class="section section_gap">
      <view class="section__title">擅长的开发语言:</view>
      <checkbox-group name="technology">
        <label><checkbox value="Java"/>Java</label>
        <label><checkbox value="javascript"/>JavaScript</label>
        <label><checkbox value="C++"/>C++</label>
        <label><checkbox value="C"/>C</label>
        <label><checkbox value="Object-C"/>Object-C</label>
        <label><checkbox value="C#"/>C#</label>
        <label><checkbox value="Python"/>;Python</label>
        <label><checkbox value="php"/>;PHP</label>
        <label><checkbox value="Ruby"/>Ruby</label>
        <label><checkbox value="Swift"/>Swift</label>
      </checkbox-group>
    </view>
    <view class="section section_gap">
      <view class="section__title">是否公开信息:</view>
      <switch name="isPublic"/>
    </view>
    <view class="btn-area">
      <button formType="submit">Submit</button>
      <button formType="reset">Reset</button>
    </view>
    <modal class="modal" hidden="{{modalHidden}}" no-cancel bindconfirm="modalChange">
      <view> 您填写的表单如下 </view>
      <view> 姓名:{{name}} </view>
      <view> 性别:{{gender}} </view>
      <view> 年龄:{{age}} </view>
      <view> 擅长的开发语言:{{technology}} </view>
      <view> 是否公开信息:{{isPublic}} </view>
    </modal>
  </form>
</view>



下面是JS代码:
[JavaScript] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
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
Page({
  data: {
    pickerHidden: true,
    chosen: ‘‘,
    modalHidden: true,
    name: ‘‘,
    gender: ‘‘,
    age: ‘‘,
    technology: ‘‘,
    isPublic: ‘‘
  },
  formSubmit: function(e) {
    var value =  e.detail.value;
    this.setData(
      {
        modalHidden: false,
        name: value.name,
        gender: value.gender,
        age: value.age,
        technology: value.technology,
        isPublic: value.isPublic
      }
    );
    console.log(‘form发生了submit事件,携带数据为:‘, e.detail.value)
  },
  formReset: function(e) {
    console.log(‘form发生了reset事件,携带数据为:‘, e.detail.value)
    this.setData({
      chosen: ‘‘
    })
  },
  modalChange: function(e) {
    this.setData({
      modalHidden: true
    })
  },
})




下面是WXSS代码:

[CSS] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
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
wx-label {
  display: block;
  margin-top: 10rpx;
  margin-left: 15rpx;
}
.section__title{
  font-size: 30rpx;
  margin-bottom: 30rpx;
  font-weight: bold;
}
.page {
    min-height: 100%;
    flex: 1;
    background-color: #FBF9FE;
    font-size: 32rpx;
    font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
    overflow: hidden;
}
.page__hd{
    padding: 50rpx 50rpx 100rpx 50rpx;
    text-align: center;
}
.page__title{
    display: inline-block;
    padding: 20rpx 40rpx;
    font-size: 32rpx;
    color: #AAAAAA;
    border-bottom: 1px solid #CCCCCC;
}
.page__desc{
    display: none;
    margin-top: 20rpx;
    font-size: 26rpx;
    color: #BBBBBB;
}
.section{
    margin-bottom: 80rpx;
}
.section_gap{
    padding: 0 30rpx;
}
.section__title{
    margin-bottom: 16rpx;
    padding-left: 30rpx;
    padding-right: 30rpx;
}
.section_gap .section__title{
    padding-left: 0;
    padding-right: 0;
}
.btn-area{
    padding: 0 30px;
}
.btn-area button{
    margin-top: 20rpx;
    margin-bottom: 20rpx;
}
.page input{
    padding: 20rpx 30rpx;
    background-color: #fff;
    margin-left: 20rpx;
}




form表单的主要属性:
属性
类型
说明
report-submit
Boolean
是否返回formId用于发送模板消息
bindsubmit
EventHandle
携带form中的数据触发submit事件,event.detail = {value : {‘name’: ‘value’} , formId: ‘’}

 

注意:
本案例使用的modal组件即将过期,推荐使用wx.showModal API
将formSubmit方法改写成这样,就可以。目前wx.showModal这个API的content不支持换行,有可能是Bug,期待后续优化。

 

[JavaScript] 纯文本查看 复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
formSubmit: function(e) {
    var value =  e.detail.value;
    wx.showModal({
      title: ‘您填写的表单如下‘,
      content: ‘姓名:‘+value.name
              +‘性别:‘+value.gender
              +‘年龄:‘+value.age
              +‘擅长的开发语言:‘+value.technology
              +‘是否公开信息:‘ + value.isPublic,
      showCancel: false,
      success: function(res) {
        if (res.confirm) {
          console.log(‘用户点击确定‘)
        }
      }
    });
  },
点击查看原文















以上是关于微信小程序组件解读和分析:九form表单的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序组件解读和分析:十label标签

微信小程序组件解读和分析:text文本

微信小程序组件解读和分析:progress进度条

微信小程序组件解读和分析:七button按钮

微信小程序组件解读和分析:十input输入框

微信小程序组件解读和分析:swiper滑块视图