浅谈低代码应用之表单设计器技术

低代码（Low Code）是一种可视化的应用开发方法，其主要通过较少的代码、以较快的速度来交付应用程序，通过图形化拖拽、参数化配置等更为高效的方式，实现业务平台的快速构建。简而言之，低代码平台提供了一种更快、更高效的方法来构建应用程序，并凭借可视化的方法以及低代码开发平台使开发人员能够拖放预编码块，从而减少编写代码的需要。由于低代码应用的出现，节省了项目开发的时间周期，提高了项目的开发效率，深受中小型企业的追捧。

通常情况下低代码平台具备以下几个能力：可视化页面搭建，通过简单的拖拽完成应用页面开发；可视化模型设计，与业务相关的数据存储变得更容易理解；可视化流程设计，业务流程或审批流程，通过简单的点线连接来进行配置；可视化表单设计，业务流程或审批流程，通过简单的拖拽完成表单页面的配置；由于表单设计器是大多数低代码平台里的常用部件，是比较有代表性的低代码产品形态，本文将围绕表单设计器技术并以前端为技术视角展开讲述。 

作为低代码平台的关键一环，表单设计器通过良好的视觉交互功能以及强大的拖拽功能，快速构建应用程序流程，避免了手动输入代码所带来时间上的浪费。举例来说，过去必须两个星期才可以开发的表格步骤类应用，现如今一般业务员只需2钟头就可进行，大大缩短了周期、提高了业务流程的效率。目前，表单设计器在GitHub上有着广泛的关注量，拥有多种且丰富的开源项目，涉及到的领域包括阿里云、淘宝、天猫、飞猪、亚博科技、安全智能、新零售行业工作台、人工智能实验室等多BU多场景使用，在大型国央企中，OA系统更是依赖于表单设计器模块审批表单，在流程发起的同时填写业务数据，并且表单设计器可扩展程度高，可以根据应用场景进行定制化开发，其重要性不言而喻。

如图所示，以Form-Generator为例表单设计器通常包括五个模块。

【按钮区域】：位于设计器的Head区域，通常包括清空、运行展示、查看获取表单JSON等。

【组件区域】：位于设计器的左侧栏，可以通过拖拽的方式，将控件拖拽到画布中。控件一般分为基础控件、自定义组件和布局控件等。

【ER模型区域】：位于设计器的左侧栏，ER模型页签是以树的形式展示当前表单关联的ER模型所提供的字段和表。支持通过拖拽字段的方式，将字段拖拽到画布上，自动生成对应控件，并自动设置控件属性，方便快捷。

【画布展示区域】：位于设计器的中间核心区，支持通过拖拽的方式调整控件的顺序和嵌套关系。并可以点击控件即选中控件，实现删除和复制操作以及其他定制化功能。

【功能属性区域】：位于设计器的右侧栏，包括表单属性配置以及组件属性配置。具体功能包括，组件、表单样式调整，组件内容配置，表单验证，访问链接，定制化功能等。

Form-Generator作为当前应用最多，评价最好的开源表单设计器，本文将以Form-Generator为例，讲述表单设计器的技术构成，包括技术选型、表单组件渲染、表单渲染、代码生成进行简单介绍。

表单设计器引入的组件渲染部分不再用模板函数，而采用渲染函数以及JSX进行构建，其中的属性值需要进行数据的双向绑定，所以常见的表单设计器多采用VUE渐进式JavaScript框架，如图所示，通过v-model函数建立起属性值和组件的关联性，实现动态的表单渲染。

其次，由于表单设计器需要引入了很多的表单基本元素，这里以ElementUI样式库为例对组件元素进行引入，其引入组件的属性值参考ElementUI官网，ANTD样式库的样式引入与ElementUI大同小异，这里不再细讲。

最后，表单设计器常引入vuedraggable以及节流防抖等插件实现组件拖拽，保证频繁操作过程中系统平稳的运行。

表单组件渲染通过渲染函数和JSX实现，如图所示，以下拉窗为例，__slot__解析文件是支持JSX语法的，保证表单的配置是纯JSON格式的，方便数据库存储和用户配置。之后将数据转化为DOM组件，挂载到表单中实现渲染过程。

表单渲染部分融合了表单样式绑定，组件挂载等内容。如图所示，renderForm()函数为表单渲染函数，通过formConfCopy()函数绑定表单属性，实现动态渲染；通过renderFormItem()函数将表单的组件以不同的样式格式进行渲染，包括Flex布局等等。表单渲染以及组件渲染过程实现了用户的预览功能，将设计器编辑的数据绑定到相关的组件以及表单上，借助渲染功能，灵活编排用户视角的表单。

表单设计器除了面向特定场景的使用，也可以快速生成前端代码，提高开发效率，以选择框为例，我们从生成HTML、CSS、JS代码进行分析。

HTML代码生成如图所示，其中attrBuilder()函数生成一般属性，包括tag、width等，之后对组件的特定属性包括multiple进行定义，如果组件包括其他子组件，例如在选择框中需要引入el-option组件，则需要创建child生成函数将子组件包裹在父组件中。

CSS代码生成一般可以通过对style对象属性值的修改进行设置，对于需要特定设置的CSS样式，将其放入到css.js文件中，如图所示，并通过入口函数进行引入。

JS代码生成依然是通过字符串拼接的方式，生成脚本代码，这里不再赘述，代码生成参考VUE组件编码规则。

表单设计器一般只能满足系统的简单应用，对于系统中的特定需求，需要进行定制化开发，例如动态表单（子表单）、表格组件、浏览按钮等等。如何将定制化组件嵌入到设计器中，我们以浏览按钮为例进行简单的分析。

浏览按钮是下拉窗搜索功能的升级版，其不仅实现远程搜索功能，也可以通过内嵌按钮调出浏览弹窗，选取需要勾选的数据进行代入。

对于这样的功能的引入主要分为三点：

1. 在slot文件中嵌入按钮功能，并增加远程搜索属性；

2. 引入前端状态管理Store，绑定弹窗功能以及存储后台数据；

3. 预览和渲染模块引入浏览弹窗组件。这样听起来是不是很容易，对于这样的外部组件引入问题，通常会需要状态管理绑定组件的属性，它就好比运行在客户端的 Redis，数据是存储在内存中的。所以设计 Store 的过程，本质上和在服务端设计数据库表结构的过程是一样的。

本文通过表单设计器分析了低代码这一类的应用平台的技术方案，并以使用者角度分析其可视化交互策略。随着市场不断变化，企业纷纷拥抱低代码技术平台，加快技术改革，降本增效，低代码平台将会更多的应用在各大数字化平台之中。

借用王智远老师在《如何理解低代码？》中的观点，“查理·芒格有个经典的思维模型叫做10-10-10原则。讲的是在决策时思考三个问题，即：这个决策在10分钟后会产生什么影响？10个月后、10年后呢？在我看来，低代码的价值短期被高估，长期被低估。”

由此看来，低代码平台在未来的潜力发展巨大，最后笔者希望本文能够让大家更多的了解低代码应用，在未来的技术领域中通过低代码技术支撑起高复杂度，高技术、超大规模的应用开发。

文章作者：李书锋

排版设计：王蔚棋

手绘插画：岳   媛