橙武低代码演示：

地址：橙武低代码

账号：13800000001/123456

前言

在构建企业级低代码平台“橙武”的过程中，前端框架的选择是整个架构设计中至关重要的一环。前端不仅是平台展示的门面，更承载了大量动态表单、流程组件、可视化配置器等复杂交互场景。我们评估了 React + 自研组件体系、Vue + Element、Ant Design Pro、以及低代码专用套件如 Formily、amis 等多个选项，最终选定 Amis 作为前端核心驱动引擎。本篇文章将详细阐述我们做出这个选择的背景、考量因素、实践成果，并与其他主流架构进行横向对比。

---

一、我们需要怎样的前端框架？

在正式引入 Amis 之前，我们对前端框架提出了如下核心诉求：

• 动态加载能力强：表单、页面、流程节点等需要通过后端 JSON 即时渲染生成，不能依赖前端编译。

• 可视化驱动：平台需支持“搭积木”式页面设计，所见即所得。

• 兼容复杂交互：如联动逻辑、条件隐藏、嵌套组件、数据源懒加载等。

• 适配多端：SaaS 模式下，客户定制需求强烈，需要支持一套 DSL 生成不同风格。

• 低成本维护：要避免大量重复开发，减轻前端工程师负担。

从需求来看，传统组件库并不能满足这些高阶动态性与可配置能力，于是我们把目光转向了Schema 驱动型前端渲染框架，也即 Amis 这一赛道。

---

二、Amis 简介：Schema 驱动的前端引擎

Amis 是百度开源的一款低代码前端渲染引擎，其最大特点是通过JSON Schema 定义 UI 结构和行为，无需手写 HTML/JSX，后端返回配置即可动态生成页面。

Amis 的核心优势包括：

• 🔧 动态配置生成页面，不依赖打包或前端编译。

• ⚙️ 内建复杂表单、CRUD 表格、条件展示、联动逻辑、图表等上百种组件。

• 🔄 响应式组件行为控制，支持条件渲染、数据映射、事件动作链。

• 📦 与后端强绑定：内建对接口拉取、提交、分页、校验等全生命周期的支持。

• 🎨 所见即所得编辑器：支持在线拖拽设计页面结构。

• 📚 活跃社区与良好文档，定期更新。

---

三、为何不是 Vue + Element？

Vue + Element UI 是企业内部系统中最常见的组合，但存在如下局限：

对比维度	Vue + Element	Amis
动态加载	页面级别可异步，但表单组件难以纯配置加载	真正的 Schema 渲染，纯 JSON 即可生成
表单复杂度	高级表单逻辑需要大量自定义代码	自带动态校验、条件显示、联动、远程选项等能力
表单设计器	无官方支持，需要自研	官方提供可拖拽式编辑器
项目扩展性	新页面开发需前端介入开发	后端通过 Schema 输出即可新增页面
多租户适配	需手动抽象组件、维护逻辑分支	Schema 模型天然适配

Vue 本质上是一个框架，而非一个完整的“页面生成引擎”，虽然灵活，但也意味着需要大量开发投入来造轮子，在低代码领域并不高效。

---

四、与 Ant Design Pro、Formily 等的对比

我们也调研过 Ant Design Pro（AntD 的脚手架项目）与阿里体系下的 Formily，二者虽然都有不错的组件封装能力，但与 Amis 相比，仍存在如下差异：

✅ Amis vs Ant Design Pro

维度	Ant Design Pro	Amis
渲染方式	JSX 静态开发	JSON Schema 动态驱动
动态表单能力	限制较多，需组合 hooks 实现	内建全部能力，声明式配置即可
组件覆盖率	覆盖常见场景，偏后台	超过 100+ 场景组件，覆盖报表、图表、图像等
多租户能力	需靠权限路由区分	一套 Schema 多租户配置适配

✅ Amis vs Formily

维度	Formily	Amis
技术定位	表单引擎	页面引擎（含表单）
使用方式	Schema + JSX 混合开发	纯 Schema 无需前端编译
拓展组件	较为复杂	插槽、Renderer 易拓展

Formily 更偏向表单领域，虽然 Schema 化能力强，但仍需要前端项目参与集成，不适合我们对“零前端开发介入”这一目标。

---

五、实践效果：Amis 给橙武带来了什么？

Amis 在我们平台的落地场景非常广泛，以下是几个核心模块的应用实践：

1. 动态表单生成器

通过后端配置 JSON Schema，动态生成包括：

• 嵌套表格

• 动态校验规则

• 远程字典拉取

• 表单间联动（如选择省份联动城市）

• 条件显隐（如选中“是”才展示附加信息）

这一过程不需要前端任何介入，完全由后端控制，大大加快了交付效率。

2. CRUD 页面模板

我们用 Amis 构建了统一的增删改查页面模版，支持：

• 接口驱动的数据拉取与分页

• 自定义操作按钮（批量删除、导入导出）

• 内嵌弹窗表单 / Drawer 编辑

• 表格列级别权限控制

这些组件只需修改 Schema 配置即可复用到不同模块中，维护成本极低。

3. 可视化流程配置器嵌套

我们将 LogicFlow 编辑器嵌套进 Amis 页面中，使得用户在一个页面中即可：

• 配置节点逻辑

• 设置每个节点对应的表单界面（Schema）

• 调试节点之间数据流

这一流程与 Amis 的嵌套能力结合非常流畅，不需破坏前端布局逻辑。

---

六、我们踩过的坑与思考

Amis 也并非完美，我们在使用过程中遇到如下问题：

1. Schema 结构较为复杂：某些深层嵌套字段较难调试，需结合文档阅读；

2. 默认样式偏百度系：我们花时间进行统一风格改造；

3. 组件扩展需要二次封装：比如自定义图表、图片上传组件需要基于 Renderer 编写插件；

4. 升级需谨慎：低代码平台一旦升级影响大，需测试全量页面 Schema 是否兼容。

我们采用的应对策略是：

• 统一 Schema 生成器服务，避免重复拼写；

• 利用 amis-admin 管理项目结构；

• 对接后端时保持接口协议稳定（尤其是分页、查询参数名等）；

• 结合 E2E 测试保证组件行为一致性。

---

七、总结：为什么 Amis 是橙武的最佳选择？

归纳来看，Amis 之所以被我们最终选中，是因为它在低代码平台建设的场景中具备压倒性优势：

• ✅ Schema 渲染能力完整，支持几乎所有我们需要的前端组件；

• ✅ 真正实现前后端解耦，后端可独立生成页面结构；

• ✅ 动态加载无须前端编译，支持在线配置与即时刷新；

• ✅ 开箱即用，极大减少开发时间；

• ✅ 可视化编辑器支持，让非技术用户也能快速配置页面。

在对比 Vue、Ant Design Pro、Formily 等方案之后，Amis 在“动态性”“配置驱动”“低代码平台友好度”方面表现最为出色。配合我们的后端 Schema 管理与数据权限体系，Amis 成为了橙武平台的前端基石。