前言

Low Code Engine 是阿里开源的低码引擎，这里不同于一般的代码引擎，耦合了业务属性。LowCode Engine 只是一个低码基座，提供编辑器二次开发的能力。

界面能力

基础能力介绍如下：

• 顶部：操作区

  • 右侧：撤回和重做、保存到本地、重置页面、预览、异步加载资源

• 左侧：面板与操作区

  • 大纲面板：可以调整页面内的组件树结构
  • 物料面板：可以查找组件，并在此拖动组件到编辑器画布中
  • 源码面板：可以编辑页面级别的 JavaScript 代码和 CSS 配置
  • Schema 编辑：可以编辑页面的底层数据
  • 中英文切换：可以切换编辑器的语言

• 中部：可视化页面编辑画布区域

  • 点击组件在右侧面板中能够显示出对应组件的属性配置选项
  • 拖拽修改组件的排列顺序
  • 将组件拖拽到容器类型的组件中
  • 复制组件：点击组件右上角的复制按钮
  • 删除组件：点击组件右上角的 X 或者直接使用 Delete 键

• 右侧：组件级别配置

  • 选中的组件：从页面开始一直到当前选中的组件位置，点击对应的名称可以切换到对应的组件上

• 选中组件的配置：当前组件的大类目选项，根据组件类型不同，包含如下子类目：

  • 属性：组件的基础属性值设置
  • 样式：组件的样式
  • 事件：绑定组件对外暴露的事件
  • 高级：循环、条件渲染与 key 设置

架构

Low Code Engine 整体的架构梳理如下

编辑器

低码引擎只是一个空壳，是整个低码的引擎基座，可以在壳子上搭建出低码编辑器。引擎对外暴露了 ctx，提供了插件机制，能够注册以下能力：

Setters – 设置器

一个能够设置 String 格式的自定义 Setter 实现如下：

export default class StringSetter extends React.PureComponent<StringSetterProps, any> {
  static displayName = 'StringSetter';

  render() {
    const { onChange, placeholder, value } = this.props;
    return (
      <Input
        size="small"
        value={value}
        placeholder={placeholder || ''}
        onChange={(val: any) => onChange(val)}
        style={{ width: '100%' }}
      />
    );
  }
}

可以使用到引擎提供的 onChange、value props 完成与引擎之间的数据传递

官方提供了一些默认的 Setters 合集：@alilc/lowcode-engine-ext

注册官方预设 Setter 方式如下：

import { IPublicModelPluginContext } from '@alilc/lowcode-types';
import AliLowCodeEngineExt from '@alilc/lowcode-engine-ext';

// 设置内置 setter 和事件绑定、插件绑定面板
const DefaultSettersRegistryPlugin = (ctx: IPublicModelPluginContext) => {
  return {
    async init() {
      const { setterMap, pluginMap } = AliLowCodeEngineExt;
      const { setters, skeleton } = ctx;
      // 注册 setterMap
      setters.registerSetter(setterMap);
    }
  }
}
export default DefaultSettersRegistryPlugin;

Plugins – 插件

lowcode-engine 提供的 plugin 机制，允许扩展面板

一个自定义面板插件，声明与注入方式如下：

import { plugins } from '@alilc/lowcode-engine';
import { IPublicModelPluginContext } from '@alilc/lowcode-types';

const pluginA = (ctx: IPublicModelPluginContext, options: any) => {
  return {
    init() {
      // 往引擎增加面板
      ctx.skeleton.add({
        // area 配置见下方说明
        area: 'leftArea',
        // type 配置见下方说明
        type: 'PanelDock',
        content: <div>demo</div>,
      });
      ctx.logger.log('打个日志');
    },
    destroy() {
      console.log('我被销毁了~');
    },
  };
};

pluginA.pluginName = 'pluginA';

plugins.register(pluginA, { key: 'test' });

官方提供了一些默认的 Plugin 合集：@alilc/lowcode-engine-ext

Material – 物料

Lowcode-engine 支持加载物料集

物料集的好处是可以避免多次下载解析重复的 deps，提升物料加载解析速度

物料协议描述如下：

{
  "packages": [
    {
      "package": "moment",
      "version": "2.24.0",
      "urls": [
        "https://g.alicdn.com/mylib/moment/2.24.0/min/moment.min.js"
      ],
      "library": "moment"
    },
    {
      "title": "fusion组件库",
      "package": "@alifd/next",
      "version": "1.26.4",
      "urls": [
        "https://g.alicdn.com/code/lib/alifd__next/1.26.4/next.min.css",
        "https://g.alicdn.com/code/lib/alifd__next/1.26.4/next-with-locales.min.js"
      ],
      "library": "Next"
    },
  ],
  "components": [
    {
      "exportName": "AlilcLowcodeMaterialsMeta",
      "npm": {
        "package": "@alilc/lowcode-materials"
      },
      "url": "https://alifd.alicdn.com/npm/@alilc/lowcode-materials@1.0.7/build/lowcode/meta.js",
      "urls": {
        "default": "https://alifd.alicdn.com/npm/@alilc/lowcode-materials@1.0.7/build/lowcode/meta.js",
        "design": "https://alifd.alicdn.com/npm/@alilc/lowcode-materials@1.0.7/build/lowcode/meta.design.js"
      }
    },
  ],
  "sort": {
    "groupList": [
      "精选组件",
      "原子组件",
      "低代码组件"
    ],
    "categoryList": [
      "基础元素",
      "布局容器类",
      "表格类",
      "表单详情类",
      "帮助类",
      "对话框类",
      "业务类",
      "通用",
      "引导",
      "信息输入",
      "信息展示",
      "信息反馈"
    ]
  },
  "groupList": [
    "精选组件",
    "原子组件",
    "低代码组件"
  ],
  "ignoreComponents": {}
}

以上引擎入口源码可以参考 packages/engine/src/engine-core.ts

Output – 出码

lowcode-engine 还提供了出码功能，支持直接产出搭建的页面的 procode

渲染器

一个最简单使用渲染器的 demo 如下：

import ReactDOM from 'react-dom';
import React from 'react';

const SamplePreview = () => {
  return (
      <ReactRenderer
        schema={schema}
        components={components}
      />
  );
};

ReactDOM.render(<SamplePreview />, document.getElementById('ice-container'));

要做到渲染低码组件，需要 2 个关键参数

• Schema

描述低码配置的 DSL

• components

所依赖的组件 pkg CDN 地址，对应的 components 需要提前被加载

生产与消费流程

调试源码

参考文档，这里再总结一下，主要是以下几步：

• 本地启动 lowcode-engine 项目

• 启动 demo 或者脚手架创建出的 editor 站点

• 开启浏览器代理插件

• 可以通过断点调试，查看上下文信息

架构细节

engine-core

整体的设计架构图如下：

核心逻辑都在下方文件

packages/engine/src/engine-core.ts

上面截取了一些逻辑，主要是创建了 Editor 实例，一切方法都挂载到 Editor 实例上，对外仅暴露 ctx，做了 plugins、setters、material 等 class 的初始化

在 core 完成初始化之后，可以通过 core 包 export 出去的 plugins，material 等对象，进行 register 的调用，扩展插件、物料等。

如何调试

1. 安装 XSwitch 工具 chromewebstore.google.com/detail/xswi…

2. 启动 lowcode-engine 项目

默认 lowcode-engine 项目会启动在 5555 端口

3. 通过脚手架创建编辑器项目

编辑器项目与 lowcode-engine 项目的区别为

• 编辑器项目将所有的的 lowcode-engine 插件整合，通过插件的形式，拼凑出引擎的界面

参考文档

脚手架选项，选择编辑器，完成项目创建

3. 使用代理工具进行代理

原文链接：https://juejin.cn/post/7348709938023137320 作者：EricLee