前言:form作为数据提交的重要控件,历来在前端设计中非常重要。微信给出了完整的form的例子。参考了一些微信设计的书籍,大多数都是copy 粘贴了例子的东西...。
其实微信的例子给的比较充分了:
源码连接:wechatide://minicode/6db9lcmu6VYt
https://developers.weixin.qq.com/miniprogram/dev/component/form.html?search-input=catchsubmit
form本身不是一个可见的控件,可以理解为,他是所有具备输入控件的一个数据管理器。
e
1 form的基本定义:
form
表单,将组件内的用户输入的
<switch/>
<input/>
<checkbox/>
<slider/>
<radio/>
<picker/>
提交。当点击
<form/>
表单中 formType 为 submit 的<button/>
组件时,会将表单组件中的 value 值进行提交,需要在表单组件中加上 name 来作为 key。
from在数据库设计里面,就是一组将进行数据库访问的数据,在提交前大多数由前端先保存。
微信里面,对表单的定义很清晰,范围也显得比较狭隘,但是,可以满足一般应用。
上面这段定义,我们可以看到,支持form的组件有很多,基本上都是输入的组件:
1.1 属性
form有两个事件属性,用来对form内的数据来进行处理,
在index.wxml里面对事件的handler进行了绑定,这里两个事件分别绑定了两个对应的响应函数。
Page({
formSubmit: function (e) {
console.log('form发生了submit事件,携带数据为:', e.detail.value) //注意,这里e.detail.value就是控件的各个数据。
},
formReset: function () {
console.log('form发生了reset事件')
}
})
还有一个属性是:
report-submit |
这个属性我们知道,当我们在输入一个提交表单,比如,注册后,可以弹出一个信息框,这个就是给出的信息框的ID。
现在我们稍微展开讨论一下:
2 各个组件的数据定义
2.1 switch
例子给出的第一个框是switch
我们在看一下switch的属性,
这里,checked的属性value是可以拿出来的数据,
2.2 input
input 组件比较复杂,和switch 不同,但是,他的value
就是输入框的文本内容。
2.3 button 提交键的使用
From的属性里面提到了,button的组件使用,作为表单提交的最后触发,所以,在设计页面的时候,一般form的事件的触发用button来做,查了一下其他组件,发现只有button有这个form-type的属性,也就是form必须由button组件来确认提交。
formtype = submit ,表示这是一个submit 事件,然后,出发js里面定义的触发函数,见下一节:
3 数据的获取
From的属性里面提到了,button的组件使用,作为表单提交的最后触发,只有button有这个form-type的属性,也就是form必须由button组件来确认提交。所以,在设计页面的时候,一般form的事件的触发用button来做,formtype = submit ,表示这是一个submit 事件,然后,出发js里面定义的触发函数:
3.1 组件页面数据获取
from的获取,就是在页面的js页面文件逻辑里面的,响应函数里面的e的结构值。
目前看,e的结构是在设计页面的wxml文件时候,根据组件的属性值,自动生成的,
而e的内容就是组件当前用户的输入
e 的值拿到后,
可以通过自定义变量把数值存储下来,例如:
我们先改动input输入框的文字,然后,
提交submit的时候,把e变量保留给本地变量
然后,打印看看,结果
试验结果:
的提交数据结构为: