云服务器内容精选

华为云首页用户手册

自定义组件开发规范

ASTRO轻应用 ASTROZERO-组件数据接入:组件使用静态数据

组件使用静态数据 AstroCanvas通过调用组件定义的getMockData，来获取默认静态数据。 getMockData: function () { return { "dataValue": [ { "label": "周六", "value": "Sunday" }, { "label": "周日", "value": "Monday" }, { "label": "周一", "value": "Tuesday" } ] }; } 配置数据数据时，下图中的“静态数据”选项即为静态数据，支持直接在线编辑静态数据。图3 静态数据

ASTRO轻应用 ASTROZERO 自定义组件开发规范
ASTRO轻应用 ASTROZERO-组件数据接入:组件使用数据集

组件使用数据集数据集实例获取。组件代码中可使用如下API，来获取对应的数据集实例。 ConnectorIns: thisObj.getConnectorInstanceByName('SelectDataConnector') || '' 调用数据集，获取数据。 thisObj.callFlowConn( this.ConnectorInsTabel, connParam, getFlowCallTabel); 例如，调用了dmax_line这个数据集，返回值如下图所示：图1 返回值这个数据因为键值名称并不是label、value，所以并不能渲染。此时需要一层映射，例如将city映射到label上，将code映射到value上。但是每次这个映射都不固定，需要交给用户自行配置，所以提出了映射的概念，即mapping。图2 映射由用户自己决定将什么字段拖拽映射到什么字段。例如，将city字段映射到了“选项标签展示值”字段，即label中，将code字段映射到了“选项值”字段，即value中。 [{ "city": "斗罗大陆", "pid": "null", "code": 0, "hasChildren": "true", "bool": 1 }, { "city": "武魂殿", "pid": 0, "code": 11111, "hasChildren": "true", "bool": 1 }] 映射后结果： [{ "label": "斗罗大陆", "pid": "null", "value": 0, "hasChildren": "true", "bool": 1 }, { "label": "武魂殿", "pid": 0, "value": 11111, "hasChildren": "true", "bool": 1 }] 组件在获取数据时，获取到的是经过映射转换的数据，可以直接使用label、value等固定字段。

ASTRO轻应用 ASTROZERO 自定义组件开发规范
ASTRO轻应用 ASTROZERO-组件数据接入:多数据集

多数据集部分组件可能存在使用多个数据源的情况，例如地图组件可能存在多个图层，相应配置可以如下： propertiesConfig: [ { config: [ { type: "dataSetting", name: 'heatMapDataConnector', mapping: {} }, { type: "dataSetting", name: 'DistrictDataConnector', mapping: {} } ], } ],

ASTRO轻应用 ASTROZERO 自定义组件开发规范
ASTRO轻应用 ASTROZERO-组件数据接入:组件对接数据配置开关

组件对接数据配置开关组件的数据可来自于静态数据或通过数据集获取，在“{Widget}”.editor.js文件中，可配置组件接入的数据。当识别到组件propertiesConfig中存在dataSetting类型的配置项时，默认组件需要对接数据集。配置示例如下： propertiesConfig: [{ type: 'dataSetting', name: 'selectDataConnector', mapping: { label: { keyTitle: { zh_CN: '选项标签展示值', en_US: 'Option label' }, limitNumber: '1', type: 'any', }, value: { keyTitle: { zh_CN: '选项值', en_US: 'Option value' }, limitNumber: '1', type: 'any', required: true, }, }, }, }] 表1 数据集字段说明字段类型是否必填示例说明 type String 是 type: "dataSetting" dataSetting为数据集类型。 mapping Object 否 mapping 数据集数据拖拽的配置项。 name String 是 selectDataConnector 数据集实例的唯一标识。表2 mapping字段说明字段类型是否必填示例说明 type String 是 type: "value" 根据type校验拖入字段，为枚举值。 value: 数字 dateString: 日期 catacary: 任意字符 numberOrString: number或者String类型 keyTitle Object 是 keyTitle: { zh_CN: "X轴数据", en_US: "X axis Data" } 标题，需要国际化。 limitNumber String 否 type: '1' 拖拽字段个数限制。 1：只能拖拽一个字段。 1+：可以拖拽多个字段。 required Boolean 否 required: true 是否必须配置。

ASTRO轻应用 ASTROZERO 自定义组件开发规范