扩展能力强大的低代码研发框架–阿里低代码引擎（入门篇）

前言

低代码开发近年来一直都是前端领域炙手可热的话题，市面上各种低代码平台层出不穷，各个公司也有各种类型的自研低代码平台。但是目前低代码领域，没有一个标准的规范，很多低代码平台都有一定的局限性，难以满足各类不同的需求，开发便捷度也有所缺失。

在这样的大环境下，一款具有强大扩展能力的低代码研发框架–阿里低代码引擎应运而生，它不是一套适用所有人的低代码平台，而是帮助低代码平台的开发者，快速生产低代码平台的工具。与此同时，阿里制定了低代码领域的标准协议，即《阿里巴巴中后台前端物料规范》和《低代码引擎搭建协议规范》。它们保障了低代码领域的标准化，成为了生态建设和流通的基石。

作为前端开发者，有必要了解低代码相关的知识，而刚好阿里低代码引擎也是很好的学习对象，文档相对来说比较齐全，以下是一些相关资料：

1. 阿里低代码引擎官网：低代码引擎 | LowCodeEngine
2. 阿里低代码引擎文档：快速开始 | Low-Code Engine
3. 阿里低代码引擎体验： 阿里低代码引擎 Demo
4. 架构综述：架构综述 | Low-Code Engine
5. 阿里低代码试用文档：1. 试用低代码引擎 Demo | Low-Code Engine
6. 阿里低代码引擎技术白皮书：低代码引擎技术白皮书-藏经阁-阿里云开发者社区
7. FAQ 概述 | Low-Code Engine
8. 阿里低代码引擎和生态建设实战及思考
9. 低代码技术在研发团队的应用模式探讨

什么是低代码引擎

1. 低代码引擎是一款为低代码平台开发者提供的，具备强大定制扩展能力的低代码设计器研发框架。
2. 低代码引擎的核心是设计器，通过扩展插件、周边生态等可以产出各式各样的设计器。设计器承载着低代码平台的核心功能，包括入料、编排、组件配置、画布渲染等等。
3. 低代码引擎是前端 SDK，是一款面向前端研发人员的技术产品。

名词解释

阿里低代码引擎贴心的给出了一些刚接触低代码的时候需要了解的一些专业术语的解释，如果你刚接触低代码，你可能需要先补充下这方面的知识。

低代码面板概览

以下是阿里低代码引擎中比较出彩的功能：

1. 源码面板

一个页面对应一个 react 组件，方便开发者开发

2. Schema编辑

Schema 是一份符合《中后台低代码组件描述协议》的 JSON 。这份 Schema 包含基础信息和属性描述信息部分，低代码引擎会基于它们在运行时自动生成一份 configure 配置，用作设置面板展示。

也就是说这份Schema文件就是低代码页面的描述信息，低代码引擎是依赖这个文件来展示页面的。

我们可以直接编辑这个Schema文件，页面中相应的信息也可以随之更改。

3. 数据源面板

数据源面板可以理解为处理接口数据的地方，通过这里可以统一管理接口信息。

数据源id对应着接口请求到的数据将会存放到 this.state[id] 当中，比如下图中id为info，那你即可通过this.state.info来访问数据源。

数据源请求方式，通过加载 this.dataSourceMap 中对应的数据源，即可获得对应数据。

// 请求 info（info 在数据源面板中定义）
this.dataSourceMap['info'].load({
    data: {}
}).then(res => {})
  .catch(error => {});

4. 出码功能

通过点击右上角的“出码”按钮，你就可以无痛得到一份新鲜的react项目。

更多关于使用低代码引擎demo的细节可以参考 官方文档。

发布自己的物料

低代码引擎的demo可能不适用于所有人，所以你需要了解一下如何运用低代码引擎来制定你自己的低代码平台。

这里以发布一个组件库为例

1. 项目初始化

npm init @alilc/element your-material-name

your-material-name 需要替换为你自己的组件库名字

npm i

执行之后，你将会得到一个完整的组件库项目。

2. 编写组件

你可以在src/components文件夹下面编写自己的组件，并且在src/index.tsx中暴露出组件及组件参数

3. 调试

npm run lowcode:dev

4. 构建低代码组件

npm run lowcode:build

5. 登录npm账号

检查npm源是否是官方源 registry.npmjs.org/

npm config get registry

设置为官方源

npm config set registry https://registry.npmjs.org/

登录 npm 账号（没有的需要到www.npmjs.com/注册）

npm login

6. 发布组件库

npm publish

如下即为刚发布的组件库

www.npmjs.com/package/ali…

使用自己的物料

将组件库中 build/lowcode/assets-prod.json 文件与你的 demo 项目中的 src/services/assets.json 的内容合并起来，也可以说更新资产包的过程。

更新之后，重新启动项目，即可使用该组件库。

vue 画布支持

我们知道，通过对阿里低代码引擎的使用，你可以扩展插件，物料，设计器等来制作合适的低代码开发平台。

阿里低代码引擎主要是支持 react 画布，但对于vue爱好者可能会比较倾向于 vue 画布。对此，官方表示短期没有支持的计划，目前社区内已有肯耐珂萨团队实现的 Vue 画布可以了解一下，当然，优秀的你也可以自己实现这个功能。

代码仓库：github.com/KNXCloud/lo…

体验链接：knxcloud.github.io/lowcode-eng…

源码汇总

NPM 包对应源码位置汇总 | Low-Code Engine

后记

以上就是本文的全部内容，本文大概的介绍了一下阿里低代码引擎，并且强力推荐前端开发者来学习这款引擎，他可能打破了你之前对低代码开发的常规认识，让你了解低代码引擎的强大扩展能力。
所以，当你有低代码开发需求的时候，不妨来使用一下阿里低代码引擎吧。

原文链接：https://juejin.cn/post/7345025297139482634 作者：阿李贝斯