前言作者之前写过一篇关于如何设计动态表单配置平台的文章，但是由于作者电脑问题和代码丢失，后来重新实现了一套表单设计器，并优化了之前的设计方法，特地做了一个总结和回顾。您将获得动态表单开发的总体思路。可视化领域的表单引擎从零开始实现动态表单设计器。使用H5-Dooring开发表单设计平台。按照习惯，我们先来看看表单设计器的效果展示：上图中我们将表单设计器集成到H5-Dooring中，使其可以通过拖拽的方式生成表单。其次，我们可以根据右边的配置项动态添加一个表单组件或者修改组件字段和数据源。配置表单后，我们还可以自定义表单提交的api接口地址，实现用户数据的溯源。在开发之前，先分析一下动态表单设计的大致实现思路。动态表单开发的总体思路1.静态配置列表静态配置列表是最传统的表单配置方式之一。基本思路是利用父表生成配置项，然后实现表单配置。类似下面的方法：早期的网站配置也是类似这个方案实现的。比如我们要自定义网站的主色调，网站的某些组件是否可见。这是一种比较简单的方法。但缺点是每增加一个配置属性，开发者都需要重写一段字段配置代码。这种方式在表单开发上非常不灵活，对代码层的依赖性很强，所以只适用于小型配置系统。比如个人网站，简单的自定义表单。2、基于jsonschema的动态表单配置基于jsonschema的动态表单配置有两种实现方案。一种是支持在线修改json文件实现自定义，另一种是完全无需代码即可操作，但前提需要提供一套常用的表单模板。类似于以下情况：该方案可以实现基本的形式自治。也是本文实现的主要解决方案。至于网上写json文件的方案。笔者之前也有成熟的方案，具体可以参考：基于jsoneditor二次封装可实时预览的json编辑器组件（react版）3.支持在线编码的混合表单设计混合表单设计支持在线编程是目前流行的无代码平台的终极解决方案和思路之一。一方面，它提供了基于jsonschema的动态表单配置。对于一些需要在线设计组件方案的强定制机型，采用在线编程的方式，将其实时封装成动态组件。最后根据平台的组件约定实现组件库。方式。如下图所示：可以使用react-codemirror2或者react-monaco-editor插件实现在线代码编辑。至于在线打包，我们可以使用nodejs来实现。我在做Dooring项目的在线下载代码时使用了这个方案。如果你有兴趣，你可以了解一下。可视化领域的表单引擎可视化领域一方面强调图形的设计（可视化），另一方面是动态表单。比如我们要傻傻地改变一个图的数据、属性、交互等，就需要借助表单的桥梁来实现：所以我们需要设计一个适合公司产品的“表单引擎”根据图形组件动态更改数据。类型呈现不同的表单配置。这个思路也是表单设计者要解决的问题之一。在后面的文章中我们将详细介绍实现过程。从零开始实现动态表单设计器在实现表单设计器之前，我们先梳理一下思路和需求。在笔者最初的草图中，是这样的：从草图中，我们可以提取出如下任务信息：定义一组表单组件库，确定表单的全局属性配置，实现表单操作curd（增、删）、检查和修改）。这里我们总结几种常用的。表单组件如下：单行文本、单行文本、多行文本、下拉框、文件上传日期框、数值输入框，以上基本满足我们日常开发需求，其次，我们可以还有开发数据源表单组件，列表组件，比如dooring的实现Like：类似于颜色面板，我们可以根据业务需要定制。完成表单组件库后，我们需要根据配置项进行动态渲染。实现思路也有两种，一种类似于多条件判断，如下：{item.type==='Number'&&
