检测到您已登录华为云国际站账号,为了您更好的体验,建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
API接口:选择待调用的API接口,下拉框中的选项取值为接口的标签,如果接口标签取值为中文,则这里“API接口”显示为中文标签。如果接口标签未定义,则显示接口的操作名称。 请求类型:API接口的请求类型,系统会自动填入。
图2 ROMA连接器配置示例 API接口:API请求路径。 请求类型:请求的类型,如GET、POST。 参数:输入参数,请根据实际请求进行配置。 测试API接口:用于测试该接口,单击“测试API接口”,“样例报文”中会显示输出结果。
自定义组件开发规范 代码结构介绍 组件配置项(Config配置) 组件内置API 组件数据接入 组件交互
Studio对象预置API一览表 表1 Studio对象预置API一览表 API API说明 registerWidget 定义组件。 registerConnector 定义桥接器。 registerEvents 注册事件,只有通过此API注册后的事件才会在组件的事件列表中展现。
SafeUtils安全工具类预置API一览表 表1 SafeUtils安全工具类预置API一览表 API API说明 escapeHtml() 将HTML字符串进行转义。 getSafeUrl() 对外部链接进行xss安全过滤,获取安全的绝对URL地址。 escapeHtml()
HttpUtils工具类预置API一览表 表1 HttpUtils工具类预置API一览表 API API说明 getCookie 用于获取某个cookie的值。 setCookie 用于设置cookie的值。 getI18n 返回一个Vue18n的实例。 getCsrfToken
组件内置API 内置API一览表 Studio对象预置API一览表 magno对象预置API一览表 HttpUtils工具类预置API一览表 SafeUtils安全工具类预置API一览表 父主题: 自定义组件开发规范
内置API一览表 表1 内置API一览表 API API说明 init 组件渲染的入口函数,组件自己实现继承,使用推荐模板即可。 render 整个组件渲染的业务逻辑实现入口,组件自己实现继承。 getConnectorProperties 获取Connector对接的配置值,用于查看与
magno对象预置API一览表 表1 magno对象预置API一览表 API API说明 savePropertiesForWidget() 用于在开发态中保存当前组件的高级设置属性信息。 savePropertiesForWidget() 该API用于在开发态中,保存当前组件的高级设置属性信息
功能优势 用户统一体验:大中小屏应用支持卡片化构建,遵循统一前端设计规范,提供给用户统一体验。 多屏无缝协同:针对多屏之间协同的场景,提供预置卡片,与后台统一服务关联,提供无缝协同的用户体验。 抽象行业公共能力:联合行业场景,抽象公共能力(卡片+模板)。
如何在页面URL参数中给全局变量赋值 如何基于页面级的全局变量实现组件交互中实现的场景是:用户在“下拉选择框”中选择某个告警状态时,通过配置的交互事件将告警状态赋值给全局变量,“多区域折线图”组件呈现的数据来源于封装了华为云Astro轻应用某API接口的数据集,将该接口的入参与全局变量绑定
图2 按需设置表达式 测试API接口:用于测试该接口,单击“测试API接口”,“样例报文”中会显示输出结果。 样例报文:对应API接口的响应样例报文数据格式,数据集的元数据结构由该样例报文经转换器处理后的数据结构确定。 单击“格式化”,可对样例报文进行格式化处理。
API接口:API接口的URL,本示例选择“getWarnDetailByStatus”接口。 参数:接口入参,当有入参时,系统会自动展示,需要设置参数默认值等。
代码结构介绍 了解代码目录结构 目录文件详解 父主题: 自定义组件开发规范
组件数据接入 组件对接数据配置开关 组件的数据可来自于静态数据或通过数据集获取,以EchartsWidgetTemplate组件为例,在“{Widget}”.editor.js文件中,可配置组件接入的数据。当识别到组件propertiesConfig中存在dataSetting类型的配置项时
测试API接口:用于测试该接口,单击“测试API接口”,“样例报文”中会显示输出结果。 样例报文:对应API接口的响应样例报文数据格式,数据集的元数据结构由该样例报文经转换器处理后的数据结构确定。 单击“格式化”,可对样例报文进行格式化处理。
API接口:选择待调用的API接口,下拉框中的选项取值为接口的标签,如果接口标签取值为中文,则这里“API接口”显示为中文标签。如果接口标签未定义,则显示接口的操作名称。 请求类型:API接口的请求类型,系统会自动填入。 参数:接口入参,当有入参时,系统会自动展示。
组件交互 组件自定义事件实现 组件响应动作实现 父主题: 自定义组件开发规范
组件响应动作实现 组件除了可以作为事件的触发器,还可以处理事件的响应动作,在响应动作中选择组件响应,就可以选择对应的组件响应动作,数据刷新、获取当前输入框值等都是组件的自定义响应动作。本章节将向您介绍,如何实现组件响应动作。 注册动作 在响应动作中,单击“响应动作”,在下拉框中选择对应的响应动作
tab 配置项说明 表1 tab配置项说明 参数 类型 是否必选 示例 说明 type String 是 type: "tab" 配置项类型。 value String 否 value: "defaultValue" 默认值。 name String 是 name: "commProps.myString