检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
自定义组件开发规范 代码结构介绍 组件配置项（Config配置） 组件内置API 组件数据接入 组件交互
组件内置API 内置API一览表 Studio对象预置API一览表 magno对象预置API一览表 HttpUtils工具类预置API一览表 SafeUtils安全工具类预置API一览表 父主题： 自定义组件开发规范
Studio对象预置API一览表 表1 Studio对象预置API一览表 API API说明 registerWidget 定义组件。 registerConnector 定义桥接器。 registerEvents 注册事件，只有通过此API注册后的事件才会在组件的事件列表中展现。
HttpUtils工具类预置API一览表 表1 HttpUtils工具类预置API一览表 API API说明 getCookie 用于获取某个cookie的值。 setCookie 用于设置cookie的值。 getI18n 返回一个Vue18n的实例。 getCsrfToken
magno对象预置API一览表 表1 magno对象预置API一览表 API API说明 savePropertiesForWidget() 用于在开发态中保存当前组件的高级设置属性信息。 savePropertiesForWidget() 该API用于在开发态中，保存当前组件的高级设置属性信息。
内置API一览表 表1 内置API一览表 API API说明 init 组件渲染的入口函数，组件自己实现继承，使用推荐模板即可。 render 整个组件渲染的业务逻辑实现入口，组件自己实现继承。 getConnectorProperties 获取Connector对接的配置值，用于查看与Connector相关的信息。
SafeUtils安全工具类预置API一览表 表1 SafeUtils安全工具类预置API一览表 API API说明 escapeHtml() 将HTML字符串进行转义。 getSafeUrl() 对外部链接进行xss安全过滤，获取安全的绝对URL地址。 escapeHtml()
初识开发页面 可视化开发页面 华为云Astro大屏应用一站式数据可视化开发页面，由可视化组件、图层、页面数据集、画布、功能按钮和主题六个区域组成，各区域功能介绍请参见表1。 图1 可视化开发页面 表1 可视化开发页面功能说明 序号 名称 说明 1 组件 在全部组件中，可以查看到各
]; }, 配置数据数据时，下图中的“静态数据”选项即为静态数据，支持直接在线编辑静态数据。 图3 静态数据 父主题： 自定义组件开发规范
新建并开发自定义组件 操作场景 当系统预置的组件无法满足用户需求时，用户可自定义组件包进行上传，在页面中进行使用。在开发自定义组件前，请仔细阅读自定义组件开发规范章节内容，了解组件的开发规范。下面以开发网站中常用的柱状图（vue2+Echarts）组件为例，向您介绍如何开发自定义组件。
组件交互 组件自定义事件实现 组件响应动作实现 父主题： 自定义组件开发规范
slider tab switch radio checkbox colorpicker time select list 父主题： 自定义组件开发规范
代码结构介绍 了解代码目录结构 目录文件详解 父主题： 自定义组件开发规范
packageinfo.json 文件介绍 packageinfo.json是组件的元数据描述文件，用于配置组件的基本信息。 文件示例 { "widgetApi": [{ "name": "EchartsWidgetTemplate" }], "widgetDescription": "Echarts组件模板"
目录文件详解 i18n.json packageinfo.json {widget}.css {widget}.editor.js {widget}.ftl {widget}.js 父主题： 代码结构介绍
{widget}.editor.js 文件介绍及示例 eventConfig classfication propertiesConfig 父主题： 目录文件详解
当系统预置的组件无法满足用户需求时，用户可自定义组件并上传到华为云Astro大屏应用中使用。华为云Astro大屏应用为您预置了一些组件模板（Widget包），您可以基于组件模板开发自定义组件。 获取组件模板包 参考登录华为云Astro大屏应用界面中操作，登录华为云Astro大屏应用界面。 在主菜单中，选择“管理”，进入管理页面。
一个推荐的组件架构，应包含表1中API。其中，init、render和beforeDestory为组件的通用生命周期函数，其余为推荐模板实现。 表1 组件架构组成 API名称 API解释 是否必须 init(生命周期函数) 组件初始化入口API，初始化组件通用能力，负责注册组件事件和组件动作。
组件响应动作实现 组件除了可以作为事件的触发器，还可以处理事件的响应动作，在响应动作中选择组件响应，就可以选择对应的组件响应动作，数据刷新、获取当前输入框值等都是组件的自定义响应动作。本章节将向您介绍，如何实现组件响应动作。 注册动作 在响应动作中，单击“响应动作”，在下拉框中选择对应的响应动作。
checkbox 配置项说明 表1 checkbox配置项说明 参数 类型 是否必选 示例 说明 type String 是 type: "checkbox" 配置项类型。 value Boolean 否 value: true 默认值。 name String 是 name: "commProps
长按/截图保存，微信识别二维码
或者关注公众号“华为云”
