{widget}.js 文件介绍 {widget}.js为组件逻辑文件，整个Widget的渲染核心JS，在组件编辑状态和页面最终的发布运行态都会被加载执行。一个推荐的组件架构，应包含表1中API。其中，init、render和beforeDestory为组件的通用生命周期函数，其余为推荐模板实现。

查看更多 →

{widget}.css 文件介绍 {widget}.css为组件的样式文件，在该文件中编写组件的 CSS 样式。 华为云Astro大屏应用的组件未进行打包编译， CS S样式可能存在互相影响的风险。因为，CSS选择器务必要加上组件id，通过组件id减少互相影响的可能。 文件示例 #EchartsWidgetTemplate

查看更多 →

{widget}.ftl 文件介绍 {widget}.html为组件DOM结构文件，相当于HTML文件，负责样式展示。 在华为云Astro大屏应用中自定义组件时，需要在服务端提前渲染的部分，可以写在此文件中。 文件示例 <div id="EchartsWidgetTemplate"

查看更多 →

{widget}.editor.js 文件介绍及示例 eventConfig classfication propertiesConfig 父主题： 目录文件详解

查看更多 →

使用说明 通过配置Widget多语言，实现Widget在不同语种环境下都可正常显示。单击下载链接，获取样例包“widget_demo_i18n.zip”。 操作步骤 参考1中操作，模板选择“widgetVueTemplate”新建Widget（示例开发包为“widget_demo_i18n

查看更多 →

上传库的ID，由字母及数字组成，且必须以字母开头。 分类 库所属的分类，直接在下拉框中选择。 库类型 上传库所属的类型，当前均为主题库。 发行说明 库的描述信息，可以设置为库的功能。 在组件中引用库。 在1中获取的组件Widget包（widget_demo_mintui.zip）的“packageinfo.js

查看更多 →

一般用于在初始化阶段注册动作，只有通过此API注册后的事件才会在组件的动作列表中展现。使用方式参考如下： /* @param {obj} widgetInst widget实例 * @param {string} actionName 动作名称 * @param {string/{langKey:string}}

查看更多 →

事件和动作都是Widget的配置属性，用于实现Widget之间的交互。例如，单击某个Widget内的按钮，另外一个Widget需要进行数据更新操作，或者是需要跳转到同个应用下的其他页面，这时需要通过事件和动作的机制来实现。单击按钮是触发一个事件，该Widget需要选用“widg

查看更多 →

库名字：库的名称。 操作类型：当前操作的类型，如新增、更新等。 库ID：上传库的ID，由字母及数字组成，且必须以字母开头。 版本说明：发布描述信息。 在组件中引用库。 以自定义组件（widget_demo_mintui）为例，在该组件中引用第三方库，单击widget_demo_mintui

查看更多 →

华为云Astro大屏应用中的Widget分为以下两种： 系统预置Widget 系统预置Widget是系统已定义好的Widget，可直接拖拽到开发页面使用。更多关于预置组件的介绍，请参见组件介绍。 自定义Widget 自定义Widget是租户根据需要自行开发的Widget，通常开发过程是选择

查看更多 →

utton> </div> 在高级页面组件包的widget_demo_mintui.js/render方法中，新增Vue实例。 Vue.use(MINT); var vm = new Vue({ el: $("#widget_demo_mintui", elem)[0],

查看更多 →

</div> 在高级页面组件包的widget_demo_mintui.js/render方法中，新增Vue实例。 更多关于Vue的使用，可参考Vue官网。 Vue.use(MINT); var vm = new Vue({ el: $("#widget_demo_mintui"

查看更多 →

际化资源文件（i18n）。下面以为组件widget_demo_i18n配置中文和英文两种语言属性为例，其最终实现效果如图1、图2。 图1 中文环境下显示效果 图2 英文环境下显示效果 功能实现方法 下载组件模板。 在华为云Astro轻应用服务控制台的主页中，单击“进入首页”，进入应用开发页面。

查看更多 →

场景描述 本章节主要介绍，如何给Widget自定义属性以及如何在页面的Widget中，使用该属性值。单击链接，获取Widget样例包“widget_demo_property.zip”。 自定义Widget属性效果，如图1所示。 图1 自定义Widget属性 操作步骤 参考1中操作，

查看更多 →

配置项修改触发事件的回调函数，当前仅支持change事件。 入参vm说明 组件配置项中的disabled、showFunc和events中，都具有入参vm，vm为组件的Widget实例。 配置示例 通用配置示例如下，以global_SelectWidget组件为例，设置后效果如图1所示。本示例中的global_Se

查看更多 →

在模板详情页，单击“下载”，将模板下载到本地。 认识Widget包目录结构 解压下载到本地的组件Widget包，认识组件结构。如解压EchartsWidgetTemplate组件包，其目录结构如图2所示。 图2 Widget包目录结构 为了便于描述，对于名称不固定的手册，统一采用“{widget}”来命名。 i18n

查看更多 →

js”的“propertiesConfig”中，定义Widget属性，包含属性的类型、名称和在界面展示的标签名。 如下加粗代码所示，“widget_demo_property.editor.js”中分别定义了text、 checkbox以及select类型的三个属性参数。 widget_demo_property

查看更多 →

根据需要修改解压后的“Vue3Navigator_Widget.css”文件（本场景不需要修改）。 “Vue3Navigator_Widget.css”文件是Widget的样式文件，在该文件中编写Widget的css样式。 .navigator-widget-container { text-align:

查看更多 →

目录文件详解 i18n.json packageinfo.json {widget}.css {widget}.editor.js {widget}.ftl {widget}.js 父主题： 代码结构介绍

查看更多 →

分类 库所属分类。 库类型 上传库所属的类型。 发行说明 发布描述信息。 在组件中引用库。以自定义组件（widget_demo_mintui）为例，在该组件引用第三方库，单击widget_demo_mintui.zip获取该组件包。 在组件Widget包的“packageinfo

查看更多 →

过桥接器的变量名称获取桥接器实例，其中“APIConnector”类型为String，表示桥接器的变量名称。 ConnectorIns.process(renderCbk, errCbk)：通过桥接器实例调用process函数，主要作用为发起调用服务的请求和处理返回结果信息。 在

查看更多 →