优维低代码：构件基本说明-CFANZ编程社区

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

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

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