阿里低代码框架 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. 我们选择物料【组件/物料】类型,包的模式选择react-组件库,因为这里我们要存放多个组件。
    在这里插入图片描述

  2. 安装依赖,启动调试环境

npm & yarn install

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

yarn lowcode:dev
开发自己的组件
  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. 在改目录下,创建index.tsx文件,导出我们的组件, 记得在根入口要导出我们的组件
import MyInput from './my-input';

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

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

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

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

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

  1. 发布组件,这里有问题的可以网上找篇文章,看看怎么发布,这里假设我们所有的环境已经准备就绪,直接发布。
yarn lowcode:build  // 组件编译

npm publish  // 发布npm
在引擎中使用我们的组件
  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. 合并components内容 ,这里要注意,不能直接把assets-prod.json的components中合并,需要把根目录的lowcode文件夹下的meta.ts文件合并
    在这里插入图片描述

  2. 合并componentList内容,把snippets合并到componentsList内容当中

在这里插入图片描述

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

在这里插入图片描述

结束语

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

代码已上传到github,请查看

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

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

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

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

  • 6
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
LowCodeEngine 是一个低代码开发平台,它可以帮助开发人员快速构建应用程序。以下是 LowCodeEngine 的教程: 1. 注册账号并创建一个项目 首先,您需要在 LowCodeEngine 网站上注册一个账号。注册完成后,您可以创建一个新项目,输入项目名称和描述,然后选择您想要使用的模板。 2. 添加数据模型 在 LowCodeEngine 中,您可以轻松地创建数据模型。首先,您需要定义模型的属性。例如,如果您正在创建一个学生信息管理系统,您可以定义学生的姓名、年龄、性别等属性。然后,您可以添加关系,例如,您可以将学生与他们的课程关联起来。 3. 创建表单和页面 在 LowCodeEngine 中,您可以使用拖放式界面创建表单和页面。您可以选择各种不同的组件,例如文本框、下拉框、日期选择器等。您可以根据需要调整每个组件的属性,例如大小、颜色和位置。然后,您可以将表单和页面保存到您的项目中。 4. 添加业务逻辑 在 LowCodeEngine 中,您可以使用编程语言来添加业务逻辑。例如,您可以编写代码来验证用户输入、计算结果、更新数据库等。LowCodeEngine 支持多种编程语言,例如 JavaScript、Python 等。 5. 发布应用程序 一旦您完成了应用程序的开发,您可以将其发布到云端或本地服务器上。LowCodeEngine 支持多种部署选项,例如 Docker 镜像、云主机等。 以上就是 LowCodeEngine 的简单教程,希望对您有所帮助。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值