阿里低代码框架 lowcode-engine 之自定义物料篇_lowcode-engine自定义布局

前言

上一篇文章介绍了umi框架集成阿里低代码框架lowcode-engine，今天我们主要来说下低代码比较核心的东西之一物料，就是我们低代码框架怎么支持和使用我们自己写的组件。

介绍

物料是页面搭建的原料，按照粒度可分为组件、区块和模板：

1. 组件：组件是页面搭建最小的可复用单元，其只对外暴露配置项，用户无需感知其内部实现；
2. 区块：区块是一小段符合低代码协议的 schema，其内部会包含一个或多个组件，用户向设计器中拖入一个区块后可以随意修改其内部内容；
3. 模板：模板和区块类似，也是一段符合低代码协议的 schema，不过其根节点的 componentName 需固定为 Page，它常常用于初始化一个页面；

低代码编辑器中的物料需要进行一定的配置和处理，才能让用户在低代码平台使用起来。这个过程中，需要一份一份配置文件，也就是资产包。资产包文件中，针对每个物料定义了它们在低代码编辑器中的使用描述。

物料开发

项目初始化

1. lowcode官方给我们提供了脚手架，我们通过脚手架可以快速创建

npm init @alilc/element lowcode-app-material  // lowcode-app-material项目名称

1
2

2. 我们选择物料【组件/物料】类型，包的模式选择react-组件库,因为这里我们要存放多个组件。
   

3. 安装依赖，启动调试环境

npm & yarn install
1

安装好依赖之后，就可以启动开发环境

yarn lowcode:dev
1

开发自己的组件

1. 项目的生成的模板已经为我们提供了俩个组件的例子，我们参考例子，实现我们自己的组件。
   其实就更正常写我们的React组件差不多。 在components文件下，创建my-input文件夹，

2. 创建my-input.tsx文件，编写我们的组件, Props一定要定义明确，后边会生成可以让我们在低代码平台可以编辑的内容。

import * as React from 'react';
import { createElement } from 'react';
import { Input } from '@alifd/next';
import { bizCssPrefix } from '../../variables';
import './index.scss';

export interface MyInputProps {
  color?: 'string';
  style?: 'object'
}

const MySelect: React.FC<MyInputProps> = function MySelect({
  color,
  style = {},
  ...otherProps
}) {
  const _style = style || {};
  if (color) {
    _style.backgroundColor = color;
  }
  const _otherProps = otherProps || {};
  _otherProps.style = _style;
  return (
    <Input { ..._otherProps } />
  );
};

export default MySelect;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

3. 在改目录下，创建index.tsx文件，导出我们的组件, 记得在根入口要导出我们的组件

import MyInput from './my-input';

export type { MyInputProps } from './my-input';
export default MyInput;

1
2
3
4
5

4. 脚手架内有热更新，我们演示环境里主要可以看在根目录生成的lowcode文件夹，每个组件下面都有一个meta.ts文件，描述着组件一些比较重要的内容，在后续集成的时候我们还需要，之后一点点解析该文件。
   

我们看到在使用我们的组件，颜色属性是一个字符串，但我们不能更改。怎么办的，这里我们引入一个新的东西，setter(物料设置器), 官方已经帮我预置了一些设置器，我们先用，后去我们在来说一下怎么自定义setter,来实现我们自定义需求

我们找到meta.ts, 只需找到configure -> porps -> color -> setter -> componentName 的值改为ColorSetter即可。

刷新浏览器，在拖动我们的组件，就可以看到，这块变成了颜色选择器

4. 发布组件，这里有问题的可以网上找篇文章，看看怎么发布，这里假设我们所有的环境已经准备就绪，直接发布。

yarn lowcode:build  // 组件编译

npm publish  // 发布npm
1
2
3

在引擎中使用我们的组件

1. 在引擎中使用，主要关注umi项目中的 assets.json文件，把 lowcode-app-material项目中build -> lowcode -> assets-prod.json 的文件合并到 assets.json 中

2. 合并package，主要用来加载资源

[
    {
      "package": "lowcode-app-material",
      "version": "0.1.1",
      "library": "BizComps",
      "urls": [
        "https://unpkg.com/lowcode-app-material@0.1.1/build/lowcode/render/default/view.js",
        "https://unpkg.com/lowcode-app-material@0.1.1/build/lowcode/render/default/view.css"
      ],
      "editUrls": [
        "https://unpkg.com/lowcode-app-material@0.1.1/build/lowcode/view.js",
        "https://unpkg.com/lowcode-app-material@0.1.1/build/lowcode/view.css"
      ],
      "advancedUrls": {
        "default": [
          "https://unpkg.com/lowcode-app-material@0.1.1/build/lowcode/render/default/view.js",
          "https://unpkg.com/lowcode-app-material@0.1.1/build/lowcode/render/default/view.css"
        ]
      },
      "advancedEditUrls": {}
    }
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

3. 合并components内容 ，这里要注意，不能直接把assets-prod.json的components中合并，需要把根目录的lowcode文件夹下的meta.ts文件合并
   

4. 合并componentList内容，把snippets合并到componentsList内容当中

5. 启动我们的umi项目，就可以看到改组件可以使用了

结束语

以上我们完成了物料的开发和使用，之后我们来说一说setter和自定义setter。

代码已上传到github,请查看

• umi4-lowcode-app
• lowcode-app-material 物料开发

如果你觉得该文章不错，不妨

1、点赞，让更多的人也能看到这篇内容

2、关注我，让我们成为长期关系

3、关注公众号「前端有话说」，里面已有多篇原创文章，和开发工具，欢迎各位的关注，第一时间阅读我的文章