微信小程序入门（十一）：组件form表单

web端开发的童鞋知道，前端视图层和服务端交互都是通过form表单进行的，在小程序中也不例外。

认识form表单

表单。将组件内的用户输入的 提交。
当点击

表单中 form-type 为 submit 的 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。

属性：

• report-submit：是否返回 formId 用于发送模板消息
• report-submit-timeout：等待一段时间（毫秒数）以确认 formId 是否生效。如果未指定这个参数，formId 有很小的概率是无效的（如遇到网络失败的情况）。指定这个参数将可以检测 formId 是否有效，以这个参数的时间作为这项检测的超时时间。如果失败，将返回 requestFormId:fail 开头的 formId
• bindsubmit：携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'} , formId: ''}
• bindreset：表单重置时会触发 reset 事件

看完属性，撸一个模拟提交用户注册信息的代码：
wxml:

  
    
      姓 名：
      
    

    
      密 码：
      
    

    
      手 机：
      
    

    
      地 址：
      
    

    
      邮 箱：
      
    

    
      性 别：
      
        
          {{item.value}}
        
      
    

    
      国 籍：
      
        
          {{item.value}}
        
      
    


    
      爱 好：
      
        
          {{item.value}}
        
      
    


    确定
    重置
  

js:

//index.js
Page({
  data: {
    sex:[
      {name:'male',value:"男"},
      { name: 'female', value: "女"}
    ],
    items: [
      { name: 'CHN', value: '中国'},
      { name: 'USA', value: '美国' },
      { name: 'BRA', value: '巴西' },
      { name: 'JPN', value: '日本' },
      { name: 'ENG', value: '英国' },
    ],
    hobby:[
      { name: 'football', value: '足球' },
      { name: 'basketball', value: '篮球'},
      { name: 'pingpang', value: '乒乓球' },
      { name: 'yumaoqiu', value: '羽毛球'}
    ],
    radio_check_content:"CHN"
  },
  formSubmit(e){
    console.log(e)
  }
})

wxss:

/**index.wxss**/
.item{
width: 95%;
display: flex;
flex-direction: row;
border: 1px solid #eee;
padding: 10rpx 5rpx;
margin: 5rpx;
}

.form{
  width: 95%;
}
.btn{
  margin: 5rpx;
}

.container_form {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
} 

代码运行输入信息点击确定：

11-1.png

11-2.png

可以看到form表单中我们填写的信息！！！！表单学习就到此为止，只是做一个简单的尝试，希望童鞋们能够举一反三！