Widget开发规范 本章节介绍前端页面的设计原则和Widget的开发规范。 设计原则 高级页面开发模式下，页面是由N个widget构成（N>=1）。Widget可以理解为页面中的小组件，组件的拆分可根据具体的业务和组件的复用情况进行。如果某个页面不可拆分或无复用场景，则可以只有一个Widget构成。

查看更多 →

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

查看更多 →

{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文件，负责样式展示。 文件示例 <div id="EchartsWidgetTemplate" v-cloak> <div ref="echartsDom"

查看更多 →

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

查看更多 →

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

查看更多 →

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

查看更多 →

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

查看更多 →

前端开发规范 标准页面公共组件样式规范 Widget开发规范 父主题： 开发规范

查看更多 →

设置宏 使用说明 宏是站点级的变量，可在开发Widget时使用“${sm.变量名}”调用该变量。 创建宏 参考如何进入经典开发环境中操作，进入经典版开发环境。 在“首页 > 项目 > 我的应用”中，单击对应的应用，进入应用开发页面。 在页面左下角，选择“页面设置”。 在“宏”页签，单击“新建站点宏”。

查看更多 →

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

查看更多 →

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

查看更多 →

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

查看更多 →

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

查看更多 →

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

查看更多 →

配置，实现应用登录页面功能。登录页面开发流程，如图2所示。 图2 应用登录页面开发流程 开发自定义组件：此步骤可以跳过，本示例中提供已经开发好的自定义登录组件；如果想要了解自定义登录组件的开发方法，请参考线下开发自定义登录组件。 业务用户登录页面即是设备维修管理系统的应用登录界面，大致设想如图3所示。

查看更多 →

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

查看更多 →

“CaseMapControllerWidget”组件已经开发完成，您可以直接在本文中获取组件包，上传到租户账号下直接使用。 图1 设备监控效果 设备监控页面大致开发流程： 图2 设备监控页面开发流程 操作步骤 上传监控组件。 下载监控widget文件包CaseMapControllerWidget

查看更多 →

修改解压后的“Navigator_Widget.js”文件。 “Navigator_Widget.js”文件是Widget逻辑文件，整个Widget的渲染核心JS。“路由导航(示例)”组件是基于Vue Router（ Vue.js官方的路由管理器）开发的，请参考Vue Router的代码开发规范，修改组件包中的文件。

查看更多 →

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

查看更多 →