优维低代码：构件参数传递

优维低代码技术专栏，是一个全新的、技术为主的专栏，由优维技术委员会成员执笔，基于优维7年低代码技术研发及运维成果，主要介绍低代码相关的技术原理及架构逻辑，目的是给广大运维人提供一个技术交流与学习的平台。

连载第八期

《编排详解：构件参数传递》

▽

在上一篇中，在构件基本说明里面说到了构件参数的简要配置，是直接在 storyboard 写的固定值，但在实际使用中，他会有多种形式的，如下做一一举例说明：

# 参数来源于小产品配置

当前只支持${APP.homepage}，一般在链接地址中使用比较多

{
  "brick": "basic-bricks.redirect-to",
  "properties": {
    "href": "${APP.homepage}/${instanceId}/detail"
  }
}

# 参数来源于 Url 及参数

格式为${xxx}，其中xxx为路由参数。如当前构件所在页面的路由为"path":

"${APP.homepage}/:objectId/:instanceId"，那可以使用${objectId}获得objectId，${instanceId}获得instanceId

{
  "brick": "basic-bricks.redirect-to",
  "properties": {
    "href": "${APP.homepage}/${instanceId}/detail"
  }
}

格式为${QUERY.xxx}或${query.xxx}（建议用大写）。如当前页面 url 为/demo/xxx/detail?q=aaa，那么通过${QUERY.q}可获取到aaa。另外，还支持如果获取不到则赋予默认值模式

{
  "keyword": "${QUERY.q=aa}"
}

表示如果 url 参数如果没有 q，则keyword="aa"

# 参数来源于useResolves（后台接口）

"bricks": [
  {
    "brick": "providers-of-cmdb.instance-api-get-detail",
    "bg": true
  },
  {
    "brick": "basic-bricks.page-title",
    "lifeCycle": {
      "useResolves": [
        {
          "provider": "providers-of-cmdb\\.instance-api-get-detail",
          "args": [
            "APP",
            "${instanceId}",
            {
              "params": {
                "fields": "name"
              }
            }
          ],
          "transform": {
            "pageTitle": "name"
          }
        }
      ]
    }
  }
]

上面配置表示basic-bricks.page-title构件的pageTitle参数来源于
providers-of-cmdb.instance-api-get-detail构件的name字段。

下面对useResolves部分做详细解说：

• provider：表示使用哪个构件，字段为 Css Selector，因此构件名称中的 . 需要转义，写成\\.
• args：该 providers 构件所需要用到的参数，一般也即是后台接口参数
• transform：从返回的数据抽配置映射规则给到所属的 brick，详细见Transform 数据转换

# 参数来源于父容器

{
  "brick": "cmdb-instances.instance-detail",
  "properties": {
    "instanceId": "${instanceId}",
    "objectId": "APP",
    "attrCustomConfigs": {
      "_hierarchy": {
        "useBrick": {
          "brick": "presentational-bricks.brick-value-mapping",
          "properties": {
            "mapping": {
              "接入上层": {
                "color": "green"
              },
              "接入中层": {
                "color": "green"
              },
              "接入下层": {
                "color": "green"
              },
              "逻辑上层": {
                "color": "blue"
              },
              "逻辑中层": {
                "color": "blue"
              },
              "逻辑下层": {
                "color": "blue"
              },
              "数据上层": {
                "color": "cyan"
              },
              "数据中层": {
                "color": "cyan"
              },
              "数据下层": {
                "color": "cyan"
              }
            }
          },
          "transform": {
            "value": "@{instanceData._hierarchy}"
          }
        }
      }
    },
    "fieldsByTag": [
      {
        "name": "",
        "fields": ["name", "_hierarchy"]
      }
    ]
  }
}

一般常见于列表构件或概要构件要针对某个字段通过展示构件来做特殊渲染。如上例子表示：对_hierarchy构件调用
presentational-bricks.brick-value-mapping来渲染。注意其中的useBrick的配置，这是我们通用的构件渲染子构件的做法，其中利用上了transform的能力:

"transform": {
  "value": "@{instanceData._hierarchy}"
}

表示将父构件的数据instanceData的_hierarchy字段给到子构件的value属性。

有疑问加站长微信联系（非本文作者）