检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
文件介绍及示例 文件介绍 {widget}.editor.js为组件属性定义文件，负责组件编辑状态时需要渲染的界面和逻辑。其中，“{widget}”为自定义组件的名称，如本示例中该文件名为“EchartsWidgetTemplate.editor.js”。{widget}.editor
{widget}.js 文件介绍 {widget}.js为组件逻辑文件，整个Widget的渲染核心JS，在组件编辑状态和页面最终的发布运行态都会被加载执行。一个推荐的组件架构，应包含表1中API。其中，init、render和beforeDestory为组件的通用生命周期函数，其余为推荐模板实现。
Name' }, }, ], }, }, clickSeries字段对应组件{widget}.js文件中，注册的事件id。 window.Studio.registerEvents(this, 'clickSeries', { zh_CN:
{widget}.editor.js 文件介绍及示例 eventConfig classfication propertiesConfig 父主题： 目录文件详解
与belong字段映射。 iconSrc String iconSrc: "image/setting.png" 图标地址。组件文件下，image文件中的setting.png。 classfication示例 classfication配置示例如下，其对应效果如图1所示。 classfication:
config数组中，每一个对象保存的配置项信息。config中，配置项的介绍，请参见组件配置项（Config配置）。 父主题： {widget}.editor.js
目录文件详解 i18n.json packageinfo.json {widget}.css {widget}.editor.js {widget}.ftl {widget}.js 父主题： 代码结构介绍
参考登录AstroCanvas界面中操作，登录AstroCanvas界面。 在项目列表页面中，单击“导入项目包”。 图1 导入项目包 选择本地已创建好的项目包，单击“打开”，即可将项目导入到AstroCanvas。 导入成功后，在项目列表中，可查看到已导入的项目，并根据自身业务需求，进行二次开发。当所选项目与目标空间
使用页面模板文件新建页面 创建移动端页面操作和大屏&PC端页面相同，本章节以创建大屏&PC端页面为例进行介绍。 操作场景 使用页面模板文件，构建开发页面，减少重复开发，提高交付效率。 前提条件 已获取对应的页面模板文件，详情请参见下载当前页面。 操作步骤 参考登录AstroCan
”两种模式设置静态数据。设置为“Excel模式”时，可执行如下操作： 单击“文件导入”，可将本地的数据导入到当前组件中使用。仅支持导入CSV和Excel格式的文件，且文件大小不能超过100KB。 执行导入操作前，请单击，查看当前组件对静态数据字段的要求。例如，玫瑰花饼图要求静态数
框选中选项）时发出的事件。 注册自定义事件 自定义事件在{widget}.editor.js文件中的eventConfig配置项中注册，以global_SelectWidget组件为例： 在文件global_SelectWidget.editor.js中定义事件 eventConfig:
配置项总览 本章节介绍AstroCanvas支持的组件配置项，您可以通过{widget}.editor.js文件中定义的type字段，来定义组件的类型和配置。 表1 配置项总览 类别 类型 说明 输入框 input 单行文本输入框 textarea 多行文本输入框 数字类型 input-number
{widget}.ftl 文件介绍 {widget}.html为组件DOM结构文件，相当于HTML文件，负责样式展示。 在AstroCanvas中自定义组件时，需要在服务端提前渲染的部分，可以写在此文件中。 文件示例 <div id="EchartsWidgetTemplate"
MintUI库文件结构 packageinfo.json包含所要引入的文件。例如，MintUI库需要引入的文件有“js/index.js”和“css/index.css”文件，请在packageinfo.json中添加这两个文件的描述，如下所示。其中，“js”和“css”定义文件类型，“name”定义文件路径及名称。
{widget}.css 文件介绍 {widget}.css为组件的样式文件，在该文件中编写组件的CSS样式。 AstroCanvas的组件未进行打包编译，CSS样式可能存在互相影响的风险。因为，CSS选择器务必要加上组件id，通过组件id减少互相影响的可能。 文件示例 #EchartsWidgetTemplate
sendSelect 自定义的事件名为“sendSelect”，必须配置。 须知： 需要在组件“.js”文件逻辑代码中，使用“Studio.registerEvents()”方法注册该事件，并使用“thisObj.triggerEvent()”方法触发该事件。 desc 事件的中
packageinfo.json 文件介绍 packageinfo.json是组件的元数据描述文件，用于配置组件的基本信息。 文件示例 { "widgetApi": [{ "name": "EchartsWidgetTemplate" }], "widgetDescription":
"messages-en" // 组件的多语言文件,相应文件为messages-en.json }, { "name": "messages-zh" // 组件的多语言文件,相应文件为messages-zh.json } ], 文件示例 messages-zh.json配置示例
registerConnector 定义桥接器。 registerEvents 注册事件，只有通过此API注册后的事件才会在组件的事件列表中展现。 registerAction 用来注册动作，只有通过此API注册后的事件才会在组件的动作列表中展现。 inReader 判断当前页面状态是开发态或预览态。
组件的数据可来自于静态数据或通过数据集获取，以EchartsWidgetTemplate组件为例，在“{Widget}”.editor.js文件中，可配置组件接入的数据。当识别到组件propertiesConfig中存在dataSetting类型的配置项时，默认组件需要对接数据集。配置示例如下：
长按/截图保存，微信识别二维码
或者关注公众号“华为云”
