{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

查看更多 →

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

查看更多 →

的，需要写在“global_Vue”之后。 在1中获取的Widget包（widget_demo_mintui.zip）的widget_demo_mintui.ftl中写一个简单的表单DOM。 <div id="widget_demo_mintui"> <mt-field label="username"

查看更多 →

登录组件属于自定义组件。本示例中已经为您提供了开发好的组件包，您只需要上传到站点中即可使用。自定义登录组件的开发方法，请参考（可选）开发自定义登录组件。 “业务用户登录”页面开发流程 本示例中，主要通过线下开发一个自定义登录组件，然后上传到高级页面，再进行组件配置，实现应用登录页面功能。登录页面开发流程，如图2所示。

查看更多 →

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

查看更多 →

使用华为云Astro轻应用开发高级页面时如何引用第三方库 期望实现效果 在自定义高级页面组件开发过程中，华为云Astro轻应用支持开发者直接引用第三方库，在降低组件开发复杂度的同时，丰富了组件的功能。库是支撑高级页面组件运行的第三方依赖，如果缺少相应的库，则高级页面组件不能正常运

查看更多 →

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

查看更多 →

使用说明 在高级页面组件开发过程中，低代码平台支持开发者直接引用第三方库，在降低组件开发复杂度的同时，丰富了组件的功能。库是支撑高级页面组件运行的第三方依赖，若缺少相应的库，则高级页面组件不能正常运行。 低代码平台提供了一些系统预置库，若不满足现有需求，支持开发者制作并上传新的库。 系统预置库

查看更多 →

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

查看更多 →

版本说明：发布描述信息。 在组件中引用库。 以自定义组件（widget_demo_mintui）为例，在该组件中引用第三方库，单击widget_demo_mintui.zip获取该组件包。 在组件Widget包（widget_demo_mintui.zip）的“packageinfo

查看更多 →

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

查看更多 →

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

查看更多 →

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

查看更多 →

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

查看更多 →

端”，单击“添加”。 图9 添加高级页面 绝对布局：可指定Widget出现在画布的任意位置，支持Widget的层叠放置。 流式布局：页面中Widget可以根据页面的分辨率进行自动的位置调整，支持Widget与Widget之间的响应式。 页面创建完成后，自动进入编辑页面，如图10所示。

查看更多 →

新建并开发自定义组件 操作场景 当系统预置的组件无法满足用户需求时，用户可自定义组件包进行上传，在页面中进行使用。在开发自定义组件前，请仔细阅读自定义组件开发规范章节内容，了解组件的开发规范。下面以开发网站中常用的柱状图（vue2+Echarts）组件为例，向您介绍如何开发自定义组件。

查看更多 →

端”，单击“添加”。 图9 添加高级页面 绝对布局：可指定Widget出现在画布的任意位置，支持Widget的层叠放置。 流式布局：页面中Widget可以根据页面的分辨率进行自动的位置调整，支持Widget与Widget之间的响应式。 页面创建完成后，自动进入编辑页面，如图10所示。

查看更多 →