-
代码结构介绍 - Astro大屏应用 AstroCanvas
代码结构介绍 了解代码目录结构 目录文件详解 父主题： 自定义组件开发规范
-
了解代码目录结构 - Astro大屏应用 AstroCanvas
了解代码目录结构 当系统预置的组件无法满足用户需求时，用户可自定义组件并上传到AstroCanvas中使用。AstroCanvas为您预置了一些组件模板（Widget包），您可以基于组件模板开发自定义组件。 获取组件模板包 参考登录AstroCanvas界面中操作，登录AstroCanvas界面。
-
目录文件详解 - Astro大屏应用 AstroCanvas
packageinfo.json {widget}.css {widget}.editor.js {widget}.ftl {widget}.js 父主题： 代码结构介绍
-
{widget}.css - Astro大屏应用 AstroCanvas
{widget}.css 文件介绍 {widget}.css为组件的样式文件，在该文件中编写组件的CSS样式。AstroCanvas的组件未进行打包编译，CSS样式可能存在互相影响的风险。因为，CSS选择器务必要加上组件id，通过组件id减少互相影响的可能。 文件示例 #EchartsWidgetTemplate
-
{widget}.ftl - Astro大屏应用 AstroCanvas
{widget}.ftl 文件介绍 {widget}.html为组件DOM结构文件，需要在服务端提前渲染的部分，可以写在此文件中，相当于HTML文件，负责样式展示。 文件示例 <div id="EchartsWidgetTemplate" v-cloak> <div ref="echartsDom"
-
{widget}.js - Astro大屏应用 AstroCanvas
name:'zhangsan'}]。某些场景假如只需要一个简单值val，可以设置组件桩数据设置为简单二维对象数组[{val:123}]。 - 文件示例 通用的组件核心代码 var EchartsWidgetTemplate = StudioWidgetWrapper.extend({ /* * 组件初始化入口API
-
packageinfo.json - Astro大屏应用 AstroCanvas
packageinfo.json 文件介绍 packageinfo.json是组件的元数据描述文件，用于配置组件的基本信息。 文件示例 { "widgetApi": [{ "name": "EchartsWidgetTemplate" }], "widgetDescription":
-
{widget}.editor.js - Astro大屏应用 AstroCanvas
{widget}.editor.js 文件介绍及示例 eventConfig classfication propertiesConfig 父主题： 目录文件详解
-
i18n.json - Astro大屏应用 AstroCanvas
i18n.json 文件介绍 i18n.json为组件的国际化资源文件，用于配置多语言，目前支持的多语言包含中英文两种，相应的key值分别为['zh-CN','en-US']。多语言文件支持配置在多个Json中，在packageinfo.json中的配置示例如下： "i18n":
-
eventConfig - Astro大屏应用 AstroCanvas
}); selectItem对象中，“desc”是对事件selectItem的解释。“fields”为组件对外暴露的字段及相应描述。相应代码要在{widget}.js中实现如下： emitSelectItem(itemVal) { widgetInst.triggerEvent("selectItem"
-
classfication - Astro大屏应用 AstroCanvas
classfication 字段介绍 classfication字段代表的是当前组件需要展示哪些大的配置项分类。AstroCanvas在设计前期对分类也进行了分组，因此这个字段被扩展为双数组形式。一般默认情况下，直接在数组对象的第一个数组中配置即可。如果无配置，则所有属性展示在一个大的分类下。
-
文件介绍及示例 - Astro大屏应用 AstroCanvas
文件介绍及示例 文件介绍 {widget}.editor.js为组件属性定义文件，负责组件编辑状态时需要渲染的界面和逻辑。其中，“{widget}”为自定义组件的名称，如本示例中该文件名为“EchartsWidgetTemplate.editor.js”。{widget}.editor
-
propertiesConfig - Astro大屏应用 AstroCanvas
propertiesConfig 字段介绍 propertiesConfig是一个数组，用于保存组件配置项的相关字段，包括数据接入配置、组件配置项。 图1 propertiesConfig配置示例 数据接入配置 数据接入配置详细介绍，请参见组件数据接入。 组件配置项 配置示例如下
-
HttpUtils工具类预置API一览表 - Astro大屏应用 AstroCanvas
HttpUtils工具类预置API一览表 表1 HttpUtils工具类预置API一览表 API API说明 getCookie 用于获取某个cookie的值。 setCookie 用于设置cookie的值。 getI18n 返回一个Vue18n的实例。 getCsrfToken
-
SafeUtils安全工具类预置API一览表 - Astro大屏应用 AstroCanvas
SafeUtils安全工具类预置API一览表 表1 SafeUtils安全工具类预置API一览表 API API说明 escapeHtml() 将HTML字符串进行转义。 getSafeUrl() 对外部链接进行xss安全过滤，获取安全的绝对URL地址。 escapeHtml()
-
健康检查设置 - Astro大屏应用 AstroCanvas
出现错误，页面右下角会弹框提醒。 开启代码执行异常提醒：勾选后，如果代码执行出现错误，页面右下角会弹框提醒。 开启首屏加载耗时过长提醒：勾选后，如果页面首屏加载耗时超过5秒，页面右下角会弹框提醒。 开启子页面加载状态检查：勾选后，平台会检测iframe子页面的运行状态。 父主题：
-
如何使用高级表格的后台排序功能 - Astro大屏应用 AstroCanvas
在主菜单中，选择“数据中心”。 在左侧导航栏中，选择“转换器 > 全部”，单击“新建转换器”。 输入转换器名称和分类，单击“确定”。 输入转换器代码，单击“保存”。 let data = [...dataset]; const sortType = $pageStore.sortType;
-
如何使用高级表格的后台筛选功能 - Astro大屏应用 AstroCanvas
在主菜单中，选择“数据中心”。 在左侧导航栏中，选择“转换器 > 全部”，单击“新建转换器”。 输入转换器名称和分类，单击“确定”。 输入转换器代码，单击“保存”。 let data = [...dataset]; const filter = $pageStore.filters let
-
ECharts图表 - Astro大屏应用 AstroCanvas
初始化代码块、实例化代码块、自定义事件和自定义动作。 图4 代码设置 初始化代码块：初始化代码块输入框是一个javascript的执行环境，该执行环境的目的是调用echarts的init方法创建实例，此处可配置初始化相关的操作，包括echarts的主题等。 图5 初始化代码块 单
-
上传自定义组件 - Astro大屏应用 AstroCanvas
开发组件后，将组件的全部文件重新打成zip包（请直接打包，不要在文件夹外打包），上传后即可被页面引用。 前提条件 将新建并开发自定义组件中开发好的组件代码压缩成后缀为.zip的压缩文件TabsWidget.zip、DisplayWidget.zip，也可以单击链接获取示例组件包TabsWidget
检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
