网站导航
> 技术文档 > LowCodeEngine-阿里巴巴钉钉团队开源的低代码引擎

LowCodeEngine-阿里巴巴钉钉团队开源的低代码引擎

网友: 技术文档 2025-09-03 23:55:59

简介

LowCodeEngine 是由阿里巴巴钉钉团队开源的低代码引擎，旨在通过拖拽、配置等简单操作，帮助开发者快速构建复杂的系统页面，提升开发效率和质量。以下是其相关介绍：
 

  • 特性
    • 面向扩展设计：提炼自企业级低代码平台的内核引擎，奉行最小内核、最强生态的设计理念，具有高度可扩展性。
    • 高质量生态元素：提供开箱即用的高质量生态元素，包括物料体系、设置器、插件等。
    • 完善工具链：拥有完善的工具链，支持物料体系、设置器、插件等生态元素的全链路研发周期。
    • 强大扩展能力：扩展能力强大，已支撑 100 多个各种类型的低代码平台。
    • 技术选型：基于 TypeScript 开发，提供完整的类型定义文件，能生成基于 React 的前端代码。
  • 功能
    • 可视化页面搭建：通过简单的拖拽即可完成应用页面开发，对前端技能没有要求。
    • 可视化模型设计：使业务相关的数据存储更容易理解，支持业务化的模型设计。
    • 可视化流程设计：可以配置业务流程或审批流程，通过简单的点线连接进行设计。
    • 可视化报表及数据分析：具备 BI 数据分析能力，可通过拖拽选择定义自定义分析报表。
    • 可视化服务与数据开放、集成：支持与其他系统的互联互通。
    • 权限、角色设置标准化和业务化：通过策略规则配置进行数据和操作权限的精细化管理。
  • 使用方法
    • 首先需要下载 LowCodeEngine 编辑器的示例代码，下载地址是https://github.com/alibaba/lowcode-demo。
    • 下载成功后解压到指定目录，安装此项目需要使用 Node.js 和 npm，确保已经安装完毕，由于依赖中有些 npm 源无法访问，推荐使用 cnpm 来安装。先使用命令npm install -g cnpm --registry=https://registry.npmmirror.com安装 cnpm。
    • cnpm 安装成功后，进入解压目录使用命令cnpm install安装依赖。
    • 依赖安装完成后，使用npm start命令启动项目。
    • 项目运行成功后将运行在 5556 端口上，访问地址是http://localhost:5556。

该引擎全面遵循《阿里巴巴中后端前端基础构建协议规范》和《阿里巴巴中后端前端素材协议规范》。兼容主流浏览器： Chrome >= 80，Edge >= 80，safari 和 firefox 最近 2 个 版本。

特性

  • 🌈 提炼自企业级低代码平台的面向扩展设计的内核引擎，奉行最小内核，最强生态的设计理念
  • 📦 开箱即用的高质量生态元素，包括 物料体系、设置器、插件 等
  • ⚙️ 完善的工具链，支持 物料体系、设置器、插件 等生态元素的全链路研发周期
  • 🔌 强大的扩展能力，已支撑 100+ 个各种类型低代码平台
  • 🛡 使用 TypeScript 开发，提供完整的类型定义文件

最新实践和社区案例的完整指南

使用 LowCodeEngine 进行二次开发需结合其 物料体系、插件机制、设置器定制、架构扩展 等核心能力，通过官方工具链和开放 API 实现深度定制。以下是基于最新实践和社区案例的完整指南：

一、核心开发方向与技术路径

LowCodeEngine 的二次开发以 最小内核 + 生态扩展 为设计理念，支持以下场景：

 

  1. 物料体系扩展：开发自定义组件、区块（可复用模板）、资产包（如主题、图标库）。
  2. 插件机制增强：扩展编辑器功能（如新增工具栏、属性面板）或业务逻辑（如审批流集成）。
  3. 设置器深度定制：自定义组件属性的配置方式（如复杂表单、动态联动）。
  4. 架构级改造：集成第三方组件库、替换渲染引擎（如 React/Vue 切换）或接入企业级系统（如权限中心、数据中台）。

二、开发流程与操作步骤

1. 开发环境搭建
  • 克隆示例项目：bash
git clone https://github.com/alibaba/lowcode-demo.gitcd lowcode-demo

 

  • 安装依赖（推荐使用 cnpm 加速）：bash
npm install -g cnpm --registry=https://registry.npmmirror.comcnpm install

 

  • 启动本地调试：bash
npm start

访问 http://localhost:5556 即可进入编辑器界面。

2. 自定义物料开发

物料是 LowCodeEngine 的核心扩展单元，支持 组件、区块、资产包 三种类型。以下以 自定义 React 组件 为例：

步骤 1：创建物料项目

bash

# 使用官方 CLI 创建物料库项目npm init @alilc/element my-material-project# 选择类型为 \"组件/物料\"
步骤 2：开发组件逻辑

在 src/components 目录下新建组件文件夹（如 custom-button），编写组件代码（基于 React/TS）：

 

tsx

// src/components/custom-button/index.tsximport React from \'react\';import PropTypes from \'prop-types\';interface CustomButtonProps { text: string; backgroundColor: string;}const CustomButton: React.FC = ({ text, backgroundColor }) => { return ( <button style={{ backgroundColor, padding: \'8px 16px\' }} onClick={() => alert(`Clicked: ${text}`)} > {text}  );};CustomButton.propTypes = { text: PropTypes.string.isRequired, backgroundColor: PropTypes.string,};export default CustomButton;
步骤 3：配置物料描述文件

在 lowcode/meta.ts 中定义组件的配置项、设置器及属性规则：

 

typescript

// lowcode/meta.tsimport { register } from \'@alilc/lowcode-engine\';register(\'custom-button\', { title: { \'zh-CN\': \'自定义按钮\', \'en-US\': \'Custom Button\', }, component: { isContainer: false, componentName: \'CustomButton\', // 对应组件导出名称 path: \'src/components/custom-button\', // 组件路径 }, props: { text: { title: { \'zh-CN\': \'按钮文本\' }, type: \'string\', setter: { componentName: \'StringSetter\' }, // 使用内置设置器 default: \'点击我\', }, backgroundColor: { title: { \'zh-CN\': \'背景颜色\' }, type: \'string\', setter: { componentName: \'ColorPickerSetter\' }, // 自定义颜色选择器 default: \'#40a9ff\', }, },});
步骤 4：构建与调试

bash

# 启动本地调试环境npm run lowcode:dev# 构建物料包npm run lowcode:build
步骤 5：集成到编辑器

修改主项目的 assets.json，添加物料库地址：

 

json

{ \"packages\": [ { \"package\": \"my-material-project\", \"version\": \"0.0.1\", \"urls\": [ \"http://localhost:3333/build/lowcode/render/default/view.js\", \"http://localhost:3333/build/lowcode/render/default/view.css\" ], \"editUrls\": [ \"http://localhost:3333/build/lowcode/view.js\", \"http://localhost:3333/build/lowcode/view.css\" ] } ]}
3. 插件开发与扩展

插件是 LowCodeEngine 的功能扩展单元，可修改编辑器布局、添加业务逻辑或集成第三方服务。以下是 事件管理插件 的开发示例：

步骤 1：创建插件项目

bash

npm init @alilc/element my-plugin-project# 选择类型为 \"插件\"
步骤 2：编写插件逻辑

在 src/index.tsx 中通过 ctx.skeleton.add 注册自定义面板：

 

typescript

// src/index.tsximport { registerPlugin } from \'@alilc/lowcode-engine\';registerPlugin(\'event-manager-plugin\', (ctx) => { return { async init() { // 添加右侧属性面板 ctx.skeleton.add({ area: \'rightArea\', type: \'Panel\', name: \'event-manager\', content: { componentName: \'EventManagerPanel\', // 自定义面板组件 props: { ctx }, }, }); }, };});
步骤 3：实现面板交互

创建 EventManagerPanel 组件，通过 ctx.event 监听编辑器事件并操作画布：

 

tsx

// src/components/EventManagerPanel.tsximport React, { useEffect } from \'react\';const EventManagerPanel = ({ ctx }: { ctx: any }) => { useEffect(() => { // 监听组件选中事件 ctx.event.on(\'common:selectedComponentsChange\', (components) => { if (components.length) { // 获取选中组件的事件列表 const events = ctx.getComponentEvents(components[0].id); console.log(\'Events:\', events); } }); }, [ctx]); return 
事件管理面板
;};export default EventManagerPanel;
步骤 4：注册与调试

修改主项目的 plugins 配置，引入插件：

 

typescript

// src/plugins.tsimport { register } from \'@alilc/lowcode-engine\';import eventManagerPlugin from \'my-plugin-project\';register(eventManagerPlugin);
4. 设置器深度定制

设置器用于定义组件属性的配置方式，以下是 自定义颜色选择器设置器 的开发示例：

步骤 1：创建设置器项目

bash

npm init @alilc/element my-setter-project# 选择类型为 \"设置器\"
步骤 2：开发设置器组件

tsx

// src/components/ColorPickerSetter.tsximport React, { useState } from \'react\';import { ColorPicker } from \'antd\';const ColorPickerSetter = ({ value, onChange }: { value: string; onChange: (v: string) => void }) => { const [color, setColor] = useState(value || \'#fff\'); const handleChange = (color: string) => { setColor(color); onChange(color); }; return ;};export default ColorPickerSetter;
步骤 3：配置组件引用

在目标组件的 meta.ts 中指定设置器：

 

typescript

// 组件 meta.ts 中的 props 配置backgroundColor: { title: { \'zh-CN\': \'背景颜色\' }, type: \'string\', setter: { componentName: \'ColorPickerSetter\', // 引用自定义设置器 props: {}, }, default: \'#40a9ff\',},

三、高级开发技巧

1. 集成第三方组件库
  • 安装依赖：bash
cnpm install antd --save

 

  • 配置物料引用：typescript
// 在物料 meta.ts 中component: { componentName: \'MyAntdComponent\', path: \'src/components/my-antd-component\', imports: [ { library: \'antd\', specifiers: [\'Button\'], }, ],},

 

2. 扩展渲染逻辑

通过 @alilc/lowcode-engine 的 API 自定义渲染行为：

 

typescript

import { render } from \'@alilc/lowcode-engine\';render(schema, { // 自定义组件解析器 componentResolver: (componentName) => { if (componentName === \'custom-chart\') { return import(\'./CustomChart\').then((mod) => mod.default); } },});
3. 接入企业级系统
  • 数据集成：通过 ctx.http 发起自定义 API 请求：typescript
ctx.http.get(\'/api/user\').then((res) => { // 更新画布数据 ctx.project.currentDocument.setData({ user: res.data });});

 

  • 权限控制：通过 ctx.auth 实现细粒度权限管理：typescript
ctx.auth.can(\'edit:page\', (hasPermission) => { if (!hasPermission) { ctx.skeleton.disable(\'saveButton\'); }});

 

4. 工程化与发布
  • 物料发布：bash
npm publish my-material-project

 

  • 插件集成：将插件打包为独立 npm 包，并在主项目中引入：json
{ \"dependencies\": { \"my-plugin-project\": \"0.0.1\" }}

 

四、最佳实践与注意事项

1. 开发规范
  • 组件设计：
    • 遵循 props 标准化：避免直接操作全局状态，通过 props 传递数据。
    • 支持 受控与非受控模式：通过 value 和 defaultValue 实现双向绑定。
  • 插件开发：
    • 非侵入式扩展：通过 ctx.skeleton.add 注册新功能，避免修改核心代码。
    • 事件监听与清理：使用 ctx.event.on 监听事件，并在插件卸载时通过 off 清理。
2. 性能优化
  • 大型组件优化：
    • 对复杂组件（如大数据表格）启用 虚拟化渲染：typescript
// 在组件 meta.ts 中performance: { virtualization: true,},

 

  • 批量操作：typescript
ctx.project.batchUpdate(() => { // 执行多次画布操作（如批量移动组件）});

 

3. 调试与测试
  • 本地调试：
    • 使用 npm run lowcode:dev 启动热更新，实时查看组件 / 插件修改效果。
    • 通过 console.log(ctx) 打印引擎上下文，调试 API 调用。
  • 单元测试：bash
npm test# 示例测试用例import { mount } from \'@alilc/lowcode-test-utils\';import CustomButton from \'../src/components/custom-button\';test(\'按钮点击事件\', () => { const wrapper = mount(); wrapper.find(\'button\').simulate(\'click\'); expect(alert).toHaveBeenCalledWith(\'Clicked: 测试\');});

 

4. 社区与生态
  • 官方资源：
    • GitHub 仓库：https://github.com/alibaba/lowcode-engine
    • 官方文档：https://lowcode-engine.cn
    • 钉钉交流群：可通过 GitHub 仓库获取入群方式。
  • 生态工具：
    • 物料市场：通过 Parts 造物 管理和发布物料。
    • 出码插件：lowcode-plugin-code-generator 支持代码导出。

五、典型案例参考

案例 1：自定义审批流程插件
  • 功能：在编辑器中添加审批节点配置面板，支持拖拽流程节点并生成 BPMN 2.0 规范文件。
  • 技术点：
    • 使用 antv/g6 实现流程图渲染。
    • 通过 ctx.http 调用后端流程引擎 API。
    • 在插件中注册 导出流程 按钮，触发 ctx.project.exportSchema。
案例 2：复杂表单组件开发
  • 功能：开发支持动态字段、关联查询的高级表单组件（如采购申请单）。
  • 技术点：
    • 在组件内部维护 formData 状态，通过 props.onChange 同步到画布。
    • 使用设置器 FormSetter 实现字段配置可视化。
    • 通过 ctx.dataSource 集成数据源（如数据库、API）。
案例 3：多租户架构集成
  • 功能：基于 LowCodeEngine 构建支持多租户的低代码平台，不同租户拥有独立的物料库和权限策略。
  • 技术点：
    • 在编辑器初始化时通过 tenantId 参数加载对应物料。
    • 通过 ctx.auth 实现租户级数据隔离。
    • 使用 @alilc/lowcode-engine-plugin-multi-tenant 插件管理租户上下文。

 

通过以上方法，开发者可基于 LowCodeEngine 快速构建 高度定制化的低代码平台，覆盖从简单页面搭建到复杂业务系统开发的全场景需求。

网络标签：

相关问题