本文将介绍如何对现有的低代码平台进行升级，实现零代码开发。让后端同学或者非技术用户也能轻松参与到页面的构建中。本文档旨在为技术和非技术人员提供思路和实践，利用这些平台解决常见的业务需求，提高工作效率。

引言

低代码： 是一种可视化的应用开发方法，用户通过图形化界面进行拖拽组件设置参数和少量代码来快速的构建和交付应用程序。

零代码： 基于低代码平台结合业务进行定制，用户不需要重复的进行拖找组件而是直接生成页面的方式，实现零代码生成应用程序。

低代码平台的实现思路

简易版效果

笔者搭建了个简易的低代码平台，用此项目说明低代码需要遵循的基本设计思路以及实现方案，效果请看下图：

在搭建端完成页面的搭建后，平台会生成应用访问链接，用户即可通过链接来访问新创建的应用。那么这一过程是如何实现的呢？接下来就进入正题！

组件列表 - (物料)

组件列表是物料的一部分，是暴露给用户提供选择的集合，这里代表提供给用户进行搭建的低代码组件的集合，也是整个低代码平台的核心部分。

为了保证组件的唯一性以及搭建器和用户访问的页面展示保持一致，我们需要给每一个组件都设定一个相同规则，也就是都需要保证低代码平台的协议。

在上图左侧栏提供用户选择对应的组件。

这里拿 Title 组件举例：

• Title 组件的唯一标识
• PropComponent：props 中存储组件的配置，用户可通过右侧栏组件信息中进行自定义修改
• Component：组件渲染的 JSX
• defaultProps：组件初始时的默认属性

// title组件的配置
export default {
  /** 标题 */
  title: '标题',
  /** 组件类型 */
  type: 'questionTitle',
  /** 组件右侧属性 */
  PropComponent,
  /** 组件JSX */
  Component,
  /** 默认的属性 */
  defaultProps: QuestionTitleDefaultProps,
};

其他组件同理，最后将所有设置完成的组件全部整理成一个数组，在 ComponentLibs 中即可进行 map 渲染至页面上

// 统一, 组件的配置 type
type ComponentConfType = {
  /** 组件标题 */
  title: string
  /** 组件类型 */
  type: string
  /** 组件右侧显示的组件 */
  PropComponent: FC<ComponentPropsType>
  /** 组件本身 */
  Component: FC<ComponentPropsType>
  /** 组件配置项 */
  defaultProps: ComponentPropsType
}

// 全部的组件配置的列表
const componentsConfList: ComponentConfType[] = [
  TitleConf,
  InputConf,
  ParagraphConf,
  InfoConf,
  TextAreaConf,
  RadioConf
  CheckboxConf
]

至于左侧还有组件的归类，例如：段落集合、输入框集合、选择框集合可以通过将相同集合的组件进行整理，最终在 map 时按照 componentConfGroup 给每一个组件上方增加一个标题用来显示组件的区域，下方则就是对应的组件集合。

// 组件配置列表
export const componentConfGroup = [
  {
    groupId: 'text',
    groupName: '段落集合',
    component: [TitleConf, InfoConf, ParagraphConf],
  },
  {
    groupId: 'input',
    groupName: '输入框集合',
    component: [InputConf, TextAreaConf],
  },

  {
    groupId: 'radio',
    groupName: '选择框集合',
    component: [RadioConf, CheckboxConf],
  },
];

生成 schema

用户搭建完成后，需要将画布中的组件及其设置的属性用某种方式来进行描述，最终发送给服务器进行存储，此时用 JSON 来描述最为合适，例如下方为完整的 schema：

• 将 js css 代码拆入页面中
• 页面渲染 componentList 列表
• 通过 type 找到对应的组件物料并渲染
• props 为当前组件设置的属性

通过 schema + 物料即可生成在编辑器中进行创建的页面到项目中

{
    // schemaId
    "id": "150000199805273617",
    "title": "低代码项目标题",
    "desc": "低代码项目名称",
    // 项目JS代码
    "js": "alert('欢迎使用低代码平台');",
    // 项目css代码
    "css": "body:{ width:100%; height:100%; }",
    "isPublished": true, // 是否发布
    "isDeleted": false, // 是否被移入回收站
    // 组件描述列表
    "componentList": [
        {
            // id
            "fe_id": "c1",
            // 组件类型
            "type": "questionInfo",
            // 标题
            "title": "信息",
            // 是否隐藏
            "isHidden": false,
            // 是否被锁定
            "isLocked": false,
            // 组件参数
            "props": {
                "title": "标题组件",
                "desc": "标题描述..."
            }
        },
        // ...
    ]
}

低代码搭建协议规范

通过以上介绍，大家会发现不论是搭建所需要的物料还是生成页面的 schema，都遵循着相同的规则：

• 物料配置对象格式都是统一结构
• 组件 id 的唯一性
• 组件类型在物料和 schema 中的统一
• schema 关于组件描述的格式都相同

定制规范的目的不仅是为了让上层低代码编辑器的产出物 (低代码业务组件、区块、应用) 保持一致性，可跨低代码研发平台进行流通而提效，也是保证了语义清晰，可读性强。

真实世界的低代码平台

文章的上一部分提到了开发低代码平台的几个要点，如果从零到一开发低代码平台是费时费力的。

在实践中，我们可以基于开源的低代码去做二次开发，比如阿里开源的 LowCodeEngine^[1]，此平台提供了丰富的物料以及插件系统，具有较大的拓展性。其核心是优秀的出码能力，即将低代码编排出的 schema 进行解析并转换成最终可执行代码的过程。

针对特定的场景可以只关注 schema 进行搭建渲染，利用这一特点就可以免去拖拽过程引出零代码的解决方案。

下面是一段 demo，根据 schema 完成页面渲染。

import ReactRenderer from '@ali/lowcode-react-renderer';
import ReactDOM from 'react-dom';
import { Button } from '@alifd/next';

const schema = {
  componentName: 'Page',
  props: {},
  children: [
    {
      componentName: 'Button',
      props: {
        type: 'primary',
        style: {
          color: '#2077ff',
        },
      },
      children: '确定',
    },
  ],
};

const App = () => <ReactRenderer schema={schema} components={{ Button }} />;

低代码虽然降低了业务的开发成本，但是对于后端研发来说，还得掌握一定的前端知识后才可以流畅使用低代码平台。因此，为了进一步降低非前端的上手成本，可以更将一些通用页面 (数据查询页面，列表展示页面等) 再次封装，做到不写代码也可以实现这些功能。

这就是我们下文要谈到的 “零代码”。

升级至零代码

使用场景

针对特定页面且使用率较高的场景，例如：可视化图表类，表单类，表格搜索类等。

通过三种零代码的方式实现页面的快速搭建。

引入模版

页面是由一个个组件构成的，同时也可以将一个页面视作为一个大组件，也就是将一个通用的页面 schema 视作一个类型的模版，在搭建阶段只需要让使用者输入页面必要字段的 props。

举个例子：拿上图带操作的表单搜索页为例，用户需要选择指定的模板创建，并进入到搭建器编辑页，编辑页已提供了一个完整的页面，仅仅只需要修改表单字段及接口地址即可。

接口定制

接口定制就是识别接口返回的 queryList，并将每一项中的字段进行解析从而将命中组件，并将模版 schema 中对应的属性进行替换，最后并生成页面，从而免去修改属性或替换组件的过程。

因为如果选择通过模版创建时，虽然可以立即生成页面，但需要进行二次调整，如果字段种类较多，还是略显繁琐。

还是拿带操作的表单搜索页这种类型的页面举例，在使用查询接口时，后端返回的列表数据所有的字段，基本上最终都会展示在表格中，例如可以观察下方请求 queryList 返回的数据：

{
  "code": 200,
  "data": {
    "list": [
      {
        "updatedTime": 1717492078000,
        "createdTime": 1717492078000,
        "path": "asd",
        "name": "123123",
        "userType": "driver",
        "id": 39367,
        "type": "invite"
      }
    ],
    "total": 100,
    "pageNo": 1,
    "pageSize": 20
  }
}

在 list 列表中的每一项内容，其实就是需要展示在表格中的每一列字段，在引入模版的方法中，已经有了生成此类页面的 **schema，**接下来需要做的就是识别和解析：接口字段 → schema 组件+属性。

• 通过识别字段类型 (string、boolean、number、date) 可以分别对应输入框组件、switch 组件、数字输入框组件、时间选择器组件、下拉选择器等
• 设置字段枚举，表示该字段命中的组件为下拉选择器
• 针对 date 类型字段，可提供自定义日期格式化、时间区间等
• 针对 CRUD 页面提供字段是否支持展示，修改，删除等选项定制
• 可结合 AI 帮助完成自动字段翻译功能，以中文名称展示在表头中

... 通过特定场景增加更加丰富的配置选项

最后将更新后的属性替换至模版中的 schema，那么就完成了接口定制零代码的方案。

一体化

之前开发流程是先开发好服务端接口，待接口测试通过之后，再根据需求选择对应的模板进行搭建。这个流程对于新手来说并不友好，需要熟悉前端知识和低代码搭建规则。

一体化目的是需要针对后台表单类提供一键生成单表 CRUD 接口的能力，简单的单表 CRUD 无需关注以上流程和问题便可搭建后台应用。

引入 DB

借助 **GraphQL：**paging (查询)、insertRecord (新增)、updateRecord (更新)、deleteRecord (删除)，四种方式操作 DB，按照 GraphQL 语法，在 JS 中集成 CRUD，即可代替 API 接口。

数据建模自动化

基于我们研发前端搭建平台的实体建模能力，快速根据数据库和表，搭建相应数据模型。

• DB 配置

• 数据模型预设置

将当前表所有的字段列举成预设表格，提供自定义设置，目的是为了生成 schema

页面编排

基于模型自动化生产页面。针对特殊需求，拖拉拽可视化操作，实现各类复杂业务应用开发需求。

一体化特点

基于 “一体化” 的能力，对于特定场景的业务，无需额外的前端与后端开发资源介入，也能做到快速上线。与低代码方案对比，门槛进一步降低，掌握可视化的操作后即可搭建前后端应用。

使用场景

• 后台管理页面
• 一键生成前后端
• 后端接口支持托管+私有下载
• H5 Web 应用快速实现 (活动、业务大屏等)
• 大量内部维护工具开发

总结

本文介绍了前端低代码到零代码搭建平台的演进。货拉拉低代码搭建平台上线后广受好评，后端同学通过平台快速生成应用，零代码方式极大缩短开发时间，特定场景下的业务开发工时缩短 45%，显著提高了研发体验。对于前端同学来说，可以更加专注于复杂场景下前端页面的设计与实现。

参考资料