检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
{widget}.js 文件介绍 {widget}.js为组件逻辑文件，整个Widget的渲染核心JS，在组件编辑状态和页面最终的发布运行态都会被加载执行。一个推荐的组件架构，应包含表1中API。
{widget}.editor.js 文件介绍及示例 eventConfig classfication propertiesConfig 父主题： 目录文件详解
图1 响应动作 /** * 文件global_SelectWidget.js中, 在init钩子中注册响应动作 * @params thisObj: 组件实例 */ Studio.registerAction( thisObj, 'confirmLocationWidgetCbk
", "The widget template showing how to use the Vue library", params); registerConnector 必须在connector.js中注册connector，使用方式参考如下： /* @param {string
注册自定义事件 自定义事件在{widget}.editor.js文件中的eventConfig配置项中注册，以global_SelectWidget组件为例： 在文件global_SelectWidget.editor.js中定义事件 eventConfig: { sendSelect
父主题： {widget}.editor.js
在组件的“global_SelectWidget.js”文件中，注册名称为“sendSelect”的事件。
我的库 在我的库中，管理系统预置的和用户自定义的库，如添加库、查看库历史版本等。系统预置的库，只能执行查看详情、查看历史版本和下载操作。本章节的操作，均以自定义库为例。
目录文件详解 i18n.json packageinfo.json {widget}.css {widget}.editor.js {widget}.ftl {widget}.js 父主题： 代码结构介绍
}.editor.js
图3 设置自定义动作 /* * 可以像示例这样获取到组件对象，然后编写js代码 * 示例中表示，触发当前事件后，会隐藏组件widget16 * 帮助文档：https://support.huaweicloud.com/usermanualcanvas-astrozero/astrozero
站点和应用是一对一的关系，当创建应用时，系统默认会创建并分配一个站点。
将脚本d3js.org_d3.v4.min.js和packageinfo.json打包为zip，在AstroCanvas界面“我的资产 > 我的库”中上传。
name String name: "code" 分类的key及系统预置的图标。name值为预置类型时，tip和iconSrc非必填。name字段值应与belong字段映射。 iconSrc String iconSrc: "image/setting.png" 图标地址。
组件数据接入 组件对接数据配置开关 组件的数据可来自于静态数据或通过数据集获取，以EchartsWidgetTemplate组件为例，在“{Widget}”.editor.js文件中，可配置组件接入的数据。
例如“基本柱图”组件的“BarChart_Widget.editor.js”中定义代码如下： propertiesConfig: [ { config: [ { "type": "connectorV2",
了解代码目录结构 当系统预置的组件无法满足用户需求时，用户可自定义组件并上传到华为云Astro大屏应用中使用。华为云Astro大屏应用为您预置了一些组件模板（Widget包），您可以基于组件模板开发自定义组件。
/* * @param {*} props {} */ magno.savePropertiesForWidget({ // 属性应该与editor.js中的属性对应 barChartProps: JSON.stringify(_this.barPropList),
父主题： {widget}.editor.js
配置项总览 本章节介绍华为云Astro大屏应用支持的组件配置项，您可以通过{widget}.editor.js文件中定义的type字段，来定义组件的类型和配置。
长按/截图保存，微信识别二维码
或者关注公众号“华为云”
