近几年，随着企业以快速交付应用程序为目的，低代码平台应运而生，主要为了解决传统软件开发模式带来的时间周期长、成本高等问题。无论是初级的开发者还是一位经验丰富的专家，低代码都将提供了一个突破研发限制的机会。

通过掘金了解到阿里巴巴集团打造的“LowCodeEngine开源低代码引擎”，可以让业务人员根据业务的实际需求，自行设计并使用应用程序，新需求可以自行增加，不依赖IT专家，没有严格的设计时和运行的界限，新需求即时更改，即时上线，且无需测试部署。

阿里巴巴集团的“LowCodeEngine开源低代码引擎”旨在为有一定研发技能的开发者提供高效灵活的开发环境，快速构建满足特定业务需求的低代码平台，是领先的数字化转型技术与服务提供商。

基于“LowCodeEngine开源低代码引擎”生成的低代码平台，即使是个技术小白，但只要足够的了解业务，就能不受束缚的完成大多数业务应用的搭建。另外，低代码在实践过程中，通过组件化、模块化的思路让业务的抽象更加容易，并在扩展及配置化上带来了更多抽象的模式探索，可以提高技术人员的架构设计体系和降低实施成本。

一、引言：

大家平时应该在开发中使用过类似于调查问卷的低代码平台，试想一下，在0到1的创业公司，在没有技术团队的情况下，如何进行系统的开发呢？

以我们公司为例，在早期公司的创立只有不到10人的团队，此时，大多数时候，是由业务数据录入、汇总、保存，甚至公司都没有企微、钉钉等这样的OA软件，信息完全是人为线下操作，经过一段时间，也遇到了很大的问题：

(1). 最主要是文件归档、协同办公的问题(没有类似飞书)。
(2). 公司准备开发一套线上的作业系统，来逐渐的规范业务流程，做到信息化数据可以及时同步，提高信息同步效率，为公司决策提供依据。

在如果是没有了解“LowCodeEngine开源低代码引擎”，按照以前的惯性思路，肯定也是想着自己组建一个技术团队。现在，不妨试试新的“LowCodeEngine开源低代码引擎”来开发。

通过对“LowCodeEngine开源低代码引擎”的产品进行简单的可视化拖拽的配置，就可以实现一个低成本、高效率、轻量的、开箱即用的最小可用的企业管理系统应用。

二、定制设计器：

通过配置注入物料，这里的配置是物料中心根据物料资产包协议生成的。

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

也可以通过异步加载物料。

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

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

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

配置设置器低代码引擎默认内置了设置器，你可以通过 npm 包的方式引入自定义的设置器，配置如下所示:

import { setters } from '@alilc/lowcode-engine'
// 假设你自定义了一个 setter
import MuxMonacoEditorSetter from './components/setters/MuxMonacoEditorSetter'
// 注册设置器 setters.registerSetter({
MuxMonacoEditorSetter: {
component: MuxMonacoEditorSetter, title: 'Textarea',
condition: (field) => {
const v = field.getValue()
return typeof v === 'string' },
}, })

三、定制插件：

下图是一个源码插件的展示效果。其中右上角可以进行固定，可以对弹出的宽度做设定，接入可以参考代码:

import {skeleton} from "@alilc/lowcode-engine";
skeleton.add({
  area: "leftArea", // 插件区域
  type: "PanelDock", // 插件类型，弹出面板 name: "sourceEditor",
  content: SourceEditor, // 插件组件实例
  props: {
    align: "left",
    icon: "wenjian",
    description: "JS 面板",
  },
  panelProps: {
    floatable: true, // 是否可浮动 height: 300,
    hideTitleBar: false, maxHeight: 800,
    maxWidth: 1200,
    title: "JS 面板",
    width: 600,
   },
});

import {skeleton} from "@alilc/lowcode-engine"; // 注册 logo 面板
skeleton.add({
  area: "topArea",
  type: "Widget",
  name: "logo",
  content: Logo, // Widget 组件实例
  contentProps: { // Widget 插件 props
    logo: "https://img.alicdn.com/tfs/TB1_SocGkT2gK0jSZFkXXcIQFXa-66-66.png",
    href: "/",
  },
  props: {
    align: "left", width: 100,
  },
});

四、低代码插件开发实践：

项目初始化

$ npm init @alilc/element your-material-name

这里选择设计器插件，之后会初始化出插件代码，下面是插件的主要代码。

import * as React from 'react';
import { ILowCodePluginContext, skeleton, logger } from '@alilc/lowcode-engine''; import Icon from './icon';
export default (ctx: ILowCodePluginContext) => {
    return {
    // 插件名，注册环境下唯一
    name: 'LowcodePluginTestPlugin', // 依赖的插件(插件名数组)
    dep: [],
    // 插件对外暴露的数据和方法 exports() {
    return {
    data: '你可以把插件的数据这样对外暴露', func: () => {
    console.log('方法也是一样'); },
    }
},
// 插件的初始化函数，在引擎初始化之后会立刻调用 init() {
// 你可以拿到其他插件暴露的方法和属性
// const { data, func } = ctx.plugins.pluginA; // func();
// console.log(options.name);
// 往引擎增加面板
skeleton.add({
    area: 'leftArea', name: 'demoPane', type: 'PanelDock', props: {
    icon: <Icon />,
    description: 'Demo',
   },
    content: <div>这是一个 Demo 面板</div>, });
    logger.log('打个日志'); },
}; };;

五、设置器定制：

我们编写一个简单的 Setter，命名为 AltStringSetter。代码如下:

import * as React from "react"; import { Input } from "@alifd/next";
import "./index.scss"; interface AltStringSetter {
  // 当前值
  value: string;
  // 默认值
  defaultValue: string;
  // setter 唯一输出
  onChange: (val: string) => void; // StringSetter 特殊配置 placeholder: string;
}
export default class AltStringSetter extends React.PureComponent<AltStringSetter> {
  componentDidMount() {
  const { onChange, value, defaultValue } = this.props;
  if (value == undefined && defaultValue) {
    onChange(defaultValue);
  }
}
// 声明 Setter 的 title
static displayName = 'AltStringSetter';
render() {
  const { onChange, value, placeholder } = this.props; return (
    <Input
    value={value}
    placeholder={placeholder || ""} onChange={(val: any) => onChange(val)}
    ></Input> );
    }
     }

setter 和 setter/plugin 之间的联动，我们采用 emit 来进行相互之前的通信，首先我们在 A setter 中进行事件注册:

import { event } from '@alilc/lowcode-engine'; ...
componentDidMount() {
  // 这里由于面板上会有多个 setter，这里我用 field.id 来标记 setter 名
  const { field, value } = this.props;
  this.emitEventName = `${SETTER_NAME}-${this.props.field.id}`;
  event.on(`${this.emitEventName}.bindEvent`, this.bindEvent) }
  bindEvent = (eventName) => {
    // do someting }
  componentWillUnmount() {
  // setter 是以实例为单位的，每个 setter 注销的时候需要把事件也注销掉，避免事件池过多
  event.off(`${this.emitEventName}.bindEvent`, this.bindEvent)
} ...

在 B setter 中触发事件，来完成通信:

bindFunction = () => {
  const { field, value } = this.props;
  // 这里展示的和插件进行通信,事件规则是插件名+方法
  event.emit('eventBindDialog.openDialog', field.name, this.emitEventName);
}

修改同级 props 的其他属性值 setter 本身只影响其中一个 props 的值，如果需要影响其他组件的 props 的值，需要使用 field 的 props:

bindFunction = () => {
  const { field, value } = this.props; const propsField = field.parent;
  // 获取同级其他属性 showJump 的值
  const otherValue = propsField.getPropValue('showJump'); // set 同级其他属性 showJump 的值
  propsField.setPropValue('showJump', false);
}

import AltStringSetter from './AltStringSetter'; import { setters } from '@alilc/lowcode-engine'; setters.registerSetter({
  AltStringSetter: { component: AltStringSetter, }  
});

物料中使用,我们需要将目标组件的属性值类型值配置到物料资源配置文件中，例如 packages/demo/public/ assets.json 其中核心配置如下:

{
    "props": {
      "isExtends": true,
      "override": [
        {
          "name": "type",
          "setter": "AltStringSetter"
        }
      ]
    }
}

在物料中的完整配置如下:

{
  "componentName": "Message",
  "title": "Message",
  "docUrl": "", 
  "screenshot": "",
  ...

本文正在参加阿里低代码引擎征文活动

快速构企业应用降本增效最佳实践 - 低代码让人人都是IT开发工程师

二、定制设计器：

三、定制插件：

四、低代码插件开发实践：

五、设置器定制：