lowcode-engine开发自定义组件并集成

锦锦ZJin
900 阅读5分钟

使用阿里的低代码引擎实现封装自定义组件，并在demo项目中引用自己的自定义组件

一、开发自己的组件库

如果官方提供的组件库不能满足需求，想扩展自己的组件库，就需要使用引擎提供的项目模版另外新建项目开发组件库。

组件项目初始化（组件就属于物料）

组件：组件是页面搭建最小的可复用单元，其只对外暴露配置项，用户无需感知其内部实现

物料描述

低代码平台组件的流程如下：

  1. 用户通过拖拽/选择组件，在画布中看到组件
  2. 选中组件，出现组件的配置项
  3. 修改组件配置项
  4. 画布更新生效

当我们选中一个组件时，可以看到面板右侧会显示组件的配置项

包含的内容：

基础信息：描述组件的基础信息，通常包含包信息、组件名称、标题、描述等

组件属性信息：描述组件属性信息，通常包含参数、说明、类型、默认值4项内容

自定义组件开发步骤：

1、组件项目初始化，选择react组件库

2、安装依赖

3、把自己的组件代码放到项目中，逐渐调试启动项目：npm run lowcode:dev

4、修改物料描述文件meta.ts

组件项目初始化

npm init @alilc/element your-material-name

选择组件类型等基本信息

这里我们选择组件类型为react-组件库，之后会生成组件库项目

your-material-name
├─ .commitlintrc
├─ .editorconfig
├─ .eslintignore
├─ .eslintrc.js
├─ .gitignore
├─ .markdownlint.json
├─ .markdownlintignore
├─ .prettierignore
├─ .prettierrc.js
├─ .stylelintignore
├─ .stylelintrc.js
├─ build.json
├─ build.lowcode.js
├─ CHANGELOG.md
├─ commitlint.config.js
├─ docs
│  ├─ .dumi
│  │  └─ theme
│  │     ├─ builtins
│  │     │  ├─ API.tsx
│  │     │  └─ index.scss
│  │     └─ layout.tsx
│  ├─ .umirc.ts
│  └─ src
│     ├─ colorful-button
│     │  └─ index.md
│     └─ colorful-input
│        └─ index.md
├─ f2elint.config.js
├─ package.json
├─ README.md
├─ src
│  ├─ components   
│  │  ├─ colorful-button
│  │  │  ├─ colorful-button.tsx
│  │  │  ├─ index.scss
│  │  │  └─ index.tsx
│  │  └─ colorful-input
│  │     ├─ colorful-input.tsx
│  │     ├─ index.scss
│  │     └─ index.tsx
│  ├─ index.scss
│  ├─ index.tsx
│  ├─ variables.scss
│  └─ variables.tsx
├─ tsconfig.json
└─ tslint.json

组件开发与调试

# 安装依赖
npm install
# 启动lowcode环境进行调试预览
npm run lowcode:dev
# 构建低代码产物
npm run lowcode:build

执行上述命令后会在组件库根目录生成一个lowcode文件夹，里面包含每个组件的低代码描述

在src/components目录新增一个组件并在src/index.tsx中导出，然后再执行npm run lowcode:dev

低代码插件会在lowcode/目录自动生成新增组件的低代码描述(meta.ts)

用户可以直接修改低代码描述来修改组件的配置：

1）设置组件的setter

  1. 新增组件配置项

3）更改当前配置项

自定义组件开发实操：

在src/componetns下新建一个文件夹compo，并新建两个文件：Compo.tsx和index.tsx

Compo.tsx为组件代码，index.tsx主要做导出

import * as React from 'react';
import { createElement } from 'react';

export interface CompoProps {
  text?: string;
}

const Compo: React.FC<CompoProps> = ({text}) => {
   // @ts-ignore
   return (<div>{text || 'demo test'}</div>)
}

export default Compo;

export type {CompoProps} from './components/compo'
export {default as Compo} from './components/compo'

再次执行npm run lowcode:dev，会显示我们自定义的组件

接下来，我们发布自己开发的物料到npm上

  • npm login
  • 设置npm config set registry registry.npmjs.org
  • 登录npm 用户名、密码、输入验证邮箱一次性密码
  • 执行npm publish

如果需要更新package

  • 执行 npm version patch
  • 重新npm publish

在demo中使用自定义组件库

查看lowcode-demo源码，组件的配置是在assets.json中配置的

其中packages，定义了每个组件库的地址，

   {
      "title": "fusion组件库",
      "package": "@alifd/next",
      "version": "1.26.4",
      "urls": [
        "https://g.alicdn.com/code/lib/alifd__next/1.26.4/next.min.css",
        "https://g.alicdn.com/code/lib/alifd__next/1.26.4/next-with-locales.min.js"
      ],
      "library": "Next"
    },
    {
      "package": "@alilc/antd-lowcode-materials",
      "version": "1.1.1",
      "library": "AntdLowcode",
      "urls": [
        "https://alifd.alicdn.com/npm/@alilc/antd-lowcode-materials@1.1.1/build/lowcode/view.js",
        "https://alifd.alicdn.com/npm/@alilc/antd-lowcode-materials@1.1.1/build/lowcode/view.css"
      ],
      "editUrls": [
        "https://alifd.alicdn.com/npm/@alilc/antd-lowcode-materials@1.1.1/build/lowcode/view.js",
        "https://alifd.alicdn.com/npm/@alilc/antd-lowcode-materials@1.1.1/build/lowcode/view.css"
      ]
    },

我们回到自定义组件your-material-name项目中，找到build/lowcode/assets.prod.json

这里有packages和components的定义，注意需要先在浏览器打开urls里的两个url看能否正常访问。

我们依次更改packages、components、componentList三个地方

其中packages：

components:

componentList:

重新启动demo项目：

其中使用AliLowCodeEngine.material.componentsMap可以查看目前项目引用的物料内容

一些需要注意的地方

  • 如果用的是antd组件库，就会遇到个问题
  • 项目中用到了@ant-design/icons，比如在一个组件中引用了某个icon，会导致组件渲染错误。需要在assets.json中将icon资源手动添加进去。
  • 除了在组件自身的index.tsx和src/index.tsx导出具体的组件，还要导出组件的props类型定义，否则在组件库里找不到。
  • 新增一个组件后，需要重新执行命令：npm run lowcode:dev 自带的热更新应该不能监听新增的文件，所以需要重启下。
  • 组件没有限制必须用TS，可以用js语法写
  • 改变设置器后，组件更新，不能在控制台输出打印内容，用debugger调试，看变量值
  • 如果有用到antd的图标组件，antd Icon的引入改为：import Icon from 'antd/lib/icon'
  • 把?.这种写法改成普通判断写法
  • 组件都需要有defaultProps或者propTypes
  • 每次执行npm run lowcode:dev都会重新生成meta.ts文件，如果手动改了物料描述，建议先提交到git，防止改动的代码丢失。

总结：

自定义封装组件，总结一下就三步：

1、在src/components文件夹下新建组件的文件夹，写逻辑代码，定义需要对外暴露的props

2、在根目录/index.tsx中注册组件，不注册的话页面上看不到

3、运行npm run lowcode:dev命令，会在根目录/lowcode目录下自动生成组件的描述文件meta.ts，简单类型的props比如string、bool一般没啥问题，如果是复杂类型，比如复杂对象、数组、自动生成的描述可能不是我们想要的，这时需要手动改描述文件。

重点主要在第三步改描述文件，在页面上对组件进行拖拽、配置时，支持的操作都是由描述文件定义的。

4、运行npm run lowcode:build命令进行打包

5、执行npm publish进行发包

6、将build/lowcode/assets.prod.json中pacakges、compoment、lowcode/meta.js对应组件设置merge到demo项目的assets.json中

7、重新运行demo项目

调试：

在组件库中项目中添加相关的调试配置

build.json

{
  "library": "BizComps",
  "libraryTarget": "umd",
  "sourceMap": true,
  "alias": {
    "@": "./src/components"
  },
  "plugins": [
    [
      "build-plugin-component",
      {
        "themePackage": "@alifd/theme-2"
      }
    ],
    [
      "@alilc/build-plugin-alt",
      {
        "type": "plugin",
        "inject": true, 
        "openUrl": "https://lowcode-engine.cn/demo/index.html?debug"
      }
    ]
  ]
}

build.lowcode.js

const { library } = require('./build.json');

module.exports = {
  alias: {
    '@': './src',
  },
  plugins: [
    [
      '@alifd/build-plugin-lowcode',
      {
        library,
        engineScope: "@alilc"
      },
    ],
    [
      '@alilc/build-plugin-alt',
      {
        type: 'component',
        inject: true,
        library,
        // 配置要打开的页面，在注入调试模式下，不配置此项的话不会打开浏览器
        // 支持直接使用官方 demo 项目：https://lowcode-engine.cn/demo/index.html
        openUrl: "https://lowcode-engine.cn/demo/index.html?debug"
      }
    ]
  ],
};

同时运行组件库项目和demo项目，会自动跳转到lowcode-engine.cn/demo/demo-g…

增加?debug会进入调试环境：

avatar
文章
阅读
粉丝