优维低代码技术专栏，是一个全新的、技术为主的专栏，由优维技术委员会成员执笔，基于优维7年低代码技术研发及运维成果，主要介绍低代码相关的技术原理及架构逻辑，目的是给广大运维人提供一个技术交流与学习的平台。
在上一篇中，我们分享了在编排详解中是如何进行菜单配置的，本期我们将继续来解读编排详解中的构件基本说明。
# 构件配置
"bricks": [
{
"brick": "basic-bricks.micro-view",
"slots": {
"titleBar": {
"type": "bricks",
"bricks": [
{
"brick": "basic-bricks.page-title",
"properties": {
"pageTitle": "APP 管理"
}
}
]
},
"content": {
"type": "bricks",
"bricks": [
{
"template": "cmdb-instances.instance-list",
"params": {
"objectId": "APP",
"detailUrlTemplates": {
"APP": "${APP.homepage}/${instanceId}"
},
"presetConfigs": {
"fieldIds": ["name", "_hierarchy", "businesses", "owner"]
}
}
}
]
}
}
}
]
我们开始进入深水区，bricks是一个有序数组，表示一个页面可以有多个构件组成。
我们先来看basic-bricks.micro-view这个构件，将他的配置抽离出来解释：
{
"brick": "basic-bricks.micro-view",
"slots": {
"titleBar": {
"type": "bricks",
"bricks": [
{
"brick": "basic-bricks.page-title",
"properties": {
"pageTitle": "APP 管理"
}
}
]
},
"content": {
"type": "bricks",
"bricks": [
...
]
}
}
}
◆ brick：表示使用的是哪个构件，其命名格式为
BRICK-PACKAGE-NAME.BRICK-NAME。在原子构件包 及 业务构件包可以查阅到我们目前支持的所有构件
- 这里我们也可以直接写 html 原生的 tag，比如 div、span、h1 等
- basic-bricks.micro-view是一个页面框架构件容器，一般在所有页面的最外层都会有这么一个构件，这样可以保证页面的框架布局（如布局位置、间距等），确保标准一致
◆ slots：构件的插槽，插槽的意思是这个构件提供了子构件插入的能力，但插入点的位置会由父构件决定，插槽点用名称来表示。比如basic-bricks.micro-view就提供了 3 个插槽：titleBar、toolbar、content，表示左上角标题位置，右上角工具栏位置，内容位置，具体可查看说明文档。有些构件提供了 slot，有些构件没有，这个要看构件的具体实现。
- 注意，如果你写了一个不存在的插槽点名称的话，也没关系，会自动追加
◆ properties：构件的参数配置，具体查看各个构件的说明
- 如果构件是原生 html 标签，比如 div，他的properties用小写驼峰来作为 key，比如 style、textContent 等
# 模板构件
{
"template": "cmdb-instances.instance-list",
"params": {
"objectId": "APP",
"detailUrlTemplates": {
"APP": "${APP.homepage}/#{instanceId}"
},
"presetConfigs": {
"fieldIds": ["name", "_hierarchy", "businesses", "owner"]
}
}
}
大伙可能也发现，在bricks还有另外一种不同的写法，这种叫构件模板（Legacy）他是由多个 brick 封装而成的。
- template：模板是用template来作为 key 的，而不是brick
- params：模板的参数是params，而不是properties
# provider 构件
"bricks": [
{
"brick": "providers-of-cmdb.cmdb-object-api-get-object-all",
"bg": true,
},
{
"brick": "presentational-bricks.brick-utils",
"bg": true,
},
{
"brick": "providers-of-cmdb.instance-api-get-detail",
"bg": true,
},
...
]
provider 构件是访问后台接口或纯逻辑处理的一种特殊构件，它不会有实际可见的页面，一个provider构件就对应一个后台接口，是给其他构件提供数据的，详细使用请见[构件参数传递](
/next-docs/docs/micro-app/brick-property#参数来源于 useresolves（后台接口）)。
- bg：表示该构件会被放到一个看不见的背景（background）容器里
- properties：同样 provider 构件也可以设置其properties，里面只有一个唯一参数args。
{
"brick": "providers-of-cmdb.cmdb-object-api-get-object-all",
"bg": true,
"injectDeep": true,
"properties": {
"args": []
}
}
更多 provider 说明见Provider 构件，另外，Provider 列表页面列举了当前框架内置的 provider 构件。
在bricks里面去定义provider是之前的写法，新的写法可以更简洁，直接在路由层级定义。如：
{
"path": "${APP.homepage}/demo/cmdb-instance-crud/:instanceId",
"providers": [
"providers-of-cmdb.cmdb-object-api-get-object-all",
"providers-of-cmdb.instance-api-get-detail"
],
"bricks": [
...
]
}
本期低代码技术干货就分享到这里！
有疑问加站长微信联系（非本文作者）
