扩展点简述

我们可以从 Demo 的项目中看到页面中有很多的区块：
image.png
这些功能点背后都是可扩展项目，如下图所示：
image.png

  • 插件定制：可以配置低代码编辑器的功能和面板
  • 物料定制：可以配置能够拖入的物料
  • 操作辅助区定制：可以配置编辑器画布中的操作辅助区功能
  • 设置器定制：可以配置编辑器中组件的配置表单

我们从可扩展项目的视角，可以把低代码引擎架构理解为下图：

image.png
（注：引擎内核中大量数据交互的细节被简化，这张图仅仅强调编辑器和外部扩展的交互）

配置扩展点

配置物料

通过配置注入物料，这里的配置是物料中心根据物料资产包协议生成的，后面“物料扩展”章节会有详细说明。

  1. import { material } from '@alilc/lowcode-engine'
  2. // 假设您已把物料配置在本地
  3. import assets from './assets.json'
  5. // 静态加载 assets
  6. material.setAssets(assets)

也可以通过异步加载物料中心上的物料。

  1. import { ILowCodePluginContext, material, plugins } from '@alilc/lowcode-engine'
  3. // 动态加载 assets
  4. plugins.register((ctx: ILowCodePluginContext) => {
  5.   return {
  6.     name: 'ext-assets',
  7.     async init() {
  8.       try {
  9.         // 将下述链接替换为您的物料即可。无论是通过 utils 从物料中心引入，还是通过其他途径如直接引入物料描述
  10.         const res = await window.fetch('https://fusion.alicdn.com/assets/default@0.1.95/assets.json')
  11.         const assets = await res.text()
  12.         material.setAssets(assets)
  13.       } catch (err) {
  14.         console.error(err)
  15.       }
  16.     },
  17.   }
  18. }).catch(err => console.error(err))

配置插件

可以通过 npm 包的方式引入社区插件，配置如下所示：

  1. import { ILowCodePluginContext, plugins } from '@alilc/lowcode-engine'
  2. import PluginIssueTracker from '@alilc/lowcode-plugin-issue-tracker'
  4. // 注册一个提 issue 组件到您的编辑器中，方位默认在左栏下侧
  5. plugins.register(PluginIssueTracker)
  6.   .catch(err => console.error(err))

后续“插件扩展”章节会详细说明。

配置设置器

低代码引擎默认内置了设置器（详见“配置设置器”章节）。您可以通过 npm 包的方式引入自定义的设置器，配置如下所示：

  1. import { setters } from '@alilc/lowcode-engine'
  2. // 假设您自定义了一个 setter
  3. import MuxMonacoEditorSetter from './components/setters/MuxMonacoEditorSetter'
  5. // 注册设置器
  6. setters.registerSetter({
  7.   MuxMonacoEditorSetter: {
  8.     component: MuxMonacoEditorSetter,
  9.     title: 'Textarea',
  10.     condition: (field) => {
  11.       const v = field.getValue()
  12.       return typeof v === 'string'
  13.     },
  14.   },
  15. })

后续“设置器扩展”章节会详细说明。

本章节所有可扩展配置内容在 demo 中均可找到：https://github.com/alibaba/lowcode-demo/blob/main/src/universal/plugin.tsx