检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
editor.js：组件核心渲染文件。组件属性定义文件，负责组件编辑状态时需要渲染的界面和逻辑。 {widget}.flt：组件DOM结构文件，需要在服务端提前渲染的部分可以写在此文件中，相当于HTML文件，负责样式展示。 {widget}.js：组件逻辑文件，整个Widget的渲染核
目录文件详解 i18n.json packageinfo.json {widget}.css {widget}.editor.js {widget}.ftl {widget}.js 父主题： 代码结构介绍
文件介绍及示例 文件介绍 {widget}.editor.js为组件属性定义文件，负责组件编辑状态时需要渲染的界面和逻辑。其中，“{widget}”为自定义组件的名称，如本示例中该文件名为“EchartsWidgetTemplate.editor.js”。{widget}.editor
使用页面模板文件新建页面 使用页面模板文件，构建开发页面，减少重复开发，提高交付效率。创建移动端页面操作和大屏&PC端页面相同，本章节以创建大屏&PC端页面为例进行介绍。 前提条件 已获取对应的页面模板文件，详情请参见下载当前页面。 通过页面模板文件新建页面 参考登录AstroC
{widget}.ftl 文件介绍 {widget}.html为组件DOM结构文件，相当于HTML文件，负责样式展示。 在AstroCanvas中自定义组件时，需要在服务端提前渲染的部分，可以写在此文件中。 文件示例 <div id="EchartsWidgetTemplate"
{widget}.css 文件介绍 {widget}.css为组件的样式文件，在该文件中编写组件的CSS样式。 AstroCanvas的组件未进行打包编译，CSS样式可能存在互相影响的风险。因为，CSS选择器务必要加上组件id，通过组件id减少互相影响的可能。 文件示例 #EchartsWidgetTemplate
与belong字段映射。 iconSrc String iconSrc: "image/setting.png" 图标地址。组件文件下，image文件中的setting.png。 classfication示例 classfication配置示例如下，其对应效果如图1所示。 classfication:
packageinfo.json 文件介绍 packageinfo.json是组件的元数据描述文件，用于配置组件的基本信息。 文件示例 { "widgetApi": [{ "name": "EchartsWidgetTemplate" }], "widgetDescription":
{widget}.js 文件介绍 {widget}.js为组件逻辑文件，整个Widget的渲染核心JS，在组件编辑状态和页面最终的发布运行态都会被加载执行。一个推荐的组件架构，应包含表1中API。其中，init、render和beforeDestory为组件的通用生命周期函数，其余为推荐模板实现。
"messages-en" // 组件的多语言文件,相应文件为messages-en.json }, { "name": "messages-zh" // 组件的多语言文件,相应文件为messages-zh.json } ], 文件示例 messages-zh.json配置示例
生成测试Key 其中，“服务器机器码”请配置为2中获取的内容，服务器名称请根据实际情况进行配置。 返回本地部署信息页面，单击服务器机器码后的，下载测试Key文件（runtime.key）。 图12 下载测试Key文件 将获取的测试Key，上传到本地服务器的“/home/canva
{widget}.editor.js 文件介绍及示例 eventConfig classfication propertiesConfig 父主题： 目录文件详解
Name' }, }, ], }, }, clickSeries字段对应组件{widget}.js文件中，注册的事件id。 window.Studio.registerEvents(this, 'clickSeries', { zh_CN:
将组件下载到本地。 图2 单击玫瑰花饼图 解压下载的组件包，在“RosePieChart_Widget.editor.js”中查找模型名称。 图3 查找模型名 根据业务需求，设置自定义桥接器中的数据连接逻辑，并将该目录中的所有文件和文件夹打成zip包。 将开发好的自定义桥接器zip包上传到AstroCanvas中。
propertiesConfig 字段介绍 propertiesConfig是一个数组，用于保存组件配置项的相关字段，包括数据接入配置、组件配置项。 图1 propertiesConfig配置示例 数据接入配置 数据接入配置详细介绍，请参见组件数据接入。 组件配置项 配置示例如下
您可以通过“Excel模式”和“Json模式”两种模式设置静态数据。设置为“Excel模式”时，可执行如下操作： 单击“文件导入”，可将本地的数据导入到当前组件中使用。仅支持导入CSV和Excel格式的文件，且文件大小不能超过100KB。 执行导入操作前，请单击，查看当前组件对静态数据字段的要求。例如，玫瑰
css 组件的样式文件，在该文件中编写组件的CSS样式。 EchartsWidgetTemplate.ftl 组件DOM结构文件，需要在服务端提前渲染的部分可以写在此文件中，相当于HTML文件，负责样式展示。 packageinfo.json 组件的元数据描述文件。 widegtApi
MintUI库文件结构 packageinfo.json包含所要引入的文件。例如，MintUI库需要引入的文件有“js/index.js”和“css/index.css”文件，请在packageinfo.json中添加这两个文件的描述，如下所示。其中，“js”和“css”定义文件类型，“name”定义文件路径及名称。
通过移动页面，将页面移动到其他文件夹中，便于页面集中管理。 移动页面 参考登录AstroCanvas界面中操作，登录AstroCanvas界面。 在项目列表中，单击页面所在的项目，进入项目。 将鼠标放在对应的页面上，单击，选择“移动”。 选择目标文件夹，单击“确定”。 图1 移动页面
参考私有化部署安装指导中操作，创建一个新目录，部署新版本的AstroCanvas。 方式二：替换旧版本中的private-deploy-版本号.jar包 获取新版私有化部署包并解压。 在AstroCanvas服务控制台，单击实例中的“进入首页”，进入AstroCanvas界面。 在页面右上角，单击“账号名”，选择“本地部署”。
长按/截图保存，微信识别二维码
或者关注公众号“华为云”
