华为云用户手册

前台页面常用调测方法 在高级页面的开发中，常借助浏览器内置的开发者工具对样式或功能问题进行定位和分析。下面以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 模拟移动设备

操作步骤 确认高级页面属性开关“合并并压缩资源”已关闭。 参考如何登录新版应用设计器中操作，登录新版应用设计器。 在左侧导航栏中，选择“界面”。 在设置中，单击“页面设置”，进入页面设置。 图1 进入页面设置 获取锁后，在“属性”页签，去勾选“合并并压缩资源”。 若勾选“合并并压缩资源”，会对所有高级页面涉及的css和js文件进行合并及压缩，使用单页面性能检查功能时，不要勾选该选项。 图2 关闭“合并并压缩资源”属性 设置完成后，单击，并单击，释放锁。 打开要进行性能检查的高级页面，在浏览器开发者工具中，勾选“Disable cache”属性。 在Chrome浏览器中，按下“F12”或者“Ctrl + Shift + I”，开启开发者工具。 在“Network”页签，勾选“Disable cache”属性（即禁用缓存）。 在进行页面性能检查时，如果不勾选该选项，性能检查会读取缓存中的数据，导致性能检查结果不准确。 图3 勾选“Disable cache”属性 在已发布的高级页面上方，单击“性能分析”，进入页面性能分析报告页面。 开发者工具请保持打开状态，关闭后“Disable cache”属性会自动不勾选。同时请确保高级页面已发布，若未发布，单击高级页面上方的，发布页面。 图4 查看性能分析报告 在页面性能报告中，单击各指标后的“展开”，可查看性能指标详情。 图5 查看性能指标详情

操作步骤 参考如何登录新版应用设计器中操作，登录新版应用设计器。 在左侧导航栏中，选择“界面”。 在高级页面中，单击对应的页面，进入高级页面开发界面。 在页面右上角，单击，定义全局状态。 定义全局状态使用JavaScript编程语言，不支持TypeScript。全局状态结构固定以MStore命名，每个页面仅包含一个全局状态实例，方便在组件调试的过程中，轻易的获取整个当前页面状态的快照。全局状态的结构定义由以下三部分组成： state：定义页面所有组件的初始状态数据，即页面中所有组件共享状态的初始数据源。 mutations：状态变更的唯一方法是提交mutation。mutation以声明的方式，将state变化映射到视图，每次state的变更都需要定义一个mutation。mutation使用对象风格的提交方式，整个对象都作为载荷（payload）传给mutation函数，mutation都是同步事务。 actions：通过actions执行状态数据变更，用于衔接state和mutation。Action可以包含任意异步操作，通常用于绑定状态和组件，可以调用服务。 在页面的组件js文件中，使用预置的“this.$mstore.dispatch（）”方法，修改状态数据。 系统还预置了onStateChanged(state) 方法，用于监听属性整个全局状态的变更。

使用说明 页面组件之间，可以通过配置事件和动作进行信息交互。当页面组件较多，且需要进行信息交互时，频繁的给每个组件去定义事件或动作就比较繁琐了。此时，可以通过定义全局状态，来实现页面级所有组件中数据信息的更新。 低代码平台高级页面支持设置全局状态，通过页面级内存方式共享数据，即采用集中式存储管理页面所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。简单的理解就是全局状态，可理解为页面中所有组件的共享状态，不管组件在页面的哪个位置或层级，任何组件都能获取状态或触发状态改变的动作。全局状态相当于全局变量，属性是私有的，需要在组件的js文件中，使用预置的“this.$mstore.dispatch”方法，来修改状态数据。 思考：什么情况下，应该使用全局状态？ 解惑：当页面组件构成比较简单，组件间不需要频繁的进行信息交互时，不需要设置全局状态。反之，则建议使用全局状态，通过设置并使用全局状态，可以帮助我们管理页面所有组件的共享状态。

响应式组件开发基本原则 组件的响应式设计，是高级页面适配多终端的重要前提。为确保自定义组件能够自适应不同分辨率设备，在组件开发中用户需要遵从响应式设计的基本原则。 根据内容设计。 不专注于特定屏幕宽度，而是专注于内容设计，当屏幕越小或浏览器窗口越窄时，内容所占的垂直高度越来越多，内容就要向下方自然延伸。建议从小屏幕开始，逐步设置断点（例如设备宽度320px、768px、1024px），针对不同设备进行设计，形成流动布局。 针对复杂情况，可以使用CSS3的@media查询。针对不同的终端类型和不同屏幕分辨率的设备，定义不同样式，选择应用不同的CSS规则。只有当该设定媒体查询与正在使用的设备匹配时，其对应的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的复杂度，通过补充设计的方式逐步丰富布局。这样，通过移动优先，可以更轻松地开发响应式布局。

属性 在属性中，设置仪表盘组件的位置、边框、背景等。 图2 属性 基础 组件标题：设置组件的标题。 组件名称：设置组件的名称。 位置 距离左端：组件到页面左侧的距离，单位为px。 距离顶端：组件到页面顶部的距离，单位为px。 宽度：组件的宽度，单位为px。 高度：组件的高度，单位为px。 堆叠顺序：设置组件层叠显示顺序。组件的堆叠顺序默认都是“1”，数字越大，显示越靠前。当需要让组件置底时，可设置堆叠顺序为“0”。 自适应高度：组件的高度是否随宽度改变。 边框：设置组件的边框样式，如全边框或角边框。 背景 样式：设置背景的样式，如普通、居中、拉伸等。 图片链接：背景图片URL。 颜色：设置背景的颜色。

属性 在属性中，设置翻牌器组件的位置、边框、背景等。 图2 属性 基础 组件标题：设置组件的标题。 组件名称：设置组件的名称。 位置 距离左端：组件到页面左侧的距离，单位为px。 距离顶端：组件到页面顶部的距离，单位为px。 宽度：组件的宽度，单位为px。 高度：组件的高度，单位为px。 堆叠顺序：设置组件层叠显示顺序。组件的堆叠顺序默认都是“1”，数字越大，显示越靠前。当需要让组件置底时，可设置堆叠顺序为“0”。 自适应高度：组件的高度是否随宽度改变。 边框：设置组件的边框样式，如全边框或角边框。 背景 样式：设置背景的样式，如普通、居中、拉伸等。 图片链接：背景图片URL。 颜色：设置背景的颜色。

属性 在属性中，设置雷达图组件的位置、边框、背景等。 图2 属性 基础 组件标题：设置组件的标题。 组件名称：设置组件的名称。 位置 距离左端：组件到页面左侧的距离，单位为px。 距离顶端：组件到页面顶部的距离，单位为px。 宽度：组件的宽度，单位为px。 高度：组件的高度，单位为px。 堆叠顺序：设置组件层叠显示顺序。组件的堆叠顺序默认都是“1”，数字越大，显示越靠前。当需要让组件置底时，可设置堆叠顺序为“0”。 自适应高度：组件的高度是否随宽度改变。 边框：设置组件的边框样式，如全边框或角边框。 背景 样式：设置背景的样式，如普通、居中、拉伸等。 图片链接：背景图片URL。 颜色：设置背景的颜色。

属性 在属性中，设置散点图组件的位置、边框、背景等。 图2 属性 基础 组件标题：设置组件的标题。 组件名称：设置组件的名称。 位置 距离左端：组件到页面左侧的距离，单位为px。 距离顶端：组件到页面顶部的距离，单位为px。 宽度：组件的宽度，单位为px。 高度：组件的高度，单位为px。 堆叠顺序：设置组件层叠显示顺序。组件的堆叠顺序默认都是“1”，数字越大，显示越靠前。当需要让组件置底时，可设置堆叠顺序为“0”。 自适应高度：组件的高度是否随宽度改变。 边框：设置组件的边框样式，如全边框或角边框。 背景 样式：设置背景的样式，如普通、居中、拉伸等。 图片链接：背景图片URL。 颜色：设置背景的颜色。

属性 在属性中，设置基本饼图组件的位置、边框、背景等。 图2 属性 基础 组件标题：设置组件的标题。 组件名称：设置组件的名称。 位置 距离左端：组件到页面左侧的距离，单位为px。 距离顶端：组件到页面顶部的距离，单位为px。 宽度：组件的宽度，单位为px。 高度：组件的高度，单位为px。 堆叠顺序：设置组件层叠显示顺序。组件的堆叠顺序默认都是“1”，数字越大，显示越靠前。当需要让组件置底时，可设置堆叠顺序为“0”。 自适应高度：组件的高度是否随宽度改变。 边框：设置组件的边框样式，如全边框或角边框。 背景 样式：设置背景的样式，如普通、居中、拉伸等。 图片链接：背景图片URL。 颜色：设置背景的颜色。

如何设置数据系列 选中水位图组件，单击鼠标右键选择“高级设置”。 展开数据系列配置，单击旁边的“+”，添加数据系列。 在右侧“数据”页签，配置该数据系列的数据。 例如，在使用系统预置的静态数据基础上，添加如下加粗代码，配置新增数据系列的数据。也可以使用“动态数据”调用后台接口URL返回如下结构模型数据。 图4 新增数据系列 {"resCode": "0","resMsg": "成功","result": [{"dataValue": [{"name": "报警处理率","value": [{"value": 0.65,"name": ""}]},{"name": "命中率","value": [{"value": 0.15,"name": ""}]}]}]} 配置添加的数据系列图表位置、图表形状等。 设置完成后，单击“确定”。

属性 在属性中，设置基本饼图组件的位置、边框、背景等。 图2 属性 基础 组件标题：设置组件的标题。 组件名称：设置组件的名称。 位置 距离左端：组件到页面左侧的距离，单位为px。 距离顶端：组件到页面顶部的距离，单位为px。 宽度：组件的宽度，单位为px。 高度：组件的高度，单位为px。 堆叠顺序：设置组件层叠显示顺序。组件的堆叠顺序默认都是“1”，数字越大，显示越靠前。当需要让组件置底时，可设置堆叠顺序为“0”。 自适应高度：组件的高度是否随宽度改变。 边框：设置组件的边框样式，如全边框或角边框。 背景 样式：设置背景的样式，如普通、居中、拉伸等。 图片链接：背景图片URL。 颜色：设置背景的颜色。

如何设置数据系列 选中基本饼图组件，单击鼠标右键选择“高级设置”。 展开数据系列配置，单击旁边的“+”，添加数据系列。 在右侧“数据”页签，配置该数据系列的数据。 例如，在使用系统预置的静态数据基础上，添加如下加粗标红字体代码，配置新增数据系列的数据。也可以使用“动态数据”调用后台接口URL返回如下结构模型数据。 图6 两个数据系列不用圆心坐标设置 {"resCode": "0","resMsg": "成功","result": [{"dataValue": [{"name": "关键事件","value": [{"value": 635,"name": "工程管理"},{"value": 310,"name": "社会环境"}]},{"name": "类别","value": [{"value": 435,"name": "计算机"},{"value": 210,"name": "文学"}]}]}]} 配置添加的数据系列圆心坐标，如果不配置，两个数据系列会重叠。 设置完成后，单击“确定”。

自定义布局样式 如果导航页面，想实现如下图所示布局效果，即整个页面不需要有滚动条，而其中导航组件区域和全局路由视图组件区域可随滚动条滚动时，可参考如下步骤实现。 图13 自定义布局样式页面效果 在头部组件的“.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包。 参考基于预置组件进行自定义中操作，上传重新打包后的组件。 在高级页面设计器左上方，单击，拖出上传的头部组件、路由导航组件和预置的路由视图组件至设计页面。 单击页面上方的，保存页面。 保存成功后，单击，发布页面。 发布成功后，单击，可查看页面效果。

属性 在属性中，设置基本折线图组件的位置、边框、背景等。 图2 属性 基础 组件标题：设置组件的标题。 组件名称：设置组件的名称。 位置 距离左端：组件到页面左侧的距离，单位为px。 距离顶端：组件到页面顶部的距离，单位为px。 宽度：组件的宽度，单位为px。 高度：组件的高度，单位为px。 堆叠顺序：设置组件层叠显示顺序。组件的堆叠顺序默认都是“1”，数字越大，显示越靠前。当需要让组件置底时，可设置堆叠顺序为“0”。 自适应高度：组件的高度是否随宽度改变。 边框：设置组件的边框样式，如全边框或角边框。 背景 样式：设置背景的样式，如普通、居中、拉伸等。 图片链接：背景图片URL。 颜色：设置背景的颜色。

高级设置 在高级设置中，可设置图片填充类型。 图3 高级设置 图4 图片设置页面 图5 上传图片/视频 单击“选择图片”，在页面单击目录后的和，可管理图片目录。单击“上传图片/视频”，可进行上传操作。 选择“填充”表示图片不保证保持原有比例，图片拉伸填满整个容器。 选择“包含”表示图片保持原有尺寸比例，可能会在容器内留有空白。 选择“覆盖”表示图片表示原有尺寸比例，宽高至少有一个和容器一致，可能会让图片部分区域不可见。 选择“无”表示图片保持原有尺寸比例，同时保持图片原始尺寸大小。

高级设置 在高级设置中，选择设置的文本内容，在出现的配置弹窗中，可进行是否加粗、是否倾斜、字号、字体、文本颜色、背景颜色、对齐方式等配置。 图3 编辑器中文本配置 另外，若需要在文本中设置变量，变量值来自文本桥接器“TextConnector”中的配置，若配置为静态数据，变量值取自“outDatas”中配置的数据。 可变参数下标请从0开始，变量样式为“{0}”，预览页面后效果为“变量值”。带转义符“\”的变参不会被替换，例如文本组件内容为“\{1}{1\}{\1}”，预览页面后效果为“{1}{1}{1}”。连续两个转义符时，则第二个转义符失效，变参会被替换，例如文本组件内容为“\\{2}”，预览页面后效果为“\变量值”。 图4 文本中变量配置 图5 预览页面效果

属性 在属性中，设置自定义背景框组件的位置、边框、背景等。 图2 属性 基础 组件标题：设置组件的标题。 组件名称：设置组件的名称。 位置 距离左端：组件到页面左侧的距离，单位为px。 距离顶端：组件到页面顶部的距离，单位为px。 宽度：组件的宽度，单位为px。 高度：组件的高度，单位为px。 堆叠顺序：设置组件层叠显示顺序。组件的堆叠顺序默认都是“1”，数字越大，显示越靠前。当需要让组件置底时，可设置堆叠顺序为“0”。 自适应高度：组件的高度是否随宽度改变。 边框：设置组件的边框样式，如全边框或角边框。 背景 样式：设置背景的样式，如普通、居中、拉伸等。 图片链接：背景图片URL。 颜色：设置背景的颜色。

属性 在属性中，设置图片组件的位置、边框、连接器等。 图2 属性 基础 组件标题：设置组件的标题。 组件名称：设置组件的名称。 位置 距离左端：组件到页面左侧的距离，单位为px。 距离顶端：组件到页面顶部的距离，单位为px。 宽度：组件的宽度，单位为px。 高度：组件的高度，单位为px。 堆叠顺序：设置组件层叠显示顺序。组件的堆叠顺序默认都是“1”，数字越大，显示越靠前。当需要让组件置底时，可设置堆叠顺序为“0”。 自适应高度：组件的高度是否随宽度改变。 边框：设置组件的边框样式，如全边框或角边框。 背景 样式：设置背景的样式，如普通、居中、拉伸等。 图片链接：背景图片URL。 颜色：设置背景的颜色。 自定义属性列表：显示组件的自定义属性。 图片地址：直接输入图片地址，来展示图片。 连接器设置 使用连接器：是否使用连接器。 选择连接器类型：选择有存储功能的，支持OBS、MINIO和对象存储代理。 选择连接器：选择具体的连接器实例。 选择桶：连接器的存储桶。 使用相对地址：使用图片的相对路径。

绝对布局高级页面 创建绝对布局类型的高级页面。 参考如何登录新版应用设计器中操作，登录新版应用设计器。 在左侧导航栏中，选择“界面”，单击高级页面后的，进入添加高级页面。 设置高级页面标签和名称，布局类型选择“绝对布局”，单击“添加”。 图1 新建绝对布局类型高级页面 开发绝对布局类型的高级页面。 以开发如下所示高级页面为例，向您介绍绝对布局类型高级页面中组件的布局方法。 图2 绝对布局类型高级页面组件布局示例 如上图所示，示例页面中包含文本编辑、基本柱图和多区域折线图三个组件。 在高级页面右上方，单击，设置背景图片。 图3 设置页面背景色示例 查找并拖入该页面中包含的组件，通过拖拽进行初步位置、大小调整。 图4 拖拽所需的组件到画布中 设置文本编辑组件内容为“绝对布局类型高级页面”，字号为“大号”。 图5 设置文本编辑组件内容 通过组件属性，精确设置组件大小。 本例中，设置组件宽度为600px、高度为350px。 图6 精确设置组件大小 复制组件。 将上图左侧组件逐个复制，并将其拖拽到右侧，通过对齐提示线将其与左侧组件对齐。 图7 复制组件 单击页面上方的，保存页面。 单击，预览高级页面，查看当前页面在运行态的效果。 图8 预览高级页面

流式布局高级页面 在流式布局中，拖拽到页面中的组件，将根据从上到下、从左到右的顺序依次排列，组件的高度将根据组件内容大小进行自适应，宽度可按百分比进行配置。 创建流式布局类型高级页面。 参考如何登录新版应用设计器中操作，登录新版应用设计器。 在左侧导航栏中，选择“界面”，单击高级页面后的，进入添加高级页面。 设置高级页面标签和名称，布局类型选择“流式布局”，单击“添加”。 图9 新建流式布局类型高级页面示例 绝对布局类型高级页面与流式布局类型高级页面不同之处。 在流式布局类型高级页面中，不可拖拽组件位置和大小，同样在“组件属性设置”栏中，也没有位置相关的设置选项。因为流式布局下组件将按照从上到下、从左到右的顺序依次排列。 流式布局类型高级页面的画布划分为12列，新拖入的组件默认宽度为100%，即占据12列。 也可以通过拖拽组件最右侧边框，调节其所占列数。 图10 流式布局中调整组件宽度示例 当原上下排布的多个组件所占列数之和小于12时，会自动调整到同一行。如下图所示，三个组件的所占列数分别调整为4，则本例中三个组件将会按照从左到右的顺序依次排布。 图11 组件所占列数之和小于12 通过拖拽的方式，调整组件上下、左右的排布次序。 图12 调整组件上下、左右的排布次序示例 流式布局类型高级页面，在高级页面工具栏中新增悬浮模式，开启此模式后拖入的组件不再按照从上到下、从左到右的顺序依次排列，可以设置其相对位置。 图13 悬浮模式示例 上图中标注说明如下： 标注1：在高级页面工具栏中，开启悬浮模式。 标注2：拖入新组件。 标注3：悬浮模式下，组件相对位置设置选项。 相对定位 Screen：该组件基于当前视图的相对位置。 Layout：该组件基于当前布局的相对位置。 Widget：该组件基于其他组件的相对位置。 组件位置：设置相对定位的具体方位。 显示顺序：当组件出现堆叠时，可以设置组件的显示顺序，设置值越大，显示越靠前。 最大高度：设置该组件的最大高度，单位为px或%。 宽度：设置该组件的宽度，单位为px或%。

事件 在事件中，显示了组件暴露出来的一些常用事件，供用户实现，来扩展组件的交互。整个页面有加载（on-load）事件，该事件在页面渲染完成后执行，可进行数据初始化操作。 表1 事件编排 事件名 说明 返回值 数据改变 已上传文件列表改变时触发。 当前已上传文件列表。 文件上传 开始上传文件时触发。 当前开始上传的文件。 当前已上传文件列表。 操作成功 上传成功后触发。 上传成功文件的地址。 选中文件 文件列表选中时或取消选中时触发。 当前文件。 已选中的文件。 文件上传前 文件上传前触发。 在“文件上传前”事件后，单击齿轮图标，在“自定义JS代码”中增加“$current.showUploadList = false”语句，可取消上传预览。 当前文件。 文件名。

使用说明 低代码平台预置了很多默认样式，供您选择使用，同时也支持对标准页面的主题样式进行自定义修改。 自定义主题时，可以自定义修改标准页面的样式。设置完成并启用主题后，该应用中标准页面相同组件的展示，将以主题中配置为准。 例如，在标准页面中添加一个“表单”组件，并绑定数据对象为“Alarm”，选择前三个字段，添加“保存”和“重置”按钮，单击“完成”。单击“保存”按钮，再单击“预览”按钮，效果如图1启用前效果图所示。在主题中配置该输入框的背景色为红色，启用主题使得标准页面表单中输入框的背景色为红色，效果如图2启用后效果图所示。 图1 启用前效果图 图2 启用后效果图

属性 数据绑定：通过建立不同类型的视图模型，将各种数据源和组件的返回值或者属性值进行关联，实现动态数据效果。 值绑定：设置组件绑定的数据模型，数据模型一般有以下几种。更多介绍，请参见值绑定。 自定义：由用户自定义的前端模型，可以在模型树上快速创建自定义字段。 对象：由后台对象模型映射创建，支持选择字段。 服务：由后台服务的出入参数模型创建，分别生成inputParam和outputParam节点。 事件：由后台事件的字段映射创建，并且支持websocket刷新模型数据。 属性值绑定，用于对该组件所有属性的动态设置。当某一属性被动态绑定时，以绑定值为准。更多介绍，请参见属性绑定。 基本属性：基本属性通过数据绑定后，在运行时以数据绑定的值为准。 默认分页大小：设置默认每页条数（分页大小）。 每页条数切换的配置：每页条数切换的配置，如[10,20,40,100]。 大小：分页显示大小，可选值为small（迷你版）或不填（默认）。 简洁版：是否简洁版显示分页样式。 AUI风格：是否展示AUI风格。 显示跳转：是否显示跳转，显示后可设置快速跳转到某一页。 显示分页：是否显示分页，显示后可设置具体的分页大小。 公共 控件名称：当前组件的名称。 隐藏：是否隐藏该组件，此方式为静态配置该组件的隐藏。还可以将该组件属性值“隐藏”配置为布尔类型模型字段，在自定义JS代码中来控制模型字段取值，从而设置该组件是否隐藏，这种动态设置优先级是最高的。 样式 布局：设置组件的宽度、高度等。 字体：设置字体大小、字体样式、颜色等。 背景：设置背景颜色、透明度。 边框：设置边框颜色、宽度等，单位为px。 阴影：设置阴影颜色、模糊、扩散等，单位为px。 高级设置 样式源码：组件具体样式代码，组件样式设置后，样式代码将自动显示在“样式源码”中，也可以自定义样式代码，对组件进行详细配置，自定义代码支持多行输入，并高亮显示样式参数。 样式类：当前组件使用的CSS样式类名，可在CSS代码中进行引用。

绑定数据模型 设置组件绑定的数据模型，有自定义对象、对象、服务和事件四种。 向页面中拖入一个表格（新）组件，单击“表格”页签，在表格属性“数据绑定”中单击，绑定数据模型。 图3 数据绑定 在弹出页面中，单击“新增模型”。 设置表格的数据模型，添加对象模型，模型名称“equipmentInstance”，单击“下一步”。 图4 创建数据模型 “选择对象”选择一个提前创建好的对象，例如“HW__Equipment__CST”，“选择字段”中选择表单中需要展示的字段，单击“下一步”。 图5 选择展示字段 在方法页面，单击“确定”，返回选择模型页面。 勾选刚建好的数据模型，单击“确定”。 绑定对象模型后，显示如图6所示。系统默认添加了斑马纹，如果不需要，可在表格属性的“基本设置”中关闭“斑马纹”。 图6 绑定数据模型后的结果列

属性 数据绑定：通过建立不同类型的视图模型，将各种数据源和组件的返回值或者属性值进行关联，实现动态数据效果。 值绑定：设置组件绑定的数据模型，数据模型一般有以下几种。更多介绍，请参见值绑定。 自定义：由用户自定义的前端模型，可以在模型树上快速创建自定义字段。 对象：由后台对象模型映射创建，支持选择字段。 服务：由后台服务的出入参数模型创建，分别生成inputParam和outputParam节点。 事件：由后台事件的字段映射创建，并且支持websocket刷新模型数据。 属性值绑定，用于对该组件所有属性的动态设置。当某一属性被动态绑定时，以绑定值为准。更多介绍，请参见属性绑定。

属性 数据绑定：通过建立不同类型的视图模型，将各种数据源和组件的返回值或者属性值进行关联，实现动态数据效果。 值绑定：设置组件绑定的数据模型，数据模型一般有以下几种。更多介绍，请参见值绑定。 自定义：由用户自定义的前端模型，可以在模型树上快速创建自定义字段。 对象：由后台对象模型映射创建，支持选择字段。 服务：由后台服务的出入参数模型创建，分别生成inputParam和outputParam节点。 事件：由后台事件的字段映射创建，并且支持websocket刷新模型数据。 属性值绑定，用于对该组件所有属性的动态设置。当某一属性被动态绑定时，以绑定值为准。更多介绍，请参见属性绑定。 基本属性：基本属性通过数据绑定后，在运行时以数据绑定的值为准。 无数据显示：无数据时，显示的名称。 列数(PC)：设置PC端显示列数。 列数(Mobile)：设置移动端显示列数。 列数排列方式：选择列数排列方式，如居中、左对齐和右对齐等。 显示加载中：当要展示的内容较多时，用户看到页面内容可能需要稍长时间，开启加载中效果，体验会更好。 移动端配置：列表视图在移动端的设置。 下拉刷新：下拉是否刷新列表。 默认数据条数：设置移动端列表视图，默认展示数据的数量。 显示加载文字：是否显示上拉加载文字。 异步加载：和事件（on-load-data）配合使用，上拉加载时，异步获取数据。 公共 控件名称：当前组件的名称。 隐藏：是否隐藏该组件。 样式 布局：设置组件的宽度、高度等。 字体：设置字体大小、字体样式、颜色等。 背景：设置背景颜色、透明度。 边框：设置边框颜色、宽度等，单位为px。 阴影：设置阴影颜色、模糊、扩散等，单位为px。 高级设置 样式源码：组件具体样式代码，组件样式设置后，样式代码将自动显示在“样式源码”中。也可以自定义样式代码，对组件进行详细配置。自定义代码支持多行输入，并高亮显示样式参数。 样式类：当前组件使用的CSS样式类名，可在CSS代码中进行引用。

属性值绑定 在列表视图的“属性”页签，单击“数据绑定”中的，绑定数据模型。 模型实例化必须为数组，详情请参见绑定数据模型、增加查询条件、工具栏。 图3 绑定数据模型 向列表视图中拖入栅格容器，将栅格容器设置为6行2列，再向前5行中拖入标签组件，并设置标签属性。 属性值绑定。 选择第一行、第二列中的标签，单击右侧“属性值绑定”的“+”，新增属性值绑定。 其中，“属性”设置为“文本内容”，再单击，添加模型字段，将模型字段绑定到当前标签上。 重复上一步，为其他行的标签组件进行属性值绑定。 在第6行拖入一个按钮，设置为“Handle”。 在页面上方，单击，保存页面。 保存成功后，单击，进入预览页面，预期效果如图4。 进行属性值绑定的标签组件，显示绑定的模型字段内容。 图4 通过属性值绑定获取模型中的数据

属性 数据绑定：通过建立不同类型的视图模型，将各种数据源和组件的返回值或者属性值进行关联，实现动态数据效果。 值绑定：设置组件绑定的数据模型，数据模型一般有以下几种。更多介绍，请参见值绑定。 自定义：由用户自定义的前端模型，可以在模型树上快速创建自定义字段。 对象：由后台对象模型映射创建，支持选择字段。 服务：由后台服务的出入参数模型创建，分别生成inputParam和outputParam节点。 事件：由后台事件的字段映射创建，并且支持websocket刷新模型数据。 属性值绑定，用于对该组件所有属性的动态设置。当某一属性被动态绑定时，以绑定值为准。更多介绍，请参见属性绑定。 基本属性：基本属性通过数据绑定后，在运行时以数据绑定的值为准。 配置菜单：单击“设置”，可设置菜单。 图标：配置菜单的图标。 文本内容：配置菜单的显示名称。 RUL类型：菜单跳转页面的URL类型，如“常量”、“选择页面”。 地址：当“URL类型”为“常量”时，需要配置跳转页面的具体URL地址。当“URL类型”为“选择页面”时，需要选择系统中创建的具体跳转页面。 链接目标：跳转后页面显示形式。 新窗口：在新窗口页，显示跳转页面。 当前框架：在当前框架，显示跳转页面。 父框架：在父框架区域，显示跳转页面。 整个窗口：在当前整个窗口，显示跳转页面。 分隔符：菜单名之间的分隔符。 跳转：单击面包屑组件的菜单标签，是否开启自动跳转，默认为开启。若不开启跳转，可在“事件”页签定义跳转的实现方法，即进行事件编排。 公共 控件名称：当前组件的名称。 隐藏：是否隐藏该组件，此方式为静态配置该组件的隐藏。还可以将该组件属性值“隐藏”配置为布尔类型模型字段，在自定义JS代码中来控制模型字段取值，从而设置该组件是否隐藏，这种动态设置优先级是最高的。 样式 布局：设置组件的宽度、高度等。 字体：设置字体大小、字体样式、颜色等。 背景：设置背景颜色、透明度。 边框：设置边框颜色、宽度等，单位为px。 阴影：设置阴影颜色、模糊、扩散等，单位为px。 高级设置 样式源码：组件具体样式代码，组件样式设置后，样式代码将自动显示在“样式源码”中，也可以自定义样式代码，对组件进行详细配置，自定义代码支持多行输入，并高亮显示样式参数。 样式类：当前组件使用的CSS样式类名，可在CSS代码中进行引用。

属性 数据绑定：通过建立不同类型的视图模型，将各种数据源和组件的返回值或者属性值进行关联，实现动态数据效果。 值绑定：设置组件绑定的数据模型，数据模型一般有以下几种。更多介绍，请参见值绑定。 自定义：由用户自定义的前端模型，可以在模型树上快速创建自定义字段。 对象：由后台对象模型映射创建，支持选择字段。 服务：由后台服务的出入参数模型创建，分别生成inputParam和outputParam节点。 事件：由后台事件的字段映射创建，并且支持websocket刷新模型数据。 属性值绑定，用于对该组件所有属性的动态设置。当某一属性被动态绑定时，以绑定值为准。更多介绍，请参见属性绑定。