上一篇文章我们讲述了在 EasyMABuilder 中如何通过表达式和微应用函数来进行数据处理，让低代码平台也获得了与专业代码媲美的编写代码的能力和体验，不过这些代码仅限于数据加工，它无法参与 UI 界面相关的工作，虽然 EasyMABuilder 提供了数百个开箱即用的构件，并提供了在微应用层面封装模板的能力，但对于 UI 界面，总有更个性化的场景和需求，对此，我们提供了用户编写新构件的能力，并提供配套的脚手架工具来方便用户更快捷的编写新构件。
准备
开始前，我们需要准备本地开发环境。
Windows 用户请使用 Subsystem for Linux。
创建一个新的构件项目
开发者可以按需创建自己的构件项目，每个项目中可以包含多个构件包，每个构件包又可以定义多个构件。
使用优维官方提供的 CLI 工具即可一键生成新的构件项目：
# 指定项目名称，例如 `my-repo`，将在当前目录创建一个子目录：
npx @next-core/create-next-repo my-repo
# 项目创建后，进入项目并安装 Node 模块。
cd my-repo && yarn
这个新生成的项目已经初始化提供了构建、测试、打包、代码静态检查等现代化的前端工程化配置，如果我们将项目托管在 GitHub 上，还可以开箱即用地使用包括持续集成和依赖更新等在内的自动化工作流。
创建一个新的构件包
初始化的项目还没有任何构件包，我们先使用项目中内置的脚手架工具创建一个：
- 运行
yarn yo； - 选择
a new package of bricks； - 输入构件包的名称，例如
my-bricks； - 然后，我们可以选择同时创建一个构件，本文为了演示我们先选择跳过。
新的构件包的代码就已经初始化完成，其中的各种工程配置文件可以按需自由调整。
创建一个新构件
构件包有了，我们再创建一个新的构件：
- 运行
yarn yo； - 选择
a new brick； - 输入构件的名称，例如
hello-world。
编写构件
初始化的构件主要包含以下文件：
bricks/my-bricks/src/
hello-world/ # 构件目录
HelloWorld.spec.tsx # React 组件单元测试
HelloWorld.tsx # React 组件代码
index.spec.ts # Custom Elements 单元测试
index.spec.tsx # Custom Elements 代码
这个构件已经可以使用，我们先启动开发版本的构建：
yarn start --scope @next-bricks/my-bricks
然后打开一个新的终端来启动开发服务：
yarn serve --local-bricks=my-bricks
接着就可以在我们的微应用中使用该构件了：
不过这个构件还只是一个空壳，我们接下来完善它。假设我们的需求是做一个按钮构件，简单做下修改：
import React from "react";
import { Button } from "antd";
export function HelloWorld(): React.ReactElement {
return <Button>Hello World</Button>;
}
保存后，本地页面将立即更新：
属性
我们再让构件支持一个“按钮类型”的属性：
import React from "react";
import { Button } from "antd";
import type { ButtonType } from "antd/lib/button";
export interface HelloWorldProps {
buttonType?: ButtonType;
}
export function HelloWorld({
buttonType,
}: HelloWorldProps): React.ReactElement {
return <Button type={buttonType}>Hello World</Button>;
}
export class HelloWorldElement extends UpdatingElement {
@property()
buttonType: ButtonType;
// ...
protected _render(): void {
if (this.isConnected) {
ReactDOM.render(
<BrickWrapper>
<HelloWorld buttonType={this.buttonType} />
</BrickWrapper>,
this
);
}
}
}
最后修改我们的应用编排，设置一个按钮类型：
brick: "my-bricks.hello-world"
properties:
buttonType: "primary"
事件
我们再为它添加一个点击事件：
export interface HelloWorldProps {
buttonType?: ButtonType;
onButtonClick(greeting?: string): void;
}
export function HelloWorld({
buttonType,
onButtonClick,
}: HelloWorldProps): React.ReactElement {
const handleClick = useCallback(() => {
onButtonClick("Hello World");
}, [onButtonClick]);
return (
<Button type={buttonType} onClick={handleClick}>
Hello World
</Button>
);
}
import { event, EventEmitter } from "@next-core/brick-kit";
export class HelloWorldElement extends UpdatingElement {
// ...
@event({ type: "button.click" })
private _buttonClickEvent: EventEmitter<string>;
private _handleButtonClick = (greeting: string): void => {
this._buttonClickEvent.emit(greeting);
};
protected _render(): void {
if (this.isConnected) {
ReactDOM.render(
<BrickWrapper>
<HelloWorld
buttonType={this.buttonType}
onButtonClick={this._handleButtonClick}
/>
</BrickWrapper>,
this
);
}
}
}
最后修改我们的应用编排，绑定一个按钮事件：
brick: "my-bricks.hello-world"
properties:
buttonType: "primary"
events:
button.click:
action: "message.info"
args:
- "<% EVENT.detail %>"
点击该按钮，将弹出提示信息：
由于我们的构件即是 HTML 元素，因此，鼠标点击等原生事件可以直接在构件中使用，无需进行编程，这里我们仅用作编写构件事件的示例。
至此，我们完成了基本的构件能力的开发。
