低代码之可视化搭建
低代码可视化搭建平台选型
引言
低代码可视化搭建平台通过拖拽式操作、组件化配置，让非技术人员也能快速完成页面或内容制作，极大提升了运营与开发效率。本文针对主流开源可视化搭建项目进行深度梳理，从技术栈、核心功能、适用场景等维度展开对比，为团队选型提供参考。
核心选型对比
1. Quark-H5
项目定位：基于 Vue2 + Koa2 的轻量级 H5 制作工具，定位类似易企秀、百度 H5，适合快速生成活动页、营销页。
技术栈
- 前端：Vue2、Vuex、Sass、Element-UI、Lodash
- 服务端：Koa2、MongoDB
- 环境要求：Node 14、Python 2.X
核心设计思路
编辑器生成页面 JSON 数据，服务端负责存取 JSON，渲染时将 JSON 交给前端模板引擎处理。数据结构定义清晰：
- 页面工程数据：包含标题、描述、封面、多页配置、分享设置等；
- 单页数据：包含页面名称、元素列表、公共样式、页面配置；
- 元素数据：包含组件名、动画、样式、事件、属性值等。
功能亮点
- 动态组件渲染：基于 Vue 动态组件特性，通过 JSON 配置渲染页面元素；
- 组件库管理：支持全局/按需引入组件，可扩展自定义组件库；
- 工程化结构：前后端分离，包含
client（前端）、server（服务端）、engine-template（模板引擎）等模块。
部署与开发
- 本地开发：需启动 MongoDB，分别运行
npm run dev-client（前端）和npm run dev-server（服务端）； - 生产部署：需全局安装 PM2，通过
npm run start启动。
优缺点
| 优点 | 缺点 |
|---|---|
| 架构清晰，代码易读，适合二次开发 | 技术栈较老（Vue2），后续维护成本较高 |
| 组件扩展灵活，支持自定义组件 | 无官方在线 Demo，需本地部署体验 |
| 前后端分离，服务端可独立扩展 | 部分功能需自行完善（如高级动画、表单） |
适用场景
- 团队熟悉 Vue2 技术栈；
- 需快速搭建轻量级 H5 活动页、营销页；
- 对组件定制化有较高需求。
项目地址：https://github.com/huangwei9527/quark-h5
2. Luban-H5
项目定位：基于 Vue2.0 的移动端页面拖拽生成平台，功能完善，类似易企秀、Maka，适合快速生成移动端 H5。
技术栈
- 前端：Vue.js
- 后端：Strapi（开源 Headless CMS）
- 存储：Sqlite（默认，可扩展）
核心功能
编辑器能力
- 参考线、吸附对齐、组件拖拽变形；
- 元素复制/删除/编辑，页面新增/复制/删除；
- 快速预览、撤销/重做、二维码预览。
组件系统
- 基础组件：文字、普通按钮、表单按钮、表单输入框；
- 媒体组件：普通图片、背景图、背景音乐、视频（Iframe 形式）。
增强功能
- PSD 一键转 H5（已调研，可实现）；
- 图片库、第三方无版权图片搜索；
- 自定义脚本（已调研，可实现）。
后端 API
- 作品创建/保存/更新；
- 表单数据收集、展示；
- 在线预览、二维码预览。
部署与开发
- 一键脚本：推荐使用
./luban-h5.sh init和./luban-h5.sh start快速启动； - 本地安装：需分别启动后端（
back-end/h5-api）和前端（front-end/h5）。
优缺点
| 优点 | 缺点 |
|---|---|
| 功能完善，编辑器体验流畅 | 基于 Vue2，技术栈较老 |
| 有在线 Demo、中文文档，社区活跃 | 部分增强功能（如 PSD 转 H5）仍在调研中 |
| 后端基于 Strapi，扩展灵活 | 移动端优先，PC 端适配较弱 |
适用场景
- 需快速生成移动端 H5 页面；
- 对编辑器交互体验有较高要求；
- 需要表单数据收集功能。
项目地址：https://github.com/ly525/luban-h5
3. H5-Dooring
项目定位：功能强大、高可扩展的 H5 可视化页面配置解决方案，定位企业级低代码平台，支持私有化部署。
技术栈
- 前端：React
- 后端：Node.js（Koa）
- 其他：支持桌面软件（Dooring-electron）、私有化部署。
核心功能
编辑器能力
- 引导线、底层组件、可视化组件、媒体组件、产品组件；
- 拖拽配置、表单设计器、多页面管理（复制/编辑/删除/新增）；
- 组件动画、组件交互、数据源管理；
- 快速预览、真机预览、撤销/重做、微信分享、快捷键、模板库。
增强功能
- 上传 JSON 一键转 H5；
- 图片库、代码能力（下载源码、下载 dis 包）；
- 桌面软件（Dooring-electron），支持离线使用。
后端 API
- 作品创建/保存/更新、用户管理/权限管理；
- 一键智能分析、数据看板；
- 表单数据收集/展示/分析/一键导出 Excel/多条件搜索；
- 在线预览、二维码预览、模板管理、代码接口。
部署与开发
- 本地启动：
yarn start或cnpm run start，访问http://localhost:port/h5_plus； - 私有化部署：支持将代码直接部署到服务器，或使用 Dooring-electron 桌面版。
优缺点
| 优点 | 缺点 |
|---|---|
| 功能强大，覆盖企业级需求（用户权限、表单分析等） | 部分高级功能可能需结合付费服务 |
| 技术栈较新（React），社区活跃 | 代码复杂度较高，二次开发门槛略高 |
| 支持私有化部署、桌面软件 | 文档以中文为主，英文支持较弱 |
适用场景
- 企业级 H5 页面搭建，需要用户权限管理；
- 需表单数据收集、分析、导出；
- 对私有化部署、离线使用有需求。
项目地址：https://github.com/MrXujiang/h5-Dooring
4. Shida（视搭）
项目定位：视频可视化搭建项目，通过拖拽快速生产短视频，思路类似 H5 搭建工具，行业内较少见的开源视频制作方案。
技术栈
- 前端：Fork 自 Quark-H5（Vue2）；
- 后端：基于 FFCreator（Node.js 短视频加工库）；
- 数据库：MongoDB；
- 其他：依赖安装时自动拉取 FFmpeg 二进制包。
核心设计
- 前端复用 Quark-H5 的可视化搭建能力，用户通过拖拽添加图片、视频片段、背景音乐；
- 后端基于 FFCreator 完成视频合成，只需简单配置即可生成短视频。
部署与开发
- 需启动 MongoDB，配置文件在
/server/config/index.js； - 依赖安装时会自动拉取 FFmpeg 二进制包；
- 启动前端：
npm run watch-publish； - 启动服务端：
npm run dev-server。
优缺点
| 优点 | 缺点 |
|---|---|
| 视频可视化搭建思路新颖，填补市场空白 | 项目相对小众，社区活跃度较低 |
| 基于成熟的 Quark-H5 和 FFCreator，稳定性较好 | 文档较少，二次开发需自行探索 |
| 拖拽式操作，非技术人员也能快速上手 | 视频合成对服务器性能有一定要求 |
适用场景
- 需快速生成短视频（如营销视频、活动视频）；
- 团队有 Node.js 开发能力，可自行扩展；
- 对视频制作效率有较高要求。
项目地址：https://github.com/tnfe/shida
5. 更多低代码平台参考
如需探索更多低代码方案，可参考 awesome-lowcode 仓库，该仓库汇总了国内主流低代码平台，包括：
- 全栈平台：阿里云凤蝶、宜搭、腾讯积木、活字格等；
- 仅前端部分：MAKA、易企秀、稿定设计等；
- 其他方向：表单设计、大屏可视化、3D 园区等。
仓库地址：https://github.com/taowen/awesome-lowcode#%E9%A1%B5%E9%9D%A2%E6%90%AD%E5%BB%BA
综合选型建议
| 业务需求 | 推荐平台 | 核心理由 |
|---|---|---|
| 快速搭建轻量级 H5 活动页 | Quark-H5 / Luban-H5 | Quark-H5 轻量易扩展，Luban-H5 功能更完善 |
| 企业级应用，需用户权限、表单分析 | H5-Dooring | 覆盖企业级需求，支持私有化部署 |
| 视频可视化制作 | Shida | 开源视频搭建方案，思路新颖 |
| 探索更多低代码方向 | awesome-lowcode | 汇总国内主流平台，可按需选择 |
总结
低代码可视化搭建平台的选型需结合团队技术栈、业务需求、维护成本等因素综合考虑：
- 若团队熟悉 Vue2，Quark-H5 或 Luban-H5 是不错的选择；
- 若需企业级功能，H5-Dooring 更合适；
- 若有视频制作需求，Shida 提供了新的思路。
希望本文能为团队选型提供参考，也欢迎大家在实践中探索更多可能性。