微信小程序组件form表单解读和分析介绍

form表单组件说明:

表单，将组件内的用户输入的 提交。

当点击

form表单组件用法：

重置:Reset

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

提交: Submit

下面是WXML代码：

多个微信小程序源码合集

微信小程序是一种轻量级的应用开发平台，由腾讯公司推出，主要应用于移动端，旨在提供便捷的用户体验，无需下载安装即可在微信内使用。本压缩包包含了丰富的源码资源，涵盖了多个领域的应用场景，下面将逐一介绍其中涉及的知识点。1. 图片展示：这部分源码可能涉及了微信小程序中的``组件的使用，用于显示图片，以及`wx.getSystemInfo`接口获取屏幕尺寸，实现图片的适配和响应式布局。可能还包括了图片懒加

下载

  
    表单控件
  
  

    
      您的姓名：
      
    
    
      性别：
      
        男
        女
        其他
      
    
    
      年龄：
      
    
    
      擅长的开发语言：
      
        Java
        JavaScript

下面是JS代码：

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代码：

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表单的主要属性：

注意：

本案例使用的modal组件即将过期，推荐使用wx.showModal API

将formSubmit方法改写成这样，就可以。目前wx.showModal这个API的content不支持换行，有可能是Bug，期待后续优化。

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('用户点击确定')
        }
      }
    });
  },