微搭使用笔记(四) 通过循环展示组件+json配置生成表单及数据获取

news2024/11/28 12:51:30

背景及整体思路

上篇文章我们通过微搭提供的数据模型完成了问卷表单页面的创建和数据采集，相对来说除了数据模型配置略显复杂外其他的倒还算方便。

本文我们通过for循环加上json文件配置的方式实现一个通用表单页面，如果更换了表单只需要替换掉json配置文件即可实现页面生成和数据收集。这里只是提供一种思路，希望能够帮助到各位。

还是以问卷调查举例，一般的问卷调查都会包含文本输入、文本域输入、单选、多选、地域选择等常见形式，整体思路就是配置一个json文件，这个json里会包含组件字段、组件类型、组件选项配置(包含key、value，针对单选、多选)，json大致格式如下:

[
    {
        type: 1, // 1 文本输入 2 文本域输入 3 单选 4 多选 5 地域选择 6 其他扩展组件,如电话、邮箱等自行扩展
        key: 'name', //提交时的字段
        options: [
            {
                label: '男',
                value: '1'
            }， {
                label: '女',
                value: '2'
            }
        ]
	}
]

页面上通过for循环遍历这个json，然后根据类型type字段展示对应组件，提交时根据key字段组装数据，本文的目标就是根据这个配置文件生成表单页面，同时能正确输出表单数据到控制台。

新建应用

微搭控制台新建应用，选择自定义应用，如果已经有应用也可直接使用。

新建页面

拖入表单组件，表单组件里拖入一个循环展示组件，如下图:

加入表单组件
2. 循环展示组件中添加文本输入、文本域输入、单选、多选、地域选择组件
加入基础组件
右侧的布局方式是可以切换的，水平或者垂直，根据个人喜好自行调整。

页面配置及验证

新建变量，输入json字符串

新增变量
输入json配置字符串
示例json字符串如下:

[{
		type: 1,
		key: 'name',
		title: '姓名',
		options: []
	},
	{
		type: 3,
		key: 'sex',
		title: '性别',
		options: [{
			label: '男',
			value: '1'
		}, {
			label: '女',
			value: '2'
		}]
	},
	{
		type: 5,
		key: 'region',
		title: '所属区域',
		options: []
	},
	{
		type: 4,
		key: 'check',
		title: '出现心理问题时，您会选择',
		options: [{
			label: '寻求父母老师的帮助',
			value: '1'
		}, {
			label: '向朋友同学倾诉',
			value: '2'
		}, {
			label: '寻求专业的心理医生帮助',
			value: '3'
		}, {
			label: '向学校心理咨询室咨询',
			value: '4'
		}, {
			label: '暴力发泄（如摔东西、打架等）',
			value: '5'
		}, {
			label: '自我消化，不告诉任何人',
			value: '6'
		}, {
			label: '其他',
			value: '7'
		}]
	},
	{
		type: 2, // 1 文本输入 2 文本域输入 3 单选 4 多选 5 地域选择 6 其他扩展组件,如电话、邮箱等自行扩展
		key: 'others', //提交时的字段
		title: '您还有其他的什么诉求',
		options: []
	}
]