简介

​LowCodeEngine​ 是阿里巴巴开源的一套面向扩展设计的企业级低代码技术体系，提供了一个功能强大、可扩展的低代码开发引擎。它从企业级低代码平台中提取出扩展导向的内核引擎，追求最小内核和最强生态的设计理念，为开发者提供构建低代码平台的基础能力。

🔗 ​GitHub地址​：

https://github.com/alibaba/lowcode-engine

🚀 ​核心价值​：

企业级低代码 · 可扩展架构 · 强大生态 · 开源免费

​项目背景​：

  • ​低代码趋势​：响应企业数字化转型对低代码开发的需求

  • ​平台碎片化​：解决各业务线低代码平台重复建设问题

  • ​标准化需求​：提供统一的低代码开发标准和协议

  • ​生态建设​：构建开放的低代码工具和物料生态

​技术特色​：

  • 🏢 ​企业级​：经过阿里巴巴大规模业务验证

  • 🔧 ​可扩展​：插件化架构，支持深度定制

  • 🌐 ​生态丰富​：完整的物料、设置器、插件生态

  • 📋 ​协议标准​：统一的低代码协议和规范

  • 🛡 ​类型安全​：TypeScript开发，完整类型定义

​设计理念​：

  • ​最小内核​：核心引擎保持最小化和稳定性

  • ​最强生态​：通过生态扩展提供丰富功能

  • ​开放标准​：制定和遵循开放协议标准

  • ​企业就绪​：满足企业级应用的需求和标准

  • ​社区驱动​：依托社区力量持续发展和完善

主要功能

1. ​核心功能体系​

LowCodeEngine提供了一套完整的低代码开发解决方案，专注于可扩展性和企业级应用。

​引擎核心​：

  • ​可视化编辑​：拖拽式界面设计和布局

  • ​组件管理​：组件库管理和使用

  • ​数据绑定​：可视化数据绑定和状态管理

  • ​逻辑编排​：可视化逻辑流程编排

  • ​页面管理​：多页面管理和导航配置

​生态体系​：

  • ​物料系统​：丰富的UI组件和业务组件

  • ​设置器系统​：属性设置和表单配置工具

  • ​插件系统​：功能扩展和集成插件

  • ​模板系统​：预置模板和自定义模板

  • ​工具链​：完整的开发和调试工具

​协议标准​：

  • ​组件协议​：统一的组件描述和交互协议

  • ​物料协议​：物料开发和使用标准

  • ​设置器协议​：属性设置器接口标准

  • ​插件协议​：插件开发和集成规范

  • ​数据协议​：数据模型和绑定协议

​企业特性​：

  • ​多租户​：支持多租户部署和管理

  • ​权限控制​：细粒度的权限管理系统

  • ​审计日志​：完整的操作审计跟踪

  • ​高性能​：优化的大规模应用性能

  • ​安全合规​：企业级安全标准和合规性

2. ​功能详情​

​可视化开发​：

设计器功能:
- 画布编辑: 可视化拖拽布局
- 组件树: 层级结构管理和导航
- 属性面板: 属性设置和样式配置
- 事件面板: 事件处理函数绑定
- 数据面板: 数据模型和管理

组件操作:
- 拖拽添加: 从组件库拖拽添加组件
- 复制粘贴: 组件复制和跨页面粘贴
- 对齐分布: 智能对齐和分布工具
- 图层管理: 图层顺序和可见性管理
- 批量操作: 多组件批量操作

预览调试:
- 实时预览: 实时效果预览和调试
- 响应式预览: 多设备尺寸预览
- 交互调试: 交互行为调试和测试
- 性能分析: 性能分析和优化建议

​物料生态​：

组件类型:
- 基础组件: 按钮、输入框、表格等基础UI组件
- 布局组件: 容器、栅格、卡片等布局组件
- 业务组件: 特定业务场景的专用组件
- 图表组件: 数据可视化图表组件
- 自定义组件: 用户自定义扩展组件

物料来源:
- 官方物料: 阿里巴巴官方提供的物料库
- 社区物料: 社区贡献的第三方物料
- 企业物料: 企业内部私有物料库
- 自定义物料: 用户自行开发的物料

物料管理:
- 物料市场: 物料发现和安装
- 版本管理: 物料版本管理和更新
- 依赖管理: 物料依赖关系管理
- 质量检测: 物料质量检测和验证

​扩展系统​：

插件类型:
- 设计器插件: 扩展设计器功能
- 运行时插件: 扩展运行时功能
- 设置器插件: 扩展属性设置功能
- 物料插件: 扩展物料管理功能
- 工具插件: 扩展开发工具功能

扩展能力:
- 自定义组件: 开发和使用自定义组件
- 自定义设置器: 开发特定属性的设置器
- 自定义插件: 开发功能扩展插件
- 自定义模板: 创建和使用项目模板
- 自定义主题: 定制化主题和样式

API体系:
- 设计器API: 设计器操作和控制API
- 运行时API: 运行时环境和交互API
- 物料API: 物料管理和使用API
- 插件API: 插件开发和集成API
- 工具链API: 开发工具和调试API

​工具链​：

开发工具:
- CLI工具: 命令行创建和管理项目
- 调试工具: 可视化调试和性能分析
- 构建工具: 项目构建和打包工具
- 部署工具: 应用部署和发布工具
- 监控工具: 运行监控和错误追踪

质量保障:
- 代码检测: 代码质量和规范检查
- 测试工具: 单元测试和集成测试
- 性能测试: 性能基准和负载测试
- 安全扫描: 安全漏洞和风险扫描
- 兼容性测试: 浏览器和设备兼容性

协作工具:
- 版本控制: 项目版本管理和协作
- 团队管理: 团队成员和权限管理
- 文档生成: 自动文档生成和维护
- 项目模板: 团队项目模板和规范

3. ​技术规格​

​系统架构​：

核心引擎: TypeScript + React
设计器: 基于React的可视化编辑器
渲染器: React渲染引擎(支持其他框架扩展)
构建工具: Webpack + Babel + Lerna
包管理: npm + Lerna多包管理

​协议支持​：

组件协议: 《低代码引擎基础搭建协议规范》
物料协议: 《低代码引擎物料协议规范》
设置器协议: 属性设置器接口标准
插件协议: 插件开发和集成规范
数据协议: 数据模型和绑定协议

​兼容性​：

浏览器: Chrome >= 80, Edge >= 80, Safari(最近2版本), Firefox(最近2版本)
框架: React为主, 支持Vue/Angular扩展
设备: 桌面端为主, 支持移动端适配
环境: Node.js 14+, 现代浏览器环境

​性能指标​：

加载性能: 引擎核心<100KB(gzip)
渲染性能: 支持1000+组件复杂页面
内存占用: 优化内存使用和垃圾回收
响应时间: 操作响应<100ms
扩展性能: 支持100+插件同时运行

安装与配置

1. ​环境准备​

​系统要求​：

操作系统: Windows, macOS, Linux
Node.js: 14.0+ (推荐16.0+)
内存: 8GB+ RAM (推荐16GB)
存储: 1GB+ 可用空间
网络: 稳定的互联网连接

​开发环境​：

  • ​代码编辑器​：VS Code推荐

  • ​浏览器​：Chrome推荐用于开发

  • ​Git​：版本控制工具

  • ​包管理器​：npm、yarn或pnpm

2. ​安装步骤​

​CDN方式（推荐初学者）​​：

<!-- 在HTML中引入CDN资源 -->
<script src="https://unpkg.com/@alilc/lowcode-engine@1.0.18/dist/js/engine-core.js"></script>
<script src="https://unpkg.com/@alilc/lowcode-react-simulator-renderer@1.0.18/dist/js/react-simulator-renderer.js"></script>

<!-- 使用全局变量 -->
<script>
const { init, skeleton } = window.AliLowCodeEngine;
// 初始化引擎
init(document.getElementById('lce-container'));
</script>

​NPM安装（推荐开发）​​：

# 创建新项目
npx create-lowcode-app my-app

# 或手动安装
npm install @alilc/lowcode-engine --save-dev
npm install @alilc/lowcode-react-simulator-renderer --save-dev

# 配置externals（webpack配置）
module.exports = {
  externals: {
    '@alilc/lowcode-engine': 'window.AliLowCodeEngine',
    '@alilc/lowcode-engine-ext': 'window.AliLowCodeEngineExt'
  }
};

​源码开发​：

# 克隆仓库
git clone https://github.com/alibaba/lowcode-engine.git
cd lowcode-engine

# 安装依赖
npm install

# 初始化项目
npm run setup

# 启动开发服务器
npm start

# 构建生产版本
npm run build

​Docker部署​：

# 使用Docker运行
docker run -p 8080:80 alibaba/lowcode-engine

# 或使用Docker Compose
git clone https://github.com/alibaba/lowcode-engine.git
cd lowcode-engine
docker-compose up -d

3. ​配置说明​

​基础配置​：

// 引擎初始化配置
const engineOptions = {
  locale: 'zh-CN',
  enableCondition: true,
  enableCanvasLock: true,
  supportVariableGlobally: true,
  device: 'default',
  simulatorUrl: [
    'https://unpkg.com/@alilc/lowcode-react-simulator-renderer@1.0.18/dist/js/react-simulator-renderer.js'
  ]
};

// 设计器配置
const designerOptions = {
  theme: 'light',
  device: 'default',
  plugins: [],
  shell: {
    // 设计器外壳配置
  }
};

​物料配置​：

{
  "packages": [
    {
      "package": "@alilc/lowcode-sample-material",
      "version": "1.0.0",
      "library": "LowCodeSampleMaterial",
      "urls": [
        "https://unpkg.com/@alilc/lowcode-sample-material@1.0.0/dist/index.js"
      ],
      "editUrls": [
        "https://unpkg.com/@alilc/lowcode-sample-material@1.0.0/dist/edit.js"
      ]
    }
  ],
  "components": [
    {
      "componentName": "SampleComponent",
      "title": "示例组件",
      "docUrl": "",
      "screenshot": "",
      "devMode": "proCode",
      "npm": {
        "package": "@alilc/lowcode-sample-material",
        "version": "1.0.0"
      }
    }
  ]
}

​插件配置​：

// 插件配置示例
const plugins = [
  PluginRegistry,          // 插件注册表
  MaterialPlugin,          // 物料管理插件
  SetterRegistry,          // 设置器注册插件
  EventPlugin,             // 事件管理插件
  DataSourcePlugin,        // 数据源插件
  UndoRedoPlugin,          // 撤销重做插件
  ZhEnPlugin,              // 中英文切换插件
  DefaultSettersRegistry,  // 默认设置器
  LoggingPlugin,           // 日志插件
  PreferencesRegistry,     // 偏好设置插件
];

​构建配置​：

// webpack.config.js
module.exports = {
  externals: {
    '@alilc/lowcode-engine': 'window.AliLowCodeEngine',
    '@alilc/lowcode-engine-ext': 'window.AliLowCodeEngineExt',
    'react': 'window.React',
    'react-dom': 'window.ReactDOM'
  },
  devServer: {
    port: 5555,
    proxy: {
      '/api': 'http://localhost:7001'
    }
  }
};

使用指南

1. ​基本工作流​

使用LowCodeEngine的基本流程包括：初始化引擎 → 配置物料 → 设计页面 → 预览调试 → 发布部署。整个过程设计为直观简单，开发者可以快速构建低代码平台。

2. ​基本使用​

​引擎初始化​：

import { init, skeleton } from '@alilc/lowcode-engine';

// 初始化设计器
async function initializeDesigner() {
  // 准备设计器资源
  await prepareResources();
  
  // 初始化设计器
  await init(document.getElementById('lce-container'), {
    locale: 'zh-CN',
    enableCondition: true,
    enableCanvasLock: true,
    simulatorUrl: [
      'https://unpkg.com/@alilc/lowcode-react-simulator-renderer@1.0.18/dist/js/react-simulator-renderer.js'
    ]
  });
  
  // 添加设计器组件
  skeleton.add({
    area: 'topArea',
    type: 'Widget',
    name: 'logo',
    content: LogoComponent,
    props: {
      align: 'left',
      width: 100,
    },
  });
}

​物料注册​：

// 注册物料包
const materialPkgs = await new Promise((resolve, reject) => {
  $.ajax({
    url: '/api/materials',
    success: (data) => resolve(data),
    error: (err) => reject(err)
  });
});

// 设置物料
await project.setI18n(materialPkgs.i18n);
await project.setSchema(schema);
await project.open();

​页面设计​：

// 创建新页面
const pageSchema = {
  componentName: 'Page',
  props: {
    componentName: 'Page',
    css: {
      width: '100%',
      height: '100%',
    },
  },
  children: [
    {
      componentName: 'Div',
      props: {
        componentName: 'Div',
        css: {
          padding: '20px',
        },
      },
      children: [
        {
          componentName: 'Button',
          props: {
            type: 'primary',
            children: '点击我',
          },
        }
      ]
    }
  ]
};

// 保存页面设计
await project.saveSchema(pageSchema);

​预览调试​：

// 实时预览
const preview = await project.openPreview();

// 获取页面HTML
const html = await project.getHtml();

// 导出项目
const exportResult = await project.export();

3. ​高级用法​

​自定义组件开发​：

// 开发自定义组件
import { createComponent } from '@alilc/lowcode-engine';

const MyCustomComponent = createComponent({
  // 组件配置
  componentName: 'MyCustomComponent',
  title: '自定义组件',
  props: [
    {
      name: 'title',
      propType: 'string',
      defaultValue: '默认标题',
    }
  ],
  
  // 组件实现
  render({ title }) {
    return (
      <div className="custom-component">
        <h3>{title}</h3>
        <p>这是一个自定义组件</p>
      </div>
    );
  }
});

// 注册到引擎
registerComponent(MyCustomComponent);

​插件开发​：

// 开发自定义插件
class MyCustomPlugin extends Plugin {
  constructor() {
    super({
      name: 'MyCustomPlugin',
      dependencies: [],
    });
  }
  
  async init() {
    // 插件初始化
    this.addPanel({
      type: 'panel',
      name: 'my-panel',
      content: MyPanelComponent,
      props: {
        title: '自定义面板',
      },
    });
  }
  
  async destroy() {
    // 插件销毁
  }
}

// 注册插件
registerPlugin(MyCustomPlugin);

​API集成​：

// 与后端API集成
class BackendService {
  async saveSchema(schema) {
    const response = await fetch('/api/schema/save', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(schema),
    });
    return response.json();
  }
  
  async loadSchema(schemaId) {
    const response = await fetch(`/api/schema/load/${schemaId}`);
    return response.json();
  }
}

// 在引擎中使用
const backendService = new BackendService();
await backendService.saveSchema(currentSchema);

​主题定制​：

// 自定义主题
const customTheme = {
  colors: {
    primary: '#1890ff',
    secondary: '#52c41a',
    danger: '#ff4d4f',
  },
  spacing: {
    small: '8px',
    medium: '16px',
    large: '24px',
  },
  components: {
    Button: {
      borderRadius: '6px',
    },
    Input: {
      borderColor: '#d9d9d9',
    },
  },
};

// 应用主题
applyTheme(customTheme);

应用场景实例

案例1：企业级中后台应用开发

​场景​：企业需要快速开发大量中后台管理系统

​解决方案​：使用LowCodeEngine构建企业中后台低代码平台。

​实施方法​：

# 搭建中后台低代码平台
1. 基于LowCodeEngine核心引擎
2. 集成企业UI组件库和业务组件
3. 开发中后台常用模板和页面
4. 配置数据源和API连接
5. 部署到企业私有环境

# 典型中后台功能
- 用户管理: CRUD页面和权限配置
- 数据报表: 图表和数据可视化
- 工作流: 审批流程和业务流转
- 系统配置: 参数配置和菜单管理
- 日志审计: 操作日志和审计跟踪

​中后台特性​：

  • ​表单密集​：大量表单和表格页面

  • ​数据驱动​：基于数据的管理和操作

  • ​权限复杂​：复杂的角色和权限体系

  • ​流程规范​：标准化的工作流程

  • ​集成需求​：多系统集成和API调用

​企业价值​：

  • ​开发效率​：开发效率提升5-10倍

  • ​一致性​：界面和交互规范统一

  • ​维护成本​：大幅降低维护成本

  • ​质量保证​：标准化组件保证质量

  • ​快速迭代​：业务需求快速响应

案例2：业务中台能力输出

​场景​：大型企业需要将业务能力输出给不同团队

​解决方案​：使用LowCodeEngine构建业务中台低代码平台。

​中台建设​：

# 业务中台架构
1. 基础引擎层: LowCodeEngine核心能力
2. 能力中心层: 各业务领域能力抽象
3. 组件物料层: 业务组件和模板库
4. 工具平台层: 开发和管理工具
5. 接入应用层: 各业务线应用

# 能力输出方式
- 组件输出: 业务组件和模板
- 方案输出: 完整业务解决方案
- 平台输出: 低代码平台能力
- 服务输出: API和服务能力
- 生态输出: 开发规范和标准

​中台能力​：

  • ​标准化​：业务能力和接口标准化

  • ​可复用​：能力复用和组合使用

  • ​可扩展​：能力持续扩展和演进

  • ​可运营​：能力运营和效果评估

  • ​开放化​：开放给内部和外部团队

​组织价值​：

  • ​能力沉淀​：业务能力沉淀和复用

  • ​效率提升​：整体研发效率提升

  • ​创新加速​：业务创新和试错加速

  • ​成本优化​：资源利用和成本优化

  • ​生态建设​：内外开发生态建设

案例3：跨平台应用开发

​场景​：需要开发跨Web、移动端、小程序的业务应用

​解决方案​：使用LowCodeEngine构建跨平台低代码开发体系。

​跨平台方案​：

# 跨平台架构设计
1. 统一引擎层: LowCodeEngine核心
2. 多端渲染层: Web、小程序、App渲染器
3. 适配组件层: 多端适配的组件库
4. 构建发布层: 多端构建和发布工具
5. 运行时层: 多端运行时环境

# 开发工作流
1. 可视化设计: 在设计器中设计页面
2. 多端预览: 实时预览多端效果
3. 差异调整: 调整各端差异和特性
4. 分别构建: 构建各端应用包
5. 分别发布: 发布到各端平台

​跨平台特性​：

  • ​一次开发​：一套设计多端使用

  • ​原生体验​：各端原生体验和性能

  • ​平台特性​：支持各端特有能力和API

  • ​差异处理​：处理各端差异和兼容性

  • ​统一管理​：统一项目管理和协作

​业务价值​：

  • ​覆盖全面​：覆盖所有终端平台用户

  • ​体验一致​：多端一致的用户体验

  • ​效率极致​：最大化开发效率提升

  • ​成本最低​：最低的多端开发成本

  • ​迭代快速​：快速同步多端功能迭代

总结

LowCodeEngine作为一个企业级的低代码开发引擎，通过其强大的扩展能力、丰富的生态体系和标准化的协议，为企业和开发者提供了构建低代码平台的完整解决方案。其开源特性和阿里巴巴背书，使其成为企业低代码平台建设的理想选择。

​核心优势​：

  • 🏢 ​企业级​：经过阿里巴巴大规模业务验证

  • 🔧 ​可扩展​：插件化架构支持深度定制

  • 🌐 ​生态丰富​：完整的物料和工具生态

  • 📋 ​标准开放​：统一的协议和标准规范

  • 🛡 ​稳定可靠​：生产环境验证的稳定性

​适用场景​：

  • 企业中后台应用开发

  • 业务中台能力建设

  • 跨平台应用开发

  • 内部工具开发平台

  • ISV产品开发和交付

​技术特色​：

  • ​现代架构​：基于TypeScript和React的现代技术栈

  • ​协议标准​：完整的低代码协议和规范体系

  • ​工具链​：完整的开发和运维工具链

  • ​性能优化​：大规模应用性能优化

  • ​社区活跃​：活跃的开源社区和生态系统

🌟 ​GitHub地址​：

https://github.com/alibaba/lowcode-engine

🚀 ​快速开始​：

CDN引入或NPM安装

📚 ​学习资源​：

详细文档和示例项目

​立即使用LowCodeEngine，构建您的低代码平台！​​

​最佳实践建议​：

  • 🏢 ​企业用户​：基于引擎构建内部低代码平台

  • 🛠 ​开发者​：开发自定义组件和插件

  • 📦 ​ISV厂商​：基于引擎开发商业化产品

  • 🎓 ​教育机构​：用于低代码教学和研究

  • 🤝 ​社区贡献​：参与社区建设和贡献

​注意事项​：

  • ⚠️ ​浏览器兼容​：注意浏览器兼容性要求

  • 🔧 ​环境配置​：正确配置externals和CDN

  • 📋 ​协议遵循​：遵循低代码相关协议规范

  • 🔒 ​安全考虑​：生产环境的安全配置和审查

  • 📊 ​性能监控​：监控大规模应用的性能表现

LowCodeEngine持续演进和发展，欢迎用户反馈和贡献，共同打造更好的低代码开发生态！

# github
Logo
乐奇 Rokid 开放社区

更多推荐

cover

使用Rokid AIUI做了一个童年推箱子游戏

avatar 乐奇 Rokid 开放社区

基于 AIUI 框架的眼镜端坐姿监测智能体：WorkerMonitor 设计与实现

基于AIUI框架，设计并实现眼镜端坐姿监测智能体WorkerMonitor。通过加速度传感器实时采集头部姿态数据，结合校准偏移量进行三态分类（正常/警示/异常），每秒采样一次，累计时长并低打扰提醒。每2小时调用LLM生成个性化健康建议，支持自动工作/休息切换与隐藏模式，兼顾隐私与体验。项目采用Ink单文件页面结构，实现极简交互与可持续反馈，为长期伏案者提供无感式颈椎健康管理方案。

avatar 乐奇 Rokid 开放社区
cover

微安级唤醒、2节干电池直供：CI3422如何重新定义电池供电设备的语音交互

avatar 乐奇 Rokid 开放社区