废话少说直接上需求背景和实现思路
1.需求背景
我们希望⼩程序中某个页⾯中的⽤户输⼊数据表单上可以在后台的cms系统或者是可以通过接⼝进⾏动态控制的 ；也就是说我们只要通过在管理系统进⾏勾选以后，编辑，点击⽣成页⾯所对应的表单部分就会出现我们动态配置以后的表单（包括表单的个数，每个表单的label，类型，id，默认值等）
2.起初的实现思路
最早我拿到这个需求的时候，如果希望实现这种后台配置好，前端⼩程序动态解析⽣成表单的过程，主要有这三种⽅式:
1.后台配置的表单元素是htm l富⽂本，⼩程序前端通过三⽅控件w xPa rse进⾏动态解析
1.后台配置的表单元素是html富⽂本，⼩程序前端通过三⽅控件w
2.将前端的表单抽离成最⼩单元组件并以um d形式的组件，放到服务端，⼩程序拉取服务端umd的组件进⾏动态解析
3.将前端的表单抽离成最⼩单元组件不放在远程服务器，只放在前端，后台通过⼀套虚拟语法结构(AST)对表单类型，id，规则进⾏描述，⼩程序前端动态解析
烧带鱼以上三种⽅式各⾃的问题
⽅式1问题:
w xpa rse 确实可以进⾏对富⽂本解析成表单，但是⽆法将富⽂本内部的⾏为，数据进⾏共r se
享出来（⽅案pa ss掉）
⽅式2问题:
将前端的表单抽离成最⼩单元组件并以um d形式的组件，放到服务端，⽬前⼩程序并不⽀持umd形式的打包，并且⼩程序⽆法加载远程组件
咳咳 那就只剩下第三种了
本来想⽤1或者2做的⾼⼤上点，但是最终只能这种⽅式，容我伤⼼1秒钟
制作动态表单的具体实现
切⼊主题 制作动态表单的具体实现
切⼊主题
1.⽅案须知
最终我们选择⽅案:
将前端的表单抽离成最⼩单元组件不放在远程服务器，只放在前端，后台通过⼀套虚拟语法结构(AST)数据结构对表单个数，类型，id，规则进⾏描述，⼩程序前端动态解析
2. 设计动态表单语法结构(AST)
12月14日是什么情人节2.1⾸先我们来看 给定要求的设计图
image.png
如果我们希望是此类的表单结构，那我们在设计表单虚拟语法结构，
2.1 接上
2.1 接上 如果我们希望是此类的表单结构，那我们在设计表单虚拟语法结构，
的时候应该如下图所⽰:
1.整体的虚拟语法结构是⼀个数组
2.数组包含两层，第⼀层表⽰ 对⼀级表单的名称描述，ID
3.第⼆层表⽰ 对⼀级⼀级表单下⾯具体表单个数，类型，规则进⾏描述
image.png
所以我们可以抽象出这样的结构
const formConfig = [
{
美容美白护肤品fieldId: '101', //对应⼀级表单层级
fieldName: '基本信息',
formInfo: [ //每个层级下⾯具体表单元素
{
label: '名字',//标题
type: 'text', //表单类型 text,upload,picker,time
id: 'input-name-form', //表单id
placeholder: '输⼊您的姓名',//设置⽂本框默认提⽰
data: [], //填充表单的数据例如下拉框
role: {
//验证规则正则表单式
//1.reg正则表达式
//2.notnull ⾮空验证
//3.null 不验证
type: 'reg',
value: '',//正则表达式
},
force: true,//是否必输⼊
},
{
label: '⾝份证',//标题
type: 'text', //表单类型 text,upload,picker,time
id: 'input-id-form', //表单id
placeholder: '输⼊您的姓名',//设置⽂本框默认提⽰
data: [], //填充表单的数据例如下拉框
role: {
//验证规则正则表单式
//1.reg正则表达式
//2.notnull ⾮空验证
/
/3.null 不验证
type: 'reg',
value: '',//正则表达式
},
force: true,//是否必输⼊
},
{
label: '性别',//标题
type: 'picker', //表单类型 text,upload,picker,time
id: 'input-sex-form', //表单id
placeholder: '输⼊您的姓名',//设置⽂本框默认提⽰
data: [
{ id: 1, name: '男' },
{ id: 2, name: '⼥' },
], //填充表单的数据例如下拉框
role: {
type: 'reg',
value: '',//正则表达式
value: '',//正则表达式
},
force: true,//是否必输⼊
}
]
},
{
fieldId: '102',
fieldName: '参赛信息',
formInfo: [
{
label: '参赛编号',//标题
type: 'text', //表单类型 text,upload,picker,time
id: 'match-id-form', //表单id
placeholder: '输⼊您的姓名',//设置⽂本框默认提⽰
data: [], //填充表单的数据例如下拉框
role: {
type: 'reg',
value: '',//正则表达式
},
force: false,//是否必输⼊
},金像奖历届影帝
{
label: '组别',//标题
type: 'picker', //表单类型 text,upload,picker,time
id: 'group-id-from', //表单id
placeholder: '输⼊您的姓名',//设置⽂本框默认提⽰
data: [
{ id: 1, name: '第⼀组' },
{ id: 2, name: '第⼆组' },
{ id: 3, name: '第三组' },
], //填充表单的数据例如下拉框
关于国庆的黑板报role: {
type: 'reg',
value: '',//正则表达式
},
force: false,//是否必输⼊
},
{
label: '参赛时间',//标题
type: 'time', //表单类型 text,upload,picker,time
id: 'join-time-form', //表单id
placeholder: '选择时间',//设置picker未选择默认提⽰
data: [], //填充表单的数据例如下拉框
role: {
type: 'reg',
value: '',//正则表达式
},
force: false,//是否必输⼊
timeType:'date',//当类型为time的时候指定具体的时间控件类型 date是年⽉⽇选择器还是周 time还是天的⽇期（时分） timeType endTime: '',//设置表⽰有效⽇期范围的开始，字符串格式为"YYYY-MM-DD"
starTime: ''//设置表⽰有效⽇期范围的开始，字符串格式为"YYYY-MM-DD"
},
{
label: '上传证书',//标题
type: 'upload', //表单类型 text,upload,picker,time
id: 'upload-zhn-form', //表单id
placeholder: '输⼊您的姓名',//设置⽂本框默认提⽰
data: [], //填充表单的数据例如下拉框
role: {
type: 'reg',
value: '',//正则表达式
},
force: false,//是否必输⼊
},
{
label: '所在区域',//标题
type: 'region', //表单类型 text,upload,picker,time
梦见拜佛id: 'region-area-form', //表单id
placeholder: '当前选择',//设置⽂本框默认提⽰
data: [], //填充表单的数据例如下拉框
role: {
type: 'reg',
value: '',//正则表达式
发布评论