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

杰出D1

已于 2022-08-08 22:16:53 修改

阅读量4.5k

点赞数 6

文章标签： react.js javascript 前端

于 2022-08-08 16:54:35 首次发布

本文链接：https://blog.csdn.net/wangqiaojie/article/details/126227741

版权

前言

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

介绍

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

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

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

物料开发

项目初始化

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

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

我们选择物料【组件/物料】类型，包的模式选择react-组件库,因为这里我们要存放多个组件。
安装依赖，启动调试环境

npm & yarn install

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

yarn lowcode:dev

开发自己的组件

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

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

import MyInput from './my-input';

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

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

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

我们找到meta.ts, 只需找到configure -> porps -> color -> setter -> componentName 的值改为ColorSetter即可。
在这里插入图片描述

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

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

yarn lowcode:build  // 组件编译

npm publish  // 发布npm

在引擎中使用我们的组件

在引擎中使用，主要关注umi项目中的 assets.json文件，把 lowcode-app-material项目中build -> lowcode -> assets-prod.json 的文件合并到 assets.json 中
合并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": {}
    }
]