优维低代码：构件基本说明

优维低代码技术专栏，是一个全新的、技术为主的专栏，由优维技术委员会成员执笔，基于优维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": [...]
}

本期低代码技术干货就分享到这里！