ant design pro集成阿里低代码引擎
阿里低代码引擎是一款为低代码平台开发者提供的，具备强大定制扩展能力的低代码设计器研发框架。
本文主要介绍如何在ant design pro项目中集成阿里低代码引擎lowcode-engine。
根据官方文档，已有项目要集成低代码引擎，至少需要三步，以下我们以ant desigin pro5项目为例，来集成低代码引擎。
ant desigin pro项目的创建可以根据官方网站进行创建
引入 UMD 包资源
找到项目中的src/pages/document.ejs文件，添加如下内容
<!-- 低代码引擎的页面框架样式 -->
<link rel="stylesheet" href="https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/1.0.18/dist/css/engine-core.css" />
<!-- Fusion Next 控件样式 -->
<link rel="stylesheet" href="https://g.alicdn.com/code/lib/alifd__next/1.23.24/next.min.css">
<!-- 低代码引擎的页面主题样式，可以替换为 theme-lowcode-dark -->
<link rel="stylesheet" href="https://alifd.alicdn.com/npm/@alifd/theme-lowcode-light/0.2.0/next.min.css">
<!-- 低代码引擎官方扩展的样式 -->
<link rel="stylesheet" href="https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine-ext/1.0.5/dist/css/engine-ext.css" />
<!-- React，可替换为 production 包 -->
<script src="https://g.alicdn.com/code/lib/react/16.14.0/umd/react.development.js"></script>
<!-- React DOM，可替换为 production 包 -->
<script src="https://g.alicdn.com/code/lib/react-dom/16.14.0/umd/react-dom.development.js"></script>
<!-- React 向下兼容，预防物料层的依赖 -->
<script src="https://g.alicdn.com/code/lib/prop-types/15.7.2/prop-types.js"></script>
<script src="https://g.alicdn.com/platform/c/react15-polyfill/0.0.1/dist/index.js"></script>
<!-- lodash，低代码编辑器的依赖 -->
<script src="https://g.alicdn.com/platform/c/lodash/4.6.1/lodash.min.js"></script>
<!-- 日期处理包，Fusion Next 的依赖 -->
<script src="https://g.alicdn.com/code/lib/moment.js/2.29.1/moment-with-locales.min.js"></script>
<!-- Fusion Next 的主包，低代码编辑器的依赖 -->
<script src="https://g.alicdn.com/code/lib/alifd__next/1.23.24/next.min.js"></script>
<!-- 低代码引擎的主包 -->
<script crossorigin="anonymous" src="https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine/1.0.18/dist/js/engine-core.js"></script>
<!-- 低代码引擎官方扩展的主包 -->
<script crossorigin="anonymous" src="https://uipaas-assets.com/prod/npm/@alilc/lowcode-engine-ext/1.0.5/dist/js/engine-ext.js"></script>
配置打包
因为这些资源已经通过 UMD 方式引入，所以在 webpack 等构建工具中需要配置它们为 external，不再重复打包
找到项目config/config.ts配置文件，添加如下内容
"externals": {
"react": "var window.React",
"react-dom": "var window.ReactDOM",
"prop-types": "var window.PropTypes",
"@alifd/next": "var window.Next",
"@alilc/lowcode-engine": "var window.AliLowCodeEngine",
"@alilc/lowcode-engine-ext": "var window.AliLowCodeEngineExt",
"moment": "var window.moment",
"lodash": "var window._"
}
初始化低代码编辑器
正确引入后，我们可以直接通过 window 上的变量进行引用，如 window.AliLowCodeEngine.init。您可以直接通过此方式初始化低代码引擎
// 确保在执行此命令前，在 <body> 中已有一个 id 为 lce-container 的 <div />
window.AliLowCodeEngine.init(document.getElementById('lce-container'), {
enableCondition: true,
enableCanvasLock: true,
});
如果您的项目中使用了 TypeScript，您可以通过如下 devDependencies 引入相关包，并获得对应的类型推断。
// package.json
{
"devDependencies": {
"@alilc/lowcode-engine": "^1.0.0"
}
}
import { init } from '@alilc/lowcode-engine';
init(document.getElementById('lce-container'), {
enableCondition: true,
enableCanvasLock: true,
});
集成完整demo功能
到此，低代码引擎已经集成完成，但是想要达到官方demo的效果还不够，于是参照官方demo，将官方demo已实现的功能集成进来，基本就可以使用了。
官方demo源码
官方demo演示
接下来参照demo，将完整的demo集成到项目中，
安装npm包
//dependencies
"@alilc/lowcode-datasource-fetch-handler": "^1.0.1",
"@alilc/lowcode-plugin-code-editor": "^1.0.3",
"@alilc/lowcode-plugin-code-generator": "^1.0.4",
"@alilc/lowcode-plugin-components-pane": "^2.0.0",
"@alilc/lowcode-plugin-datasource-pane": "^1.0.9",
"@alilc/lowcode-plugin-inject": "^1.2.1",
"@alilc/lowcode-plugin-manual": "^1.0.4",
"@alilc/lowcode-plugin-schema": "^1.0.2",
"@alilc/lowcode-plugin-simulator-select": "^1.0.2",
"@alilc/lowcode-plugin-undo-redo": "^1.0.0",
"@alilc/lowcode-plugin-zh-en": "^1.0.0",
"@alilc/lowcode-plugin-set-ref-prop": "^1.0.1",
"@alilc/lowcode-react-renderer": "^1.1.2",
"@alilc/lowcode-setter-behavior": "^1.0.0",
"@alilc/lowcode-setter-title": "^1.0.2",
//devDependencies
"@alilc/lowcode-engine": "^1.1.2",
"@alilc/lowcode-engine-ext": "^1.0.0",
"@alilc/lowcode-types": "^1.1.1",
复制插件
这里我选择demo中的demo-basic-antd项目进行集成
- 将demo中src/plugins和src/services复制到项目中src/low-code文件夹下
- 根据demo中的index.ts的实现我们实现如下代码，作为编辑器的展示页面。代码中引用的index.scss对应demo中的global.scss
//src/pages/low-code/editor/index.tsx 低代码编辑器入口页面
import React, { useState, useEffect } from 'react';
import { init, plugins } from '@alilc/lowcode-engine';
import { createFetchHandler } from '@alilc/lowcode-datasource-fetch-handler';
import EditorInitPlugin from '@/low-code/plugins/plugin-editor-init';
import UndoRedoPlugin from '@alilc/lowcode-plugin-undo-redo';
import ZhEnPlugin from '@alilc/lowcode-plugin-zh-en';
import CodeGenPlugin from '@alilc/lowcode-plugin-code-generator';
import DataSourcePanePlugin from '@alilc/lowcode-plugin-datasource-pane';
import SchemaPlugin from '@alilc/lowcode-plugin-schema';
import CodeEditorPlugin from '@alilc/lowcode-plugin-code-editor';
import ManualPlugin from '@alilc/lowcode-plugin-manual';
import InjectPlugin from '@alilc/lowcode-plugin-inject';
import SimulatorResizerPlugin from '@alilc/lowcode-plugin-simulator-select';
import ComponentPanelPlugin from '@alilc/lowcode-plugin-components-pane';
import DefaultSettersRegistryPlugin from '@/low-code/plugins/plugin-default-setters-registry';
import LoadIncrementalAssetsWidgetPlugin from '@/low-code/plugins/plugin-load-incremental-assets-widget';
import SaveSamplePlugin from '@/low-code/plugins/plugin-save-sample';
import PreviewSamplePlugin from '@/low-code/plugins/plugin-preview-sample';
import CustomSetterSamplePlugin from '@/low-code/plugins/plugin-custom-setter-sample';
import SetRefPropPlugin from '@alilc/lowcode-plugin-set-ref-prop';
import LogoSamplePlugin from '@/low-code/plugins/plugin-logo-sample';
import './index.scss';
import { createUmiRequestHandler } from '@/low-code/request';
async function registerPlugins() {
await plugins.register(InjectPlugin, { override: true });
await plugins.delete(EditorInitPlugin.pluginName);
await plugins.register(EditorInitPlugin, {
scenarioName: 'basic-antd',
displayName: '基础 AntD 组件',
info: {
urls: [
{
key: '设计器',
value: 'https://github.com/alibaba/lowcode-demo/tree/main/demo-basic-antd',
},
{
key: 'antd 物料',
value:
'https://github.com/alibaba/lowcode-materials/tree/main/packages/antd-lowcode-materials',
},
],
},
});
// 设置内置 setter 和事件绑定、插件绑定面板
await plugins.register(DefaultSettersRegistryPlugin, { override: true });
await plugins.register(LogoSamplePlugin, { override: true });
await plugins.register(ComponentPanelPlugin, { override: true });
await plugins.register(SchemaPlugin, { override: true });
await plugins.register(ManualPlugin, { override: true });
// 注册回退/前进
await plugins.register(UndoRedoPlugin, { override: true });
// 注册中英文切换
await plugins.register(ZhEnPlugin, { override: true });
await plugins.register(SetRefPropPlugin, { override: true });
await plugins.register(SimulatorResizerPlugin, { override: true });
await plugins.register(LoadIncrementalAssetsWidgetPlugin, { override: true });
// 插件参数声明 & 传递，参考：https://lowcode-engine.cn/site/docs/api/plugins#设置插件参数版本示例
await plugins.delete(DataSourcePanePlugin.pluginName);
await plugins.register(DataSourcePanePlugin, {
importPlugins: [],
dataSourceTypes: [
{
type: 'fetch',
},
{
type: 'jsonp',
},
],
});
await plugins.register(CodeEditorPlugin, { override: true });
// 注册出码插件
await plugins.register(CodeGenPlugin, { override: true });
await plugins.register(SaveSamplePlugin, { override: true });
await plugins.register(PreviewSamplePlugin, { override: true });
await plugins.register(CustomSetterSamplePlugin, { override: true });
}
async function initLowCodeEditor() {
await registerPlugins();
init(document.getElementById('lowcode-editor') || undefined, {
locale: 'zh-CN',
enableCondition: true,
enableCanvasLock: true,
// 默认绑定变量
supportVariableGlobally: true,
requestHandlersMap: {
//fetch: createFetchHandler(),
fetch: createUmiRequestHandler(),
},
});
}
export default function () {
useEffect(() => {
initLowCodeEditor();
}, []);
return <div id="lowcode-editor"></div>;
}
- 预览页面的实现
参照demo中的preview页面，实现预览页面如下
//src/pages/low-code/preview/index.tsx
import React, { useState, useEffect } from 'react';
import preview from './components/preview';
import './index.css';
import { history, useParams } from 'umi';
export default function () {
const params = useParams();
const data = { ...history.location.query, ...params };
if (params.moduleId) {
data.type = 'release';
} else {
data.type = 'preview';
}
useEffect(() => {
preview(data);
});
return <div id="lowcode-preview" className="lowcode-preview"></div>;
}
//src/pages/low-code/preview/components/preview.tsx
import ReactDOM from 'react-dom';
import React, { useState } from 'react';
import { Loading } from '@alifd/next';
import { buildComponents, assetBundle, AssetLevel, AssetLoader } from '@alilc/lowcode-utils';
import ReactRenderer from '@alilc/lowcode-react-renderer';
import { injectComponents } from '@alilc/lowcode-plugin-inject';
import { createFetchHandler } from '@alilc/lowcode-datasource-fetch-handler'
import { getProjectSchemaFromLocalStorage, getPackagesFromLocalStorage } from './services/mockService';
const getScenarioName = function () {
if (location.search) {
return new URLSearchParams(location.search.slice(1)).get('scenarioName') || 'index';
}
return 'index';
}
const SamplePreview = () => {
const [data, setData] = useState({});
async function init() {
const scenarioName = getScenarioName();
const packages = getPackagesFromLocalStorage(scenarioName);
const projectSchema = getProjectSchemaFromLocalStorage(scenarioName);
const { componentsMap: componentsMapArray, componentsTree } = projectSchema;
const componentsMap: any = {};
componentsMapArray.forEach((component: any) => {
componentsMap[component.componentName] = component;
});
const schema = componentsTree[0];
const libraryMap = {};
const libraryAsset = [];
packages.forEach(({ package: _package, library, urls, renderUrls }) => {
libraryMap[_package] = library;
if (renderUrls) {
libraryAsset.push(renderUrls);
} else if (urls) {
libraryAsset.push(urls);
}
});
const vendors = [assetBundle(libraryAsset, AssetLevel.Library)];
// TODO asset may cause pollution
const assetLoader = new AssetLoader();
await assetLoader.load(libraryAsset);
const components = await injectComponents(buildComponents(libraryMap, componentsMap));
setData({
schema,
components,
});
}
const { schema, components } = data;
if (!schema || !components) {
init();
return <Loading fullScreen />;
}
return (
<div className="lowcode-plugin-sample-preview">
<ReactRenderer
className="lowcode-plugin-sample-preview-content"
schema={schema}
components={components}
appHelper={{
requestHandlersMap: {
fetch: createFetchHandler()
}
}}
/>
</div>
);
};
export default function (params) {
ReactDOM.render(<SamplePreview params={params} />, document.getElementById('lowcode-preview'));
}
- 配置路由，找到config/routes.ts配置路由
{
name: '低代码',
icon: 'table',
path: '/low-code',
routes: [{
name: '编辑器',
icon: 'table',
path: '/low-code/editor',
component: './low-code/editor',
},{
name: '预览',
icon: 'table',
layout: false,
path: '/low-code/preview',
component: './low-code/preview',
}]
}
- 修改src/low-code/plugins/plugin-preview-sample/index.tsx，打开预览页面的地址，找到对应的低代码修改
const search = location.search
? `${location.search}&scenarioName=${scenarioName}`
: `?scenarioName=${scenarioName}`;
window.open(`/preview${search}`);
至此，低代码引擎及demo已经集成完成，
由于没有后端
运行npm run start即可看到项目效果
完整项目地址
项目演示地址
在项目代码中实现了将低代码的配置信息保存入数据库，并实现了低代码模块的创建，设计，发布等功能，动态配置菜单即可完成模块开发及上线。
扫一扫
938
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
