阿里低代码引擎扩展项目教程

阿里低代码引擎扩展项目教程

lowcode-engine-extAn enterprise-class low-code technology stack with scale-out design / 一套面向扩展设计的企业级低代码技术体系项目地址:https://gitcode.com/gh_mirrors/lo/lowcode-engine-ext

项目介绍

lowcode-engine-ext 是阿里低代码引擎官方提供的 setter 和 setter 必须依赖的插件集合。Setter（设置器）是用来展示每个物料的属性。该项目旨在提供一套面向扩展设计的企业级低代码技术体系，支持扩展变量绑定面板等功能。

项目快速启动

安装依赖

首先，克隆项目仓库并安装必要的依赖：

git clone https://github.com/alibaba/lowcode-engine-ext.git
cd lowcode-engine-ext
npm install

启动项目

安装完成后，启动项目：

npm start

使用 CDN 方式引用

项目提供了两种 CDN 方式引用：

1. alifd cdn

<link rel="stylesheet" href="https://alifd.alicdn.com/npm/@alilc/lowcode-engine-ext@1.0.5/dist/css/engine-ext.css">
<script src="https://alifd.alicdn.com/npm/@alilc/lowcode-engine-ext@1.0.5/dist/js/engine-ext.js"></script>

2. uipaas cdn

<link rel="stylesheet" href="https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine-ext/1.0.5/dist/css/engine-ext.css">
<script src="https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine-ext/1.0.5/dist/js/engine-ext.js"></script>

应用案例和最佳实践

扩展变量绑定面板

通过传入 extraDataMap 拓展属性绑定面板：

ctx.skeleton.add([
  {
    area: 'centerArea',
    type: 'Widget',
    content: pluginMap.VariableBindDialog,
    name: 'variableBindDialog',
    props: [
      {
        getSchema: () => editorController.getSchema()
      }
    ]
  }
]);

使用示例

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

skeleton.add([
  {
    area: 'topArea',
    type: 'Widget',
    name: 'logo',
    content: YourFantasticLogo,
    contentProps: {
      logo: 'https://img.alicdn.com/tfs/TB1_SocGkT2gK0jSZFkXXcIQFXa-66-66.png',
      href: '/'
    },
    props: {
      align: 'left',
      width: 100
    }
  }
]);

init(document.getElementById('lce'));

典型生态项目

材料系统

lowcode-engine-ext 提供了丰富的材料系统，包括各种物料和插件，支持完整的工具链，适用于全链路的研发周期。

插件系统

项目支持强大的扩展能力，已经支持了近100个各种垂直低代码平台，提供了完整的类型定义文件，兼容现代浏览器。

协议实现

引擎完全实现了 "LowCodeEngine 基础建设协议规范" 和 "LowCodeEngine 物料协议规范"，确保物料在低代码领域的流通性。

通过以上模块的介绍和示例，您可以快速上手并深入了解 lowcode-engine-ext 项目，开始您的低代码开发之旅。

lowcode-engine-extAn enterprise-class low-code technology stack with scale-out design / 一套面向扩展设计的企业级低代码技术体系项目地址:https://gitcode.com/gh_mirrors/lo/lowcode-engine-ext