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

查看更多 →

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

查看更多 →

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

查看更多 →

由一个或多个组件拼装而成。如果将一个页面看成拼图游戏的完整图案，那么组件就相当于拼图的每一小块。 图1 页面与widget（组件）的关系 Widget的运行依赖Library（库），如果缺少相应的Library（库），则Widget不能正常运行。因此在加载widget前，需要先加载必要的Library。

查看更多 →

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

查看更多 →

三个高级页面。 4、适配器Widget创建 分别创建四个widget组件，为了避免组件名称冲突，建议命名规范为：适配器_页面名_Widget（如：ROMAConnect_Config_Widget），然后在左侧菜单栏的“资产”中单击“组件”，提交新组件（具体开发参考平台相关规范）。

查看更多 →

</div> 将开发好的组件代码压缩到后缀为“.zip”的压缩文件中，也可以单击链接，获取组件样例包“widget_demo_property.zip”。 在组件库中上传组件包。 在环境配置的“维护 > 全局元素 > 页面资产管理 > 组件”中，单击“提交新组件”。 在提交新组件页面，设置组

查看更多 →

packageinfo.json：组件的元数据描述文件。 {widget}.css：组件的样式文件，在该文件中编写组件的CSS样式。 {widget}.editor.js：组件核心渲染文件。组件属性定义文件，负责组件编辑状态时需要渲染的界面和逻辑。 {widget}.flt：组件DOM结构文件，需

查看更多 →

的参考依据。 组件数据来源 组件是大屏页面的组成元素，配置页面数据即为配置组件数据。选中组件，单击组件上方的，可配置组件在页面呈现数据的来源，更多介绍请参见数据接入。 图5 配置组件数据 组件交互 AstroCanvas为组件设计了事件-动作机制实现组件与组件、组件与页面之间的交互，更多介绍请参见交互设置。

查看更多 →

</div> 参考6中操作，在组件库中上传该Widget包。 打开一个高级页面，在设计页面左上方单击，从“自定义”组件中拖出刚创建的Widget至右侧空白页面。 单击页面上方的，保存高级页面。 切换环境语言，在不同语种下，在页面中选中拖出的Widget，会在右侧显示该组件的属性配置面板，查看Widget属性是否符合预期。

查看更多 →

将修改后的组件Widget包，重新打包。 返回AstroCanvas界面，选择“我的资产 > 我的组件”，单击“添加组件”，将3.d中的组件包上传至组件库中。 图3 上传组件 组件名称：组件名称，系统会根据组件包名称自动填充。 操作类型：当前操作的类型，如新增、更新等。 组件ID：资

查看更多 →

overflow: scroll; } 将修改后的头部组件和组件路由导航组件文件，重新打成zip包。 参考基于预置组件进行自定义中操作，上传重新打包后的组件。 在高级页面设计器左上方，单击，拖出上传的头部组件、路由导航组件和预置的路由视图组件至设计页面。 单击页面上方的，保存页面。 保存成功后，单击，发布页面。

查看更多 →

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

查看更多 →

overflow: scroll; } 将修改后的头部组件和组件路由导航组件文件，重新打成zip包。 参考基于预置组件进行自定义中操作，上传重新打包后的组件。 在高级页面设计器左上方，单击，拖出上传的头部组件、路由导航组件和预置的路由视图组件至设计页面。 单击页面上方的，保存页面。 保存成功后，单击，发布页面。

查看更多 →

}) 将修改后的组件Widget包，重新打包。 返回AstroZero环境配置，选择“维护 > 全局元素 > 页面资产管理 > 组件”，单击“提交新组件”，将3中的组件包上传至组件库中。 图3 上传组件 表2 上传组件参数说明 参数 说明 名字 组件名称，系统会根据组件包名称自动填充。

查看更多 →

将开发好的组件代码压缩到后缀为“.zip”的压缩文件中，也可以单击下载链接，获取样例包“widget_demo_i18n.zip”。 在组件库中上传组件包。 在环境配置的“维护 > 全局元素 > 页面资产管理 > 组件”中，单击“提交新组件”。 在提交新组件页面，设置组件基本信息，并上传压缩文件，单击“提交”。

查看更多 →

将修改后的内容，重新打包，您也可以单击widget_demo_mintui.zip，获取该组件包。 返回环境配置，选择“维护 > 全局元素 > 页面资产管理 > 组件”，单击“提交新组件”，将自定义组件包上传至组件库。 图4 上传组件 表2 上传自定义组件参数说明 参数 说明 示例 名字 新提交组件的名称，系统会根据组件包名称自动填充。

查看更多 →

registers"); } } }) 将修改后的组件Widget包，重新打包。 参考开发高级组件中操作，将高级页面组件包上传至组件库中，在页面上中添加该高级页面组件。 当高级页面中拖入widget_demo_mintui高级页面组件后，即可在“页面设置 > 资源”中发现Vue库和MintUI库已加载，表示引用成功。

查看更多 →

视频采集 描述 视频采集组件提供了视频采集功能，移动端需要采集视频信息时，可以使用该组件完成视频采集功能。 开放能力 视频采集为组件资产，提供视频采集组件，如图1所示。 图1 视频采集组件示例 视频采集组件提供的能力： 组件支持配置处理方式：公共或者ISDP+。 组件提供视频数据保存连接器，连接器处理视频数据。

查看更多 →

插件”页签。 找到需要更新的组件（例如userLogin），单击组件所在行右侧的，进入组件详情页。 图1 页面设置下的组件列表 单击“更新”，进入组件更新页面。 图2 选择更新按钮 单击“上传”，上传本地的组件zip包，再单击“更新”。 图3 更新组件 在“插件”页签，单击，获取锁。

查看更多 →

将修改后的组件Widget包，重新打包。 返回AstroZero管理中心，选择“应用管理 > 页面资产管理 > 组件”，单击“提交新组件”，将3中的组件包上传至组件库中。 表2 上传组件参数说明 参数 说明 名字 组件名称，系统会根据组件包名称自动填充。 上传图标 组件的显示图标，本示例不配置。

查看更多 →