检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
检测到您已登录华为云国际站账号，为了您更好的体验，建议您访问国际站服务网站 https://www.huaweicloud.com/intl/zh-cn
不再显示此消息
editor.js为组件属性定义文件，负责组件编辑状态时需要渲染的界面和逻辑。其中，“{widget}”为自定义组件的名称，如本示例中该文件名为“EchartsWidgetTemplate.editor.js”。{widget}.editor.js文件只在组件编辑状态被加载，主要包括
{widget}.js 文件介绍 {widget}.js为组件逻辑文件，整个Widget的渲染核心JS，在组件编辑状态和页面最终的发布运行态都会被加载执行。一个推荐的组件架构，应包含表1中API。其中，init、render和beforeDestory为组件的通用生命周期函数，其余为推荐模板实现。
Widget的运行依赖Library，如果缺少相应的Library，则Widget不能正常运行。如果页面要使用前端框架或组件库，例如流行的Vue、Bootstrap、ElementUI等，需要将其制作成Library资产，然后上传到环境中使用。 华为云Astro大屏应用中的Widget分为以下两种：
EchartsWidgetTemplate.js 组件逻辑文件，整个Widget的渲染核心JS，在组件编辑状态和页面最终的发布运行态都会被加载执行。主要包含的预置API说明请参见表3。 EchartsWidgetTemplate.editor.js 组件属性定义文件，负责组件在编辑状态时需要渲染的界面和逻辑。“*
表示变量名，例如“selectValue”。 在组件“.js”文件逻辑代码中，使用“thisObj.triggerEvent()”方法触发该事件时，要将变量字段传入发送的data中。 fields[0].desc 变量的中英文描述，可选配置。 在组件的“global_SelectWidget.js”文件中，注册名称为“sendSelect”的事件。
{widget}.editor.js 文件介绍及示例 eventConfig classfication propertiesConfig 父主题： 目录文件详解
组件对接数据配置开关 组件的数据可来自于静态数据或通过数据集获取，以EchartsWidgetTemplate组件为例，在“{Widget}”.editor.js文件中，可配置组件接入的数据。当识别到组件propertiesConfig中存在dataSetting类型的配置项时，默认组件需要对接数据集。配置示例如下：
_mintui.zip）的widget_demo_mintui.js的render方法中新增Vue实例。 Vue.use(MINT); var vm = new Vue({ el: $("#widget_demo_mintui"
js：组件逻辑文件，整个Widget的渲染核心JS，在组件编辑状态和页面最终的发布运行态都会被加载执行。 父主题： 代码结构介绍
setCookie("key","value") getI18n 一般用于在初始化阶段返回一个Vue18n的实例，配合Vue和VueI18n使用。使用方式参考如下： /* * 该Vue18n实例可以在new一个Vue实例时赋值为i18n参数。 */ HttpUtils.getI18n({
项目级：资源应用于整个项目。 页面级：资源应用于哪些页面。 页面作用域：选择资源所应用的页面。 开发界面下不加载：是否在开发页面时加载资源，请在确认不影响开发页面中的功能后，再打开，以减少开发时的资源加载。 设置后，再次进入项目时，设置才会生效。 单击“检查更新”，检查资源是否有版本更新。 如果
"The widget template showing how to use the Vue library", params); registerConnector 必须在connector.js中注册connector，使用方式参考如下： /* @param {string} connectorID
获取Connector对接的配置值，用于查看与Connector相关的信息。 getConnectorInstanceByName 通过{widget}.editr.js文件中配置的Connector名称，获取Connector实例，用于向Connector请求数据。 getProperties 获取该组件
对于部分配置项，初始化echarts之前需要异步加载文件。例如“地图（SVG）”组件需要先加载svg文件。这里需要在异步加载动作的完成回调函数中，手动调用echarts的setOption。 图8 异步加载 引入第三方库 第三方脚本可以通过AstroCanvas平台“库”的能力引入。例如，引入https://www
'tooltip' } ] ], 图1 classfication配置设置后效果 父主题： {widget}.editor.js
'Series Name' }, }, ], }, }, clickSeries字段对应组件{widget}.js文件中，注册的事件id。 window.Studio.registerEvents(this, 'clickSeries', {
通用设置 开启页面加载动画：勾选后，预览或打开页面时，将会显示加载动画。 网页图标：设置项目在浏览器标签页标题左侧的图标。图片类型支持ico、png、pjp、jpg、pjpeg、jpeg和jfif，图片大小不能超过1MB，建议使用大小为32*32像素的ico图标。 延迟加载隐藏的组件：
config数组中，每一个对象保存的配置项信息。config中，配置项的介绍，请参见组件配置项（Config配置）。 父主题： {widget}.editor.js
开启接口请求错误提醒：勾选后，如果接口请求出现错误，页面右下角会弹框提醒。 开启代码执行异常提醒：勾选后，如果代码执行出现错误，页面右下角会弹框提醒。 开启首屏加载耗时过长提醒：勾选后，如果页面首屏加载耗时超过5秒，页面右下角会弹框提醒。 开启子页面加载状态检查：勾选后，平台会检测iframe子页面的运行状态。
配置项总览 本章节介绍华为云Astro大屏应用支持的组件配置项，您可以通过{widget}.editor.js文件中定义的type字段，来定义组件的类型和配置。 表1 配置项总览 类别 类型 说明 输入框 input 单行文本输入框 textarea 多行文本输入框 数字类型 input-number
长按/截图保存，微信识别二维码
或者关注公众号“华为云”
