操作场景 AstroZero低代码平台为组件设计了事件-动作机制，实现组件与组件、组件与页面之间的交互。 事件是应用在运行时，页面内发生的动作或者用户执行的操作（例如单击组件、组件加载等）。 动作是响应事件后，按照设定的方式，对事件做出回应（如页面跳转）。例如，用户在网页上单击一个按钮，通过显示一个信息框来响应这个动作。 本章节将向您介绍AstroZero低代码平台预置的常用事件及动作，以及在高级页面中如何为组件配置事件。

操作场景 当AstroZero低代码平台提供的预置高级组件无法满足您的开发需求时，开发者可以自定义组件包，并上传到AstroZero中。自定义组件包上传到AstroZero中后，可在高级页面中使用。自定义组件的开发流程如下： 下载组件模板 将AstroZero系统预置的模板到本地。 开发自定义组件 基于下载的模板，在本地根据自身业务需求开发组件。 上传组件到组件库并使用组件 将开发完的自定义组件上传到组件库，并在高级页面中使用。

步骤2 创建WebSocketAlarmFlow告警服务编排 创建WebSocketAlarmFlow告警编排以触发事件，并在服务编排中配置全局变量和系统（日期/时间）变量为事件传递参数。 如果想快速了解和验证WebSocket使用，可不必创建WebSocketAlarmFlow告警服务编排，采用消息事件的测试功能进行简单验证。您可以直接跳过该步骤，直接执行步骤3 开发alarmDisplayWidget告警展示组件，并在方法一：直接触发事件验证中采用方法1（直接触发事件验证）进行效果验证。 创建编排。 参考登录AstroZero新版应用设计器中操作，登录应用设计器。 在左侧导航栏中，选择“逻辑”。 单击编排的，进入添加服务编排。 选择“创建一个新的服务编排”，输入标签“WebSocketAlarmFlow”，单击“添加”。 单击名称对应的输入框，系统会根据标签自动生成名称。 图5 创建服务编排WebSocketAlarmFlow 在服务编排画布左侧，单击“基本”，将“发送事件”图元拖入画布中。 图6 拖入“发送事件”图元 添加添服务编排变量。 选中“发送事件”图元，单击画布右侧。 单击“全局上下文”，进入上下文页面。 单击“变量”后的，添加表4中变量。 图7 配置全局变量 表4 告警服务编排的变量 名称 数据类型 AlarmTitle 文本 AlarmContent 文本 在“发送事件”图元中，配置1中创建的事件命名空间__WebSocketAlarmEvent__e（需替换为用户实际创建的事件名称）。 参考下图配置输入参数，通过全局变量AlarmTitle和AlarmContent及系统变量$Flow.CurrentDateTime为事件传参。 图8 事件图元的配置 连接所有图元。 图9 连接图元 选中“开始”图元，单击，参考下图配置服务编排的入参。 入参是从全局上下文的变量中拖入，告警服务编排的入参有AlarmTitle和AlarmContent两个。 图10 配置入参 单击页面上方的，保存服务编排。 单击，启用服务编排。 服务编排只有启用后，才会生效。服务编排在启用后，不可编辑，如果需要对其中的图元或参数进行修改，请先单击，禁用该服务编排。

步骤1 创建WebSocketAlarmEvent告警事件 创建事件。 参考登录AstroZero新版应用设计器中操作，登录应用设计器。 在左侧导航栏中，选择“数据”。 单击事件后的，进入添加事件页面。 选择“创建新事件”，输入标签“WebSocketAlarmEvent”，单击“添加”。 单击名称对应的输入框，系统会根据标签自动生成名称，系统实际创建的事件名称为“命名空间__WebSocketAlarmEvent__e”。 图2 添加WebSocketAlarmEvent事件 在事件详情页面，选择“自定义参数”页签，单击“新建”。 设置标签、名称和字段类型，单击“保存”，添加事件自定义参数AlarmTitle。 图3 添加事件自定义参数 重复3中操作，创建事件自定义参数AlarmContent、AlarmDate。 表3 事件自定义参数说明 标签 名称 字段类型 AlarmContent 单击名称对应的输入框，系统根据标签自动生成名称。 文本 AlarmDate 单击名称对应的输入框，系统根据标签自动生成名称。 日期/时间 启用告警事件。 在事件详情页面，选择“基本信息”页签。 单击页面右上方的“启用”，启用该事件。 启用成功后，“启用”按钮会变为“禁用”按钮，同时“是否启用”标签变为状态。 图4 启用告警事件 消息事件只有启用成功后，该事件在服务编排或WebSocket中，才会有效。事件启用后，不可编辑，如果需要对事件进行参数修改，请先单击“基本信息”下的“禁用”按钮，禁用该事件。

响应式组件开发基本原则 组件的响应式设计，是高级页面适配多终端的重要前提。为确保自定义组件能够自适应不同分辨率设备，在组件开发中用户需要遵从响应式设计的基本原则。 根据内容设计 不专注于特定屏幕宽度，而是专注于内容设计，当屏幕越小或浏览器窗口越窄时，内容所占的垂直高度越来越多，内容就要向下方自然延伸。建议从小屏幕开始，逐步设置断点（例如设备宽度320px、768px、1024px），针对不同设备进行设计，形成流动布局。 针对复杂情况，可以使用 CSS 3的@media查询。针对不同的终端类型和不同屏幕分辨率的设备，定义不同样式，选择应用不同的 CS S规则。只有当该设定媒体查询与正在使用的设备匹配时，其对应的CSS规则才起作用。 CSS语法如下： @media mediatype and|not|only (media feature) { CSS-Code; } 其中，参数说明如表1所示。 表1 @media语法参数说明 参数 值 说明 mediatype all 用于所有设备。 screen 用于电脑屏幕、平板电脑、智能手机等。 print 用于打印机和打印预览。 media feature aspect-ratio 定义输出设备中，页面可见区域宽度与高度的比率。 max-width 定义输出设备中，页面最大可见区域的宽度。 max-height 定义输出设备中，页面最大可见区域的高度。 min-width 定义输出设备中，页面最小可见区域的宽度。 min-height 定义输出设备中，页面最小可见区域的高度。 设置示例：对页面宽度不同的设备，设定不同背景颜色。 /*媒体查询*/ /*页面宽度大于1200px 时，背景颜色为蓝色，主要用于大屏设备*/ @media screen and (min-width: 1200px) { body { background-color:blue; } } /*页面宽度在992px和1200px之间，背景颜色为红色，用于中等屏幕PC端*/ @media screen and (min-width: 992px){ body { background-color:red; } } 避免固定尺寸 使用像px这样的绝对单位，来指定元素的宽高、边框和字体大小等，固定宽度容易破坏响应式布局。为了布局更加灵活，推荐使用百分比、em或rem等相对单位，这样可以保证浏览器字体大小调整和缩放时，能正常显示。常用相对单位，如表2所示。 表2 常用相对单位 单位 说明 em 在font-size中，使用相对于父元素的字体大小，在其他属性中使用相对于自身的字体大小，如width。 rem 相对根元素的字体大小。 ch 相对于数字“0”的宽度。 ex 相对于字符“x”的高度。 lh 相对于元素line-height计算值。 最大和最小值 对于大屏页面和移动端，内容扩充占满整个屏幕宽度并不总是适用的。展示同样的内容，手机端可能更适宜充满屏幕宽度，而大屏则需要在宽度上留出一定边界，使得布局上更加美观。所以，设定最大值或最小值，可以帮助您设计更为合理的布局。例如，组件宽度设定100%，最大宽度设定1024px，那么内容扩充的最大宽度即为1024px，当屏幕宽度超出1024时，内容在宽度上不会再继续扩展。 嵌套对象 对于关系紧密的多个元素，采用相对位置会使得元素难以控制。此时，可以考虑放置于同一容器中集中管理。在容器内部，可以考虑采用绝对单位固定其关系，这对于不需要扩展的按钮等元素来说非常有效。 图片的自适应 自适应组件设计还需要满足图片的自适应，可以使用max-width，对图片宽度进行限制，确保图片宽度不会超过浏览器窗口或容器可视部分的宽度。 移动优先 通常来说，移动端屏幕较小、视图简单，而大屏空间大、呈现更为复杂和多样。那么，从移动端小屏幕设计入手过渡到大屏幕设计，在开发中逐步增加CSS的复杂度，通过补充设计的方式逐步丰富布局。这样，通过移动优先，可以更轻松地开发响应式布局。

高级页面开发框架 在开发高级页面过程中，主要涉及组件、库、桥接器、事件和动作等相关内容。组件、库、桥接器、事件和动作之间的关系，可概述为： 组件为高级页面的元素，组件的可复用性可以大幅提高开发效率。 组件的事件-动作机制提升页面的灵活度，使得组件与组件、组件与页面之间可以交互。 库作为组件的依赖，便捷的引用机制，降低了组件开发的复杂度且丰富了组件的功能。 组件可以通过桥接器调用后台接口，获取数据。 低代码平台通过组件、库、桥接器三类资产以及“事件-动作”机制，构建了高级页面的基本框架。 图7 组件、库、桥接器关系图 组件 组件是可复用的高级页面组成元素，一个高级页面由一个或多个组件搭建而成，可以通过拖拽组件快速搭建高级页面。如果将一个高级页面看成拼图游戏的完整图案，那么组件相当于拼图的每一小块。高级页面与组件的关系，如图8所示，其中Page为高级页面，Widget为高级组件。 图8 高级页面与组件的关系 高级页面中的组件，包括如下两类： 全局高级组件 全局高级组件是低代码平台为开发者提供的常用组件，主要包含图表、媒体（图片、视频）和文本等。更多关于全局高级组件的介绍，请参见设置AstroZero高级页面预置组件属性。 自定义组件 如果全局高级组件不能满足开发需求，低代码平台支持用户自定义组件。自定义组件开发方式，主要包含以下几类： 对全局高级组件的二次开发 低代码平台支持开发者下载全局组件，并在其基础上进行二次开发（如修改组件样式、逻辑等），完成后上传为自定义组件。通过这种方式，可以大幅度降低组件开发的工作量，详情请参见为AstroZero高级页面添加自定义组件。 通过组件模板开发 若全局高级组件中，未包含所需要的组件类型，可以基于低代码平台提供的组件模板进行自定义组件的开发。组件模板中已为您构建组件的基本架构，详情请参见为AstroZero高级页面添加自定义组件。 库 库是支撑高级组件运行的第三方依赖，如果缺少相应的库，则组件不能正常运行。如果高级组件需要使用前端框架或组件库，例如流行的Vue（已预置）、Bootstrap、Element（已预置）等，需要将其制作成库资产，再上传到环境中使用。如何在高级页面中引入库，请参见使用AstroZero开发高级页面时如何引用第三方库。 桥接器 在进行前台页面开发时，经常要调用后台数据，例如购物车中用户的ID、订单编号、商品信息等。这时需要通过桥接器调用后台API，获取后台数据，详情请参见使用桥接器为AstroZero高级页面组件绑定数据。 事件和动作 事件和动作都是组件的配置属性，用于实现组件之间的交互。例如，单击某个组件内的按钮，另外一个组件需要进行数据更新操作，或者是需要跳转到当前应用下的其他高级页面，这时需要通过事件和动作的机制来实现。单击按钮即是触发一个事件，数据更新操作或者页面跳转操作是一个动作，详情请参见添加事件或宏实现AstroZero高级页面组件交互。

初识高级页面开发界面 图1 高级页面开发界面 高级页面开发工作台，功能模块布局说明如下： 高级页面工具栏（序号1） 展示页面开发过程中的常用工具，如保存、发布，电脑端或者移动端页面设置等。 ：用于展开、收起高级组件列表。 /：为了让同一页面能够更好的呈现于电脑端和移动端，低代码平台提供了高级页面的电脑端和移动端两种终端视图，用户可分别对高级页面的电脑端和移动端进行定制开发。开发完成后发布生成的高级页面为同一URL，当电脑端或移动端加载这一URL时，平台会自动检测用户所用的设备类型并加载相应视图页面。 ：保存当前开发页面的修改。 ：发布当前开发的页面，页面发布后可以预览该页面的运行态效果。 页面修改、保存后，需再次执行发布操作，才能在应用和预览页面中体现修改内容。 ：页面发布后，可以预览该页面运行态效果。 ：页面开发完成后，可将该页面发布为模板。 /：页面开发过程中如果出现误操作，可执行撤销、复原操作。 ：低代码平台支持检查高级页面性能，生成性能报告页供开发者查看。 /：用于调节页面画布在开发工作台中的大小比例。 ：自动适应页面画布在开发工作台中的大小比例。 ：开启画布网格线功能，用于标定组件在画布中的位置。 ：设置高级页面的分辨率、网格大小、背景颜色和背景图片。 ：设置页面的状态。 组件分类列表（序号2） 包含高级组件的功能分类，用于在开发高级页面时对组件进行筛选，方便组件查找与管理。组件列表分类默认包含图表、媒体、地图、文本、装饰等，可选择相应的分类来筛选高级组件。 高级组件展示、选择区域（序号2、3） 选定序号2的组件分类后，属于该功能分类的组件将显示在序号3的区域。在该区域中，还包含了搜索框、应用场景、预置和自定义多种筛选条件。 搜索框：通过组件名称，可快速查询归属于当前选定组件分类中的高级组件。 图2 搜索框 应用场景筛选：可快速筛选不同应用场景的高级组件，当前应用场景包含通用、智慧园区、5G消息和其他等。 图3 应用场景筛选 预置和自定义筛选：用于筛选当前选定组件分类，包括预置组件和用户自定义组件。 预置组件是低代码平台提供的全局高级组件，详情请参见设置AstroZero高级页面预置组件属性。自定义组件为用户自主开发的高级组件，详情请参见为AstroZero高级页面添加自定义组件。 画布（序号4） 编辑页面内容及页面视图区域，可将组件从高级组件展示选择区域拖入该区域，快速搭建高级页面。下面以绝对布局方式的高级页面为例进行介绍。 定位到所需组件后，便可以将其拖动到画布中，用于构建所需的高级页面。 图4 拖拽组件到画布中 在画布中，可以通过拖拽的方式调整组件的位置、大小。低代码平台还提供了组件对齐提示线，帮助布局组件。 图5 调整组件 组件的右键设置：在画布中选中组件，单击鼠标右键会弹出删除、复制、粘贴（如果已复制组件）、格式刷、置于顶层、置于底层、高级设置选项。 删除：删除当前选中的高级组件，也可通过键盘中BackSpace键（退格键）和Delete键（删除键）实现。 复制：复制当前选中的高级组件，也可通过快捷键Ctrl+C实现。 粘贴：用于粘贴已复制的高级组件，也可通过快捷键Ctrl+V实现。 格式刷：用于复制当前选中组件的属性，应用于其他组件。可选的属性包含样式（边框、背景）、位置（距左、距上、高度、宽度）和其他属性。选定所需格式刷内容后，光标会变成刷子样式，单击所需格式刷组件即可。 图6 格式刷操作示例 置于底层/顶层：用于设置当前选中高级组件的堆叠顺序，即CSS中的z-index属性。仅绝对布局类型的高级页面，存在该设置选项。 高级设置：用于设置当前组件的样式属性，全局高级组件详细介绍，请参见设置AstroZero高级页面预置组件属性。 组件属性设置区域（序号5） 未选中画布中任何组件时，此模块显示内容为“当前视图组件列表”即当前页面中所布局的组件列表。您可以通过选择画布中或列表中的组件，切换到该组件的“组件属性设置”栏，进行当前选中组件的属性设置、数据设置、事件绑定和路由设置。 属性设置：组件基本属性设置，支持在自定义组件中添加自定义属性，详细介绍请参见为AstroZero高级页面添加自定义组件。 数据设置：设置组件绑定的桥接器，以实现通过桥接器调用后台接口，获取后台数据，详情请参见使用桥接器为AstroZero高级页面组件绑定数据。 事件绑定：设置在运行态，对该组件相关操作的事件触发的具体动作，详情请参见添加事件或宏实现AstroZero高级页面组件交互。 路由设置：当前该功能主要用于流式布局类型高级页面中的“路由导航”组件。

什么是高级页面 高级页面是由一个或者多个组件拼装而成。高级页面可以使用组件进行组装和配置，方便用户达到自己想要的效果。高级页面支持多种框架，支持代码开发，比较自由，多用于对页面效果要求高的场景。 高级页面主要用于开发应用中较复杂的前端页面，例如包含图片、图表、视频、地图等元素的页面。您可以将高级页面应用于开发网站、电商平台等，通过拖拽、布局组件，并进行相关属性配置即可快速搭建应用。低代码平台中的高级页面，提供了常用组件，组件包含了预置的样式，并封装了基础事件代码，实现了开箱即用，避免重复写样式和事件代码，陷入代码细节，使开发人员更好的专注于业务场景的挖掘。

前台页面常用调测方法 在高级页面的开发中，常借助浏览器内置的 开发者工具 对样式或功能问题进行定位和分析。下面以Chrome浏览器为例，简单介绍浏览器开发者工具中常用的调测方法。在Chrome浏览器中，按下“F12”或者“Ctrl + Shift + I”，开启开发者工具。 DOM和CSS样式调试 在Elements面板，可以自由的操作DOM和CSS，来迭代布局和设计页面。在开发者工具打开的状态下，使用左上角的箭头按钮，可点选页面元素，查看该元素DOM和CSS等。也可以在Elements页签下，修改页面上的元素的DOM标签或CSS样式（修改立即生效），实时查看修改后效果。 图1 Elements页签查看调试DOM和CSS样式 打印日志信息 在Console页签下，可使用控制台打印日志信息。在Sources页签下，调试JavaScript时常用方法是将多个console.log()语句插入代码，重新加载页面后，可以在Console页签中，查看到打印的消息。Sources页签主要包括三个部分，左侧为页面请求文件列表，中间为选择文件的文件内容，右侧为JavaScript调试窗格。 想要在JavaScript中打印日志，需要找到相应文件，查找相关代码，然后插入console.log()。 图2 Sources页签布局 调用低代码平台API 在Console页签下，可使用控制台调用低代码平台提供的API，以获取相关信息进行调试。 图3 调用低代码平台API 断点调试 在Sources页签下，可以设置断点来调试JavaScript。使用断点，DevTools会在暂停时及时显示所有变量值。Chrome开发者工具，提供了代码行断点、条件代码行断点、DOM断点和事件侦听断点等多种断点，请根据调测的实际需求选择合适的断点。断点的类型和使用场景，如表1所示。 表1 Chrome断点类型及使用场景 断点类型 使用场景 代码行 在确切的代码区域中。 条件代码行 在确切的代码区域中，且仅当其他一些条件成立时。 DOM 在更改或移除特定DOM节点或其子级的代码中。 XHR 当XHR网址包含字符串模式时。 事件 在触发点击等事件后运行的代码中。 侦听器 在引发已捕获或未捕获异常的代码行中。 异常函数 任何时候调用特定函数时。 代码行断点调试是最为常见的断点调试方法， 设置代码行断点的方法是找到请求文件，在Sources左侧请求文件列表按照目录查找，也可以借助“Ctrl+F”搜索关键词找到相关文件。在Sources中间文件内容区域，找到要设置断点的代码行，单击行号，出现蓝色图标，这意味着这行代码上有一个代码行断点。如图4所示，在global_BubbleChartWidget.js文件的49行代码处，设置了一个代码行断点。 刷新此网页，事件运行始终会在执行此行代码之前暂停，可单击右侧调试窗格的按钮进行单步调试，或者单击调试窗格的按钮继续执行事件。 图4 代码行断点示例 多终端测试 在进行页面自适应测试时，可采用Chrome开发者工具提供的模拟移动设备的功能。借助此功能，可无实物快速对网页进行多个终端测试。 单击，可启动模拟移动设备界面，设备工具栏在打开时默认处于自适应视口模式，可以将视口大小调整为所需的任何尺寸，另外还可以选择多种终端型号。 图5 模拟移动设备

自定义布局样式 如果导航页面，想实现如下图所示布局效果，即整个页面不需要有滚动条，而其中导航组件区域和全局路由视图组件区域可随滚动条滚动时，可参考如下步骤实现。 图12 自定义布局样式页面效果 在头部组件的“.css”样式文件中，指定头部组件的高度。 样例代码如下： #headerWidget { height: 90px; } 参考基于预置组件进行自定义中操作，下载预置组件路由导航(示例)，解压global_NavigatorWidget_版本号.zip。 修改解压后的“Navigator_Widget.css”文件，该文件是Widget的样式文件，在该文件中编写Widget的css样式。 样例代码如下： html[app=desktop] body { overflow: hidden; } #navigatorWidget, #global_RouterViewWidget { height: calc(100% - 90px); overflow: scroll; } 将修改后的头部组件和组件路由导航组件文件，重新打成zip包。 参考基于预置组件进行自定义中操作，上传重新打包后的组件。 在高级页面设计器左上方，单击，拖出上传的头部组件、路由导航组件和预置的路由视图组件至设计页面。 单击页面上方的，保存页面。 保存成功后，单击，发布页面。 发布成功后，单击，可查看页面效果。

前台页面常用调测方法 在高级页面的开发中，常借助浏览器内置的开发者工具对样式或功能问题进行定位和分析。下面以Chrome浏览器为例，简单介绍浏览器开发者工具中常用的调测方法。在Chrome浏览器中，按下“F12”或者“Ctrl + Shift + I”，开启开发者工具。 DOM和CSS样式调试 在Elements面板，可以自由的操作DOM和CSS，来迭代布局和设计页面。在开发者工具打开的状态下，使用左上角的箭头按钮，可点选页面元素，查看该元素DOM和CSS等。也可以在Elements页签下，修改页面上的元素的DOM标签或CSS样式（修改立即生效），实时查看修改后效果。 图1 Elements页签查看调试DOM和CSS样式 打印日志信息 在Console页签下，可使用控制台打印日志信息。在Sources页签下，调试JavaScript时常用方法是将多个console.log()语句插入代码，重新加载页面后，可以在Console页签中，查看到打印的消息。Sources页签主要包括三个部分，左侧为页面请求文件列表，中间为选择文件的文件内容，右侧为JavaScript调试窗格。 想要在JavaScript中打印日志，需要找到相应文件，查找相关代码，然后插入console.log()。 图2 Sources页签布局 调用低代码平台API 在Console页签下，可使用控制台调用低代码平台提供的API，以获取相关信息进行调试。 图3 调用低代码平台API 断点调试 在Sources页签下，可以设置断点来调试JavaScript。使用断点，DevTools会在暂停时及时显示所有变量值。Chrome开发者工具，提供了代码行断点、条件代码行断点、DOM断点和事件侦听断点等多种断点，请根据调测的实际需求选择合适的断点。断点的类型和使用场景，如表1所示。 表1 Chrome断点类型及使用场景 断点类型 使用场景 代码行 在确切的代码区域中。 条件代码行 在确切的代码区域中，且仅当其他一些条件成立时。 DOM 在更改或移除特定DOM节点或其子级的代码中。 XHR 当XHR网址包含字符串模式时。 事件 在触发点击等事件后运行的代码中。 侦听器 在引发已捕获或未捕获异常的代码行中。 异常函数 任何时候调用特定函数时。 代码行断点调试是最为常见的断点调试方法， 设置代码行断点的方法是找到请求文件，在Sources左侧请求文件列表按照目录查找，也可以借助“Ctrl+F”搜索关键词找到相关文件。在Sources中间文件内容区域，找到要设置断点的代码行，单击行号，出现蓝色图标，这意味着这行代码上有一个代码行断点。如图4所示，在global_BubbleChartWidget.js文件的49行代码处，设置了一个代码行断点。 刷新此网页，脚本运行始终会在执行此行代码之前暂停，可单击右侧调试窗格的按钮进行单步调试，或者单击调试窗格的按钮继续执行脚本。 图4 代码行断点示例 多终端测试 在进行页面自适应测试时，可采用Chrome开发者工具提供的模拟移动设备的功能。借助此功能，可无实物快速对网页进行多个终端测试。 单击，可启动模拟移动设备界面，设备工具栏在打开时默认处于自适应视口模式，可以将视口大小调整为所需的任何尺寸，另外还可以选择多种终端型号。 图5 模拟移动设备

自定义高级组件调试 针对用户本地开发的高级组件，AstroZero提供了Scaffolding脚手架工具，Scaffolding可帮助您快捷实现组件的新建、本地开发、调试、预览、发布和下载等主要功能。 Scaffolding打通了本地开发环境与AstroZero开发环境，实现本地开发组件的实时在线调测，简化了本地开发组件后频繁的打包组件资产包上传至AstroZero环境再查看页面显示效果的过程，可提升高级组件的开发效率。

如何快速创建一个高级页面 以构建包含基本柱图组件的高级页面为例，向您介绍如何快速搭建高级页面。 新建高级页面。 参考登录经典应用设计器中操作，登录经典版应用设计器。 在模块树中，将鼠标放在某个文件夹上，单击加号，选择“高级页面”。 设置标签和名称，单击“添加”。 图10 添加高级页面 在应用中首次创建高级页面时，才会显示“视图”选项。 高级页面支持在如下两种布局模式下，使用组件搭建页面（具体说明请参见高级页面布局）。 绝对布局：在绝对布局中，每个组件可在页面下任意位置进行拖拽放置，组件的宽高可自定义设置。该布局模式常用于IOC大屏页面开发场景。 流式布局：在流式布局下，拖拽到页面中的组件将根据从上到下、从左到右的顺序依次排列，组件的高度将根据组件内容大小进行自适应，宽度可按百分比进行配置。该布局常用于常规Web应用开发，例如电商网站、管理网站等等。 搭建高级页面。 在高级页面开发界面，单击，打开组件列表。 从组件列表中，拖拽基本柱图组件到画布中，按需调整组件的位置和大小。 图11 搭建高级页面 进行组件属性配置。 以修改组件的图表数据为例，向您介绍如何进行组件属性配置。 选中基本柱图组件，在组件属性设置中，单击“数据”页签。 在桥接器实例中，选择“折线图数据桥接器”，数据类型选择“静态数据”，并在静态数据中拷贝如下示例。 图12 组件数据设置 { "resCode": "0", "resMsg": "成功", "result": [{ "order": { "dataX": [ "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24" ], "dataValue": [{ "title": "入园人数", "value": [ 20, 30, 45, 20, 60, 80, 140, 200, 145, 40, 70, 60, 80, 16, 87, 77, 60, 20, 60, 80, 55, 68, 70, 24 ] }, { "title": null, "value": [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 ] }, { "title": "出园人数", "value": [ 90, 60, 30, 20, 10, 110, 140, 87, 64, 45, 11, 24, 80, 14, 98, 35, 41, 14, 45, 80, 31, 22, 23, 24 ] } ] } }] } 返回高级页面开发界面，单击页面上方的，保存页面。 如何进行高级页面的预览与发布。 页面创建完成后，可直接单击高级页面上方的，预览页面，也可以单击，发布高级页面。 图13 高级页面的发布

高级页面开发框架 在开发高级页面过程中，主要涉及组件、库、桥接器、事件和动作等相关内容。组件、库、桥接器、事件和动作之间的关系，可概述为： 组件为高级页面的元素，组件的可复用性可以大幅提高开发效率。 组件的事件-动作机制提升页面的灵活度，使得组件与组件、组件与页面之间可以交互。 库作为组件的依赖，便捷的引用机制，降低了组件开发的复杂度且丰富了组件的功能。 组件可以通过桥接器调用后台接口，获取数据。 低代码平台通过组件、库、桥接器三类资产以及“事件-动作”机制，构建了高级页面的基本框架。 图8 组件、库、桥接器关系图 组件 组件是可复用的高级页面组成元素，一个高级页面由一个或多个组件搭建而成，可以通过拖拽组件快速搭建高级页面。如果将一个高级页面看成拼图游戏的完整图案，那么组件相当于拼图的每一小块。高级页面与组件的关系，如图9所示，其中Page为高级页面，Widget为高级组件。 图9 高级页面与组件的关系 高级页面中的组件，包括如下两类： 全局高级组件 全局高级组件是低代码平台为开发者提供的常用组件，主要包含图表、媒体（图片、视频）和文本等。更多关于全局高级组件的介绍，请参见全局高级组件。 自定义组件 若全局高级组件不能满足开发需求，低代码平台支持用户自定义组件。自定义组件开发方式，主要包含以下三类： 对全局高级组件的二次开发 低代码平台支持开发者下载全局组件，并在其基础上进行二次开发（如修改组件样式、逻辑等），完成后上传为自定义组件。通过这种方式，可以大幅度降低组件开发的工作量，详情请参见开发高级组件。 通过组件模板开发 若全局高级组件中，未包含所需要的组件类型，可以基于低代码平台提供的组件模板进行自定义组件的开发。组件模板中已为您构建组件的基本架构，详情请参见开发高级组件。 将标准页面发布成高级组件 在低代码平台中，支持将开发好的标准页面导出为一个高级组件（Widget），供高级页面使用，详情请参见如何将标准页面发布成高级组件。 库 库是支撑高级组件运行的第三方依赖，若缺少相应的库，则组件不能正常运行。如果高级组件需要使用前端框架或组件库，例如流行的Vue（已预置）、Bootstrap、Element（已预置）等，需要将其制作成库资产，再上传到环境中使用。系统预置库及第三方库的引入方法，请参见如何引入第三方库。 桥接器 在进行前台页面开发时，经常要调用后台数据，例如购物车中用户的ID、订单编号、商品信息等。这时需要通过桥接器调用后台API，获取后台数据，详情请参见如何调用后台接口。 事件和动作 事件和动作都是组件的配置属性，用于实现组件之间的交互。例如，单击某个组件内的按钮，另外一个组件需要进行数据更新操作，或者是需要跳转到当前应用下的其他高级页面，这时需要通过事件和动作的机制来实现。单击按钮即是触发一个事件，数据更新操作或者页面跳转操作是一个动作，详情请参见如何实现组件交互。

初识高级页面开发界面 进入经典版应用设计器，将鼠标放在某个文件夹上，单击“+”，选择“高级页面”，即可新建一个空白高级页面或基于模板创建一个高级页面。页面创建后，自动进入高级页面开发界面，您可以阅读以下内容初步了解高级页面。 图1 高级页面开发界面 高级页面开发工作台，功能模块布局说明如下： 高级页面工具栏（序号1） 展示页面开发过程中的常用工具，如获取、释放锁，电脑端或者移动端页面设置等。 组件列表：用于展开、收起高级组件列表。 获取锁\释放锁：低代码平台提供了多人协同开发保护机制，即页面锁机制。在应用开发过程中除了新建页面，其它页面相关操作都必须先锁定页面，包括编辑页面、删除页面、下载页面、发布页面模板、复制页面、保存发布页面。同时，在进行页面设置前，必须先锁定页面设置。 多人协同操作页面，锁定规则如下： 锁定高级页面的前提：该页面未被他人锁定，且页面设置未被他人锁定。 锁定页面设置的前提：所有页面包括页面设置，未被他人锁定。 每个用户只允许锁定一个页面或页面设置。 电脑端\移动端：为了让同一页面能够更好的呈现于电脑端和移动端，低代码平台提供了高级页面的电脑端和移动端两种终端视图，用户可分别对高级页面的电脑端和移动端进行定制开发。开发完成后发布生成的高级页面为同一URL，当电脑端或移动端加载这一URL时，平台会自动检测用户所用的设备类型并加载相应视图页面。多终端适配的详细介绍，请参见如何适配多终端。 保存：保存当前开发页面的修改。 发布：发布当前开发的页面，页面发布后可以预览该页面的运行态效果。 页面修改、保存后，需再次执行发布操作，才能在应用和预览页面中体现修改内容。 预览：页面发布后，可以预览该页面运行态效果。 撤销\复原：页面开发过程中若出现误操作，可执行撤销、复原操作。 性能分析：低代码平台支持检查高级页面性能，生成性能报告页供开发者查看。 高级页面缩放比例：用于调节页面画布在开发工作台中的大小比例。 自动适应大小：自动适应页面画布在开发工作台中的大小比例。 网格线：开启画布网格线功能，用于标定组件在画布中的位置。 页面视图设置：设置高级页面的分辨率、网格大小、背景颜色和背景图片。 页面状态设置：设置页面的状态。 组件分类列表（序号2） 包含高级组件的功能分类，用于在开发高级页面时对组件进行筛选，方便组件查找与管理。组件列表分类默认包含图表、媒体、地图、文本、装饰等，可选择相应的分类来筛选高级组件。 高级组件展示、选择区域（序号2、3） 选定组件分类后，属于该功能分类的组件将显示在该区域。在该区域中，还包含了搜索框、应用场景、预置和自定义多种筛选条件。 搜索框：通过组件名称，可快速查询归属于当前选定组件分类中的高级组件。 图2 搜索框 应用场景筛选：可快速筛选不同应用场景的高级组件，当前应用场景包含通用、智慧园区、5G消息和其他等。 图3 应用场景筛选 预置和自定义筛选：用于筛选当前选定组件分类中，包括预置组件和用户自定义组件。 预置组件是低代码平台提供的全局高级组件，详情请参见全局高级组件。自定义组件为用户自主开发的高级组件，详情请参见开发高级组件。 画布 编辑页面内容及页面视图区域，可将组件从高级组件展示选择区域拖入该区域，快速搭建高级页面。此处以绝对布局方式的高级页面为例，流式布局相关操作方法请参见流式布局高级页面。 定位到所需组件后，便可以将其拖动到画布中，用于构建所需的高级页面。 图4 拖拽组件示例 在画布中，可以通过拖拽的方式调整组件的位置、大小。低代码平台还提供了组件对齐提示线，帮助布局组件。 图5 画布中调整组件示例 如上图中所示，在执行操作前请确保已获取当前页面的页面锁，未获取页面锁的状态下执行的所有操作都不能保存。当页面处于锁定状态下时，当前应用中其他页面均无法获取页面锁，若需要进行页面开发，请先释放页面锁。 组件的右键设置：在画布中选中组件，单击鼠标右键会弹出删除、复制、粘贴（若已复制组件）、格式刷、置于顶层、置于底层、高级设置选项。 删除：删除当前选中的高级组件，也可通过键盘中BackSpace键（退格键）和Delete键（删除键）实现。 复制：复制当前选中的高级组件，也可通过快捷键Ctrl+C实现。 粘贴：用于粘贴已复制的高级组件，也可通过快捷键Ctrl+V实现。 格式刷：用于复制当前选中组件的属性，应用于其他组件。可选的属性包含样式（边框、背景）、位置（距左、距上、高度、宽度）和其他属性。选定所需格式刷内容后，光标会变成刷子样式，单击所需格式刷组件即可。 图6 格式刷操作示例 置于底层/顶层：用于设置当前选中高级组件的堆叠顺序，即CSS中的z-index属性。仅绝对布局类型的高级页面，存在该设置选项。 高级设置：用于设置当前组件的样式属性，全局高级组件详细介绍，请参见全局高级组件。 组件属性设置区域 未选中画布中任何组件时，此模块显示内容为“当前视图组件列表”即当前页面中所布局的组件列表。您可以通过选择画布中或列表中的组件，切换到该组件的“组件属性设置”栏，进行当前选中组件的属性设置、数据设置、事件绑定和路由设置。 图7 组件属性设置操作示例 属性设置：组件基本属性设置，支持在自定义组件中添加自定义属性，详细介绍请参见开发高级组件。 表1 组件属性设置说明 类别 设置项 详细说明 基础 组件标题 设置该组件在“当前视图组件列表”中的组件标题。 组件名称 设置该组件在运行态时，DOM结构中widgetname属性。 位置（仅在绝对布局类型的高级页面中存在此设置） 距离左端 设置组件在画布中，距离画布左边的距离，单位为px。 距离顶端 设置组件在画布中，距离画布顶端的距离，单位为px。 宽度 设置组件宽度，单位为px。 高度 设置组件高度，单位为px。 堆叠顺序 设置组件堆叠顺序，即CSS中的z-index属性，单位为px。当存在多个组件堆叠的情况时，可通过该设置项设置堆叠顺序，设置值较大的显示在上方。 边框 全边框 设置组件全边框，包含边框样式、宽度、颜色和弧度。 角边框 设置组件角边框，包含边框宽度、长度、颜色、弧度和边距。 背景 样式 设置组件背景图片的展示模式，包含普通、居中、拉伸和平铺。 图片链接 设置背景图片。 颜色 设置组件背景颜色。 数据设置：设置组件绑定的桥接器，以实现通过桥接器调用后台接口，获取后台数据，详情请参见如何调用后台接口。 事件绑定：设置在运行态，对该组件相关操作的事件触发的具体动作，详情请参见如何实现组件交互。 路由设置：当前该功能主要用于流式布局类型高级页面中的“路由导航”组件。