CN113010162B - 一种页面构建方法、装置及设备 - Google Patents

Abstract

本说明书涉及前端开发技术领域，具体公开了一种页面构建方法、装置及设备，所述方法包括接收用户对页面配置界面中的页面控件的操作信息；页面配置界面至少包括一个页面控件，页面控件用于可视化的表征页面展示元素的信息；将所述操作信息所对应的页面控件作为当前页面控件，提取所述当前页面控件基于所述操作信息所确定的控件信息；所述控件信息包括页面控件在指定方向上的长度以及页面控件的指定点相对页面配置界面的位置信息；利用所述当前页面控件的控件信息对所述页面配置界面的已有页面控件布局信息进行更新，以根据更新后的页面控件布局信息生成用于页面展示的页面展示数据。利用本说明书各个实施例，可提高页面构建的便捷性及灵活性。

Description

一种页面构建方法、装置及设备

技术领域

本说明书涉及前端开发技术领域，特别地，涉及一种页面构建方法、装置及设备。

背景技术

金融机构的业务系统数量众多，各业务系统均涉及大量的前端设计及开发工作，而各页面系统的前端页面展现存在较多相似组件及布局，可以通过可视化布局的方式构建前端页面，以降低前端页面的开发工作量，提高开发效率。

为了保证页面构建的简便性以及页面代码生成的准确性，通常的可视化布局工具主要采用两种实现方式，第一种是预先对页面进行栅栏式布局，然后，再在该栅栏式布局的基础上进行控件的添加；第二种是先构建页面模板，用户再在页面模板的基础上根据需要对控件进行调整。但上述页面布局方式在一定程度上限定了控件的位置，不够灵活。因此，目前亟需一种在保证页面构建的简便性以及页面代码生成的准确性的基础上，更加灵活的页面构建方式。

发明内容

本说明书实施例的目的在于提供一种页面构建方法、装置及设备，可以进一步提高页面构建的便捷性及灵活性。

本说明书提供一种页面构建方法、装置及设备是包括如下方式实现的：

一种页面构建方法，所述方法包括：

接收用户对页面配置界面中的页面控件的操作信息；所述页面配置界面至少包括一个页面控件，所述页面控件用于可视化的表征页面展示元素的信息；

将所述操作信息所对应的页面控件作为当前页面控件，提取所述当前页面控件基于所述操作信息所确定的控件信息；其中，所述控件信息包括页面控件在指定方向上的长度以及页面控件的指定点相对页面配置界面的位置信息；

利用所述当前页面控件的控件信息对所述页面配置界面的已有页面控件布局信息进行更新，以根据更新后的页面控件布局信息生成用于页面展示的页面展示数据。

本说明书提供的所述方法的另一个实施例中，所述已有页面控件布局信息包括已布设的各页面控件的控件信息；更新所述已有页面控件布局信息，包括：在基于当前页面控件的控件信息与已布设的各页面控件的控件信息的比对结果确定当前页面控件与已布设的各页面控件存在重叠的情况下，提取当前页面控件相对所述页面配置界面的相对布设信息；利用所述当前页面控件相对所述页面配置界面的相对布设信息更新所述已有页面控件布局信息。

本说明书提供的所述方法的另一个实施例中，所述更新所述已有页面控件布局信息，包括：在基于当前页面控件的控件信息与已布设的各页面控件的控件信息的比对结果确定当前页面控件与已布设的各页面控件不存在重叠的情况下，若当前页面控件为页面配置界面的第一个布设的页面控件，则基于页面配置界面内预先设定的基准线，配置当前页面控件的行信息；其中，所述行信息包括行标识和行高度；所述行高度为包含当前页面控件的行与基准线之间的距离。

本说明书提供的所述方法的另一个实施例中，若当前页面控件不是页面配置界面的第一个布设的页面控件，则提取在所述指定方向上与当前页面控件的位置信息存在重合的已布设的页面控件，作为相交页面控件；利用所述当前页面控件与所述相交页面控件所在的行的位置关系，更新所述已有页面控件布局信息。

本说明书提供的所述方法的另一个实施例中，假设沿所述指定方向为向下，逆所述指定方向为向上；在上述假设下，以页面配置界面的下边界作为基准线。

本说明书提供的所述方法的另一个实施例中，在提取到相交页面控件、且相交页面控件的上边界位于当前页面控件的上边界的上方的情况下，所述更新所述已有页面控件布局信息，包括：设置所述当前页面控件的行标识为相交页面控件的行标识；设置所述行标识所对应的指定行的上边界与所述当前页面控件的上边界之间的距离为所述当前页面控件的相对布局属性值。

本说明书提供的所述方法的另一个实施例中，在提取到相交页面控件、且相交页面控件的上边界位于当前页面控件的上边界的下方的情况下，所述更新所述已有页面控件布局信息，包括：设置所述当前页面控件的行标识为相交页面控件的行标识；计算指定行的上边界与所述当前页面控件的上边界之间的距离，作为指定距离；更新所述指定行的行高度为所述指定行的更新前的行高度与所述指定距离的加和；设置所述更新后的指定行内各页面控件的上边界与更新后的指定行的上边界之间的距离，为所述更新后的指定行内各页面控件的相对布局属性值。

本说明书提供的所述方法的另一个实施例中，所述更新所述已有页面控件布局信息，包括：获取页面控件的上边界位于当前页面控件的上边界的上方的页面控件，作为第一目标页面控件；计算各第一目标页面控件的下边界与当前页面控件的上边界之间的距离最小值，作为第一控件距离；提取与当前页面控件的第一控件距离最小的第一目标页面控件，作为第一指定页面控件；更新第一指定页面控件所在行的行高度为第一指定页面控件所在行更新前的行高度与所述指定距离的差值。

本说明书提供的所述方法的另一个实施例中，在提取到相交页面控件，且既存在相交页面控件的上边界位于当前页面控件的上边界的上方，也存在相交页面控件的上边界位于当前页面控件的上边界的下方的情况下，所述更新所述已有页面控件布局信息，包括：获取各相交页面控件所在行的行标识；在获取的各行标识重合的情况下，设置所述当前页面控件的行标识为相交页面控件的行标识；设置所述行标识所对应的指定行的上边界与所述当前页面控件的上边界之间的距离为所述当前页面控件的相对布局属性值。

本说明书提供的所述方法的另一个实施例中，所述更新所述已有页面控件布局信息，包括：在获取的各行标识不重合的情况下，将各行标识所对应的指定行进行合并，作为更新后的指定行；配置所述更新后的指定行的行标识，将新配置的行标识作为更新后的指定行内各页面控件的行标识；设置所述更新后的指定行的行高度为不重合的各行标识所对应的行高度的加和；设置所述更新后的指定行的上边界与所述更新后的指定行内各页面控件的上边界之间的距离，为所述更新后的指定行内各页面控件的相对布局属性值。

本说明书提供的所述方法的另一个实施例中，在未提取到相交页面控件的情况下，所述更新所述已有页面控件布局信息，包括：获取页面控件的上边界位于当前页面控件的上边界的上方的页面控件，作为第一目标页面控件；计算各第一目标页面控件的下边界与当前页面控件的上边界之间的距离最小值，作为第一控件距离；提取与当前页面控件的第一控件距离最小的第一目标页面控件，作为第一指定页面控件；获取页面控件的上边界位于当前页面控件的上边界的下方的页面控件，作为第二目标页面控件；计算各第二目标页面控件的上边界与当前页面控件的下边界之间的距离最小值，作为第二控件距离；提取与当前页面控件的第二控件距离最小的第二目标页面控件，作为第二指定页面控件；为所述当前页面控件新增一行，配置新增行的行标识、以及配置新增行的行高度为所述当前页面控件的上边界与所述第二指定页面控件的上边界之间的距离；更新第一指定页面控件所在行的行高度为第一指定页面控件所在行更新前的行高度与新增行的行高度的差值。

另一方面，本说明书实施例还提供一种页面构建装置，所述装置包括：操作信息接收模块，用于接收用户对页面配置界面中的页面控件的操作信息；所述页面配置界面至少包括一个页面控件，所述页面控件用于可视化的表征页面展示元素的信息；控件信息提取模块，用于将所述操作信息所对应的页面控件作为当前页面控件，提取所述当前页面控件基于所述操作信息所确定的控件信息；其中，所述控件信息包括页面控件在指定方向上的长度以及页面控件的指定点相对页面配置界面的位置信息；布局信息更新模块，用于利用所述当前页面控件的控件信息对所述页面配置界面的已有页面控件布局信息进行更新，以根据更新后的页面控件布局信息生成用于页面展示的页面展示数据。

另一方面，本说明书实施例还提供一种页面构建设备，所述设备包括至少一个处理器及用于存储处理器可执行指令的存储器，所述指令被所述处理器执行时实现上述任意一个或者多个实施例所述方法的步骤。

本说明书一个或多个实施例提供的页面构建方法、装置及设备，通过预先搭建可视化的页面构建应用，便于用户基于其所展示的页面配置界面简单有效的进行页面展示界面的构建，实现了所见即所得的页面设计开发功能。同时，还可以简单准确的实现页面控件相对布局自适应，高效准确的生成与页面设计效果一致代码。且无需限定控件位置，提高了页面设计及代码生成的效率，并提高了代码可复用性，便于页面展示界面更新以及代码二次开发。

附图说明

为了更清楚地说明本说明书实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本说明书中记载的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。在附图中：

图1为本说明书提供的一种页面构建方法实施例的流程示意图；

图2为本说明书提供的一个实施例中的页面构建应用的展示界面示意图；

图3为本说明书提供的一个实施例中的页面控件布局信息更新流程示意图；

图4为本说明书提供的一种在纵向上存在相交页面控件的控件布局示意图；

图5为本说明书提供的另一种在纵向上存在相交页面控件的控件布局示意图；

图6为本说明书提供的另一种在纵向上存在相交页面控件的控件布局示意图；

图7为本说明书提供的一种在纵向上不存在相交页面控件的控件布局示意图；

图8为本说明书提供的一种在横向上存在相交页面控件的控件布局示意图；

图9为本说明书提供的另一种在横向上存在相交页面控件的控件布局示意图；

图10为本说明书提供的另一种在横向上存在相交页面控件的控件布局示意图；

图11为本说明书提供的一种在横向上不存在相交页面控件的控件布局示意图；

图12为本说明书提供的一个实施例中的页面构建流程示意图；

图13为本说明书提供的另一种页面构建装置的模块结构示意图。

具体实施方式

为了使本技术领域的人员更好地理解本说明书中的技术方案，下面将结合本说明书一个或多个实施例中的附图，对本说明书一个或多个实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅是说明书一部分实施例，而不是全部的实施例。基于说明书一个或多个实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本说明书实施例方案保护的范围。

本说明书的一个应用场景示例中，所述页面构建方法可以应用于页面构建设备。所述设备可以为终端，也可以为终端与服务器所构建的系统。所述服务器可以为单个服务器，也可以为多个服务器组成的服务器集群。所述终端如可以包括台式计算机、笔记本、IPAD等智能终端。所述终端中可以配有基于可视化框架构建的页面构建应用。所述页面构建应用可以为独立的实现页面展示界面构建的客户端应用程序，也可以为集成在其他应用下的子应用程序。当然，所述终端还可以与所述服务器进行交互，将部分数据处理发送至服务器进行处理，并接收服务器反馈的处理结果，以基于服务器反馈的结果进行页面展示界面的构建。

本说明书各个实施例，通过预先搭建可视化的页面构建应用，便于用户基于其所展示的页面配置界面简单有效的进行页面展示界面的构建，实现了所见即所得的设计开发功能，同时，还可以简单准确的实现页面控件相对布局自适应，高效准确的生成与页面设计效果一致代码。且无需限定控件位置，提高了页面设计及代码生成的效率，并提高了代码可复用性，便于页面展示界面更新以及代码二次开发。

图1是本说明书提供的所述页面构建方法实施例流程示意图。虽然本说明书提供了如下述实施例或附图所示的方法操作步骤或装置结构，但基于常规或者无需创造性的劳动在所述方法或装置中可以包括更多或者部分合并后更少的操作步骤或模块单元。在逻辑性上不存在必要因果关系的步骤或结构中，这些步骤的执行顺序或装置的模块结构不限于本说明书实施例或附图所示的执行顺序或模块结构。所述的方法或模块结构的在实际中的装置、服务器或终端产品应用时，可以按照实施例或者附图所示的方法或模块结构进行顺序执行或者并行执行(例如并行处理器或者多线程处理的环境、甚至包括分布式处理、服务器集群的实施环境)。具体的一个实施例如图1所示，本说明书提供的页面构建方法的一个实施例中，所述方法可以应用于流程构建设备。所述方法可以包括如下步骤：

S20：接收用户对页面配置界面中的页面控件的操作信息；所述页面配置界面至少包括一个页面控件，所述页面控件用于可视化的表征页面展示元素的信息。

终端中可以预先布设有页面构建应用。所述页面构建应用中可以集成有至少一个页面控件。所述页面控件可以为用于可视化的表征页面展示元素的UI组件。所述UI组件中封装有实现各元素信息可视化的程序代码。所述页面展示元素可以为实现页面灵活展示的信息，可以根据实际需求自行配置。相应的，所述页面控件如可以为文本框、按钮、单选框、复选框、下拉框、列表等。

如可以利用Bootstrap构建各页面展示元素所对应的页面控件。并将构建的所述页面控件集成至可视化框架中，得到页面配置界面。如可以基于Vue.js可视化框架，利用Bootstrap工具，配置各要素信息所对应的程序，并进行封装，形成UI组件。将封装好的UI组件作为一个页面控件，以构建页面构建应用。所述页面构建应用可以基于用户的触发操作，向用户展示页面配置界面。所述触发如可以包括点击、长按等。需要说明的是，本申请并不限制采用其他类型的工具实现上述页面配置界面的构建。

如图2所示，所述页面配置界面的一侧还可以配置有控件区域。所述控件区域可以包括多个页面控件的展示图标。如图2所示，图2为页面构建应用向用户展示的应用界面示意图。图2的左侧为页面控件的图像化展示区域，图2的右侧为页面配置界面。当然，图2仅为举例说明，并不构成对本申请应用界面的直接限定。用户可以对各页面控件的图标进行操作。如可以从控件区域选择页面控件，拖拽至页面配置界面，并为每个页面控件添加唯一控件标识，以对页面配置界面内的控件进行区分。

可以通过控件组合及样式编辑构建所需的页面展示界面。所述控件组合及样式编辑如可以包括改变页面配置界面内的页面控件的位置、大小，以及为页面控件配置关联信息等。所述关联信息如可以包括控件所对应的功能、展示信息等。如设置控件的功能为页面跳转，则触发该控件时页面执行跳转功能。或者，还可以为该跳转控件关联待跳转的页面IP地址，以在执行跳转时基于所关联的IP地址进行跳转等。所述终端可以接收用户对页面配置界面中的页面控件的操作信息。

S22：将所述操作信息所对应的页面控件作为当前页面控件，提取所述当前页面控件基于所述操作信息所确定的控件信息；其中，所述控件信息包括页面控件在指定方向上的长度以及页面控件的指定点相对页面配置界面的位置信息。

为了便于区分表述，可以将所述操作信息所针对的页面控件作为当前页面控件。终端可以提取所述当前页面控件基于所述操作信息所确定的控件信息。所述控件信息如可以包括页面控件在指定方向上的长度以及页面控件的指定点相对页面配置界面的位置信息等。

可以将页面控件在指定方向上的边界点距离最大值设置为页面控件在指定方向上的长度。所述指定方向可以为任意方向。如可以将从页面配置界面的底部至顶部的垂向作为指定方向，相应的，页面控件在指定方向上的长度即为页面控件沿垂向的高度。或者，也可以将从页面配置界面的左侧至右侧的水平线作为指定方向，相应的，页面控件在指定方向上的长度即为页面控件沿水平线的宽度。

如页面控件为规则图形，所述指定点可以为页面控件的图形中点。如页面控件为不规则图形，所述指定点可以为图形的重心。当然，该指定点设定方式仅为优选举例说明，实际应用中可以根据需要进行配置。还可以获取页面控件的指定点相对页面配置界面的位置信息。如可以获取指定点相对页面配置界面的基准线、基准点的相对位置信息。所述基准线如可以为页面配置界面的上、下、左、右四个边界线。所述基准点如可以为所述页面配置界面的四个边角点或中心点等。当然，也可以根据实际需要设定页面配置界面的任意点或任意线作为基准线、基准点，以定位指定点或页面控件上任意点的位置信息。

通过定位页面控件在指定方向的长度信息以及指定点相对页面配置界面的位置信息，可以初步定位出页面控件在页面配置界面的大小以及位置等信息。

S24：利用所述当前页面控件的控件信息对所述页面配置界面的已有页面控件布局信息进行更新，以根据更新后的页面控件布局信息生成用于页面展示的页面展示数据。

终端可以进一步获取页面配置界面的已有页面控件布局信息。所述已有页面控件布局信息可以包括页面配置界面已布设的页面控件、已布设的各页面控件的控件信息。终端可以将所述当前页面控件的控件信息更新至页面配置界面的已有页面控件布局信息中，得到更新后的页面控件布局信息。在页面构建完成后，用户可以触发页面配置界面上的提交或完成等类似功能的按钮。终端可以基于该触发操作，利用最后一次更新的页面控件布局信息生成或更新页面展示代码。或者，终端可以基于该触发操作，将最后一次更新的页面控件布局信息发送至服务器，由服务器利用页面控件布局信息生成或更新页面展示代码。

所述页面配置界面还可以包括页面预览界面。终端可以接收用户的页面预览触发操作，页面配置界面可以隐藏页面配置界面的其他功能，向用户展示最后一次更新后的页面控件布局信息所对应的页面展示界面，使得用户可预览最后一次操作后所对应的页面展示效果。

基于可视化拖拽进行页面设计，可以提升页面设计及代码生成效率，提高代码可复用性。同时，对界面控件的操作都可实时预览，可以实现所见即所得的设计开发效果，提高页面设计的便捷性。

另一些实施方式中，页面控件布局信息还可以包括页面控件的相对位置关系等。设备可基于当前页面控件与已布设的各页面控件的相对位置关系情况，进一步更新页面控件布局信息，以进一步准确确定当前页面控件与已布设的各页面控件的位置关系。通过进一步结合页面控件的相对位置关系确定页面控件布局信息，可以提高页面展示代码生成的准确性，与实际页面展示界面的构建更加匹配，提高页面展示的准确性。

一些实施例中，可以在基于当前页面控件的控件信息与已布设的各页面控件的控件信息的比对结果确定当前页面控件与已布设的各页面控件存在重叠的情况下，提取当前页面控件相对所述页面配置界面的相对布设信息；利用所述当前页面控件相对所述页面配置界面的相对布设信息更新所述已有页面控件布局信息。

设备可以通过比对控件信息来判断当前页面控件与已布设的各页面控件是否存在重叠。如可以在页面配界面构建笛卡尔坐标系，然后，将页面控件的控件信息投影至笛卡尔坐标系中，提取页面控件的横坐标取值区间以及纵坐标取值区间。然后，将当前页面控件的坐标取值区间与已布设的各页面控件的坐标取值区间进行比对，以确定当前页面控件与已布设的页面控件是否存在位置上的重叠。当然，也可以通过选择基准线或基准点的方式，通过将页面控件的边界点与基准线或基准点比对，来定位页面控件的边界点的位置信息，进而通过位置信息比对，来确定当前页面控件与已布设的页面控件是否存在位置上的重叠。

在确定当前页面控件与至少一个已布设的各页面控件存在重叠的情况下，可以提取当前页面控件相对所述页面配置界面的相对布设信息，利用所述当前页面控件相对所述页面配置界面的相对布设信息更新所述已有页面控件布局信息。如可以计算当前页面控件的最左/上侧的边界点到页面配置界面的左/上边界线的距离占界面长度的百分比。然后，基于该百分比使用绝对布局方式对当前页面控件进行布局。当然，也可以采用其他布局方式，这里不做限定。

在页面控件的布局信息表征时，还可以进行配置页面控件的行信息，利用行信息来进一步简单准确的定位页面控件在页面配置界面的相对位置信息，以及页面控件间的相对位置信息。当然，上述行信息所对应的行延伸方向并不特别指定是水平方向，也可以为垂向，或者也可以为斜向。该行信息所对应的行延伸方向可以与指定方向垂直。相应的，若指定方向为垂直方向，则每一行的行延伸方向为水平方向。若指定方向为水平方向，则每一行的行延伸方向为垂直方向。所述行信息还可以包括行标识以及行高度。所述行标识可以用于对相应的行进行标识。所述行高度可以用于表征行两边界线之间的垂向距离。

对于第一个布设在页面配置界面的页面控件，其行信息可以直接基于页面控件与页面配置界面的相对位置关系确定。对于之后布设在页面配置界面的页面控件，则可以根据其与已布设的页面控件之间的相对位置关系，配置该新布设的页面控件的行信息，并基于新布设的页面控件的位置更新已布设的页面控件的行信息，完成页面控件布局信息的更新。

可以选取页面配置界面的内的一条线作为基准线，确定第一个布设在页面配置界面的页面控件的行信息，之后布设的各页面控件的行信息则可以基于与已布设的页面控件之间的位置关系，来确定其行信息，并适应性的对已布设页面的行信息进行调整，简单有效的实现页面控件相对布局关系的准确确定。且采用该方式，无需限定页面控件的位置，进而可以提高页面控件布局的灵活性。如可以将页面配置界面的某边界作为基准线。对于第一个布设在页面配置界面的页面控件，则可以基于页面配置界面的某边界确定第一个布设的页面控件的行高度。如该行高度为页面控件的边界线与页面配置界面的某边界之间的最大距离。可以获取与页面配置界面的某边界相对应方向上，最靠近页面配置界面的该边界的页面控件的边界点，将通过该边界点且沿指定方向延伸的线作为页面控件的边界线。

相应的，一个实施例中，在确定当前页面控件与已布设的各页面控件不存在重叠的情况下，可以判断当前页面控件是否为页面配置界面的第一个布设的页面控件。若当前页面控件为页面配置界面的第一个布设的页面控件，则基于页面配置界面内预先设定的基准线，配置当前页面控件的行信息；其中，所述行信息包括行标识和行高度；所述行高度为包含当前页面控件的行与基准线之间的距离。

若当前页面控件不是页面配置界面的第一个布设的页面控件，则可以提取在所述指定方向上与当前页面控件的位置信息存在重合的已布设的页面控件，作为相交页面控件。利用所述当前页面控件与所述相交页面控件所在的行的位置关系，更新所述已有页面控件布局信息。

如所述指定方向为笛卡尔坐标系的纵坐标方向，则可以获取当前页面控件的纵坐标取值区间以及已布设的页面控件的纵坐标区间。然后，可以遍历已布设的页面控件，判断当前页面控件的纵坐标区间与已布设的页面控件的纵坐标区间是否存在重合的坐标值。如，当前页面控件C的纵坐标区间为[5，8]，某已布设的页面控件C₁的纵坐标区间为[2，6]，则二者存在纵坐标值重合。也可以标记为控件C与控件C₁在纵坐标方向上相交，即控件C₁为控件C在纵坐标方向上的相交页面控件。当然，也可以采用其他方式提取在所述指定方向上与当前页面控件的位置信息存在重合的已布设的页面控件。

下面一个或者多个实施例中，为了便于表述，可以假设沿所述指定方向为向下，逆所述指定方向为向上。当然，该假设仅为便于表述设定，并不沟通对各实施例所对应的发明构思的直接限定。除非有特殊说明，下文一个或者多个实施例所提到的下边界、上边界、上方、下方均为在各假设下所对应的上下位置关系，并非实际应用中所设定的上下位置关系。如所述指定方向为水平向右，则下边界实际对应的为右边界，上边界实际对应的为左边界，下方实际对应的为右方，上方实际对应的为左方。依次类推。

在上述假设下，以页面配置界面的下边界为基准线为例，对页面控件布局信息进行更新的优选实施方式说明如下。

一个实施例中，在提取到相交页面控件、且相交页面控件仅位于当前页面控件的上方的情况下，可以将当前页面控件直接合并至相交页面控件所在行。可以获取相交页面控件所在行的行标识，并将该行标识所对应的行作为指定行。设置所述当前页面控件的行标识为相交页面控件的行标识。然后，还可以配置当前页面控件在该行中的位置，以便于进一步定位当前页面控件的相对位置关系。可以利用当前页面控件的相对布局属性值来表征当前页面控件在其被赋予的行中的位置。相应的，可以设置所述行标识所对应的指定行的上边界与所述当前页面控件的上边界之间的距离为所述当前页面控件的相对布局属性值。

另一个实施例中，在提取到相交页面控件、且相交页面控件仅位于当前页面控件的下方的情况下，可以将当前页面控件直接合并至相交页面控件所在行。可以获取相交页面控件所在行的行标识，并将该行标识所对应的行作为指定行。设置所述当前页面控件的行标识为相交页面控件的行标识。

可以进一步更新指定行的行信息。可以计算指定行的上边界与所述当前页面控件的上边界之间的距离，作为指定距离，更新所述指定行的行高度为所述指定行的更新前的行高度与所述指定距离的加和。

以及，还需要更新该指定行的上一行的行信息。如可以对从下至上对各行进行编号，在每增加一行时，可以依次变更各行的编号。如可以设置行的编号为行标识。可以根据行标识确定该指定行的上一行，作为目标行。并将目标行的行高度更新为目标行更新前的行高度与所述指定距离的差值。或者，也可以获取页面控件的上边界位于当前页面控件的上边界的上方的页面控件，作为第一目标页面控件。计算各第一目标页面控件的下边界与当前页面控件的上边界之间的距离最小值，作为第一控件距离。提取与当前页面控件的第一控件距离最小的第一目标页面控件，作为第一指定页面控件。第一指定页面控件所在行即为该指定行的上一行。可以更新第一指定页面控件所在行的行高度为第一指定页面控件所在行更新前的行高度与所述指定距离的差值。

然后，还可以配置当前页面控件与相交页面控件之间的位置关系，以便于进一步定位当前页面控件的相对位置关系。可以设置所述更新后的指定行内各页面控件的上边界与更新后的指定行的上边界之间的距离，为所述更新后的指定行内各页面控件的相对布局属性值。

另一个实施例中，在提取到相交页面控件，且既存在相交页面控件的上边界位于当前页面控件的上边界的上方，也存在相交页面控件的上边界位于当前页面控件的上边界的下方的情况下，可以先获取各相交页面控件所在行的行标识。

在获取的各行标识重合的情况下，即各相交页面控件位于同一行。可以将当前页面控件直接合并至相交页面控件所在行。可以获取相交页面控件所在行的行标识，并将该行标识所对应的行作为指定行。设置所述当前页面控件的行标识为相交页面控件的行标识。然后，还可以配置当前页面控件与相交页面控件之间的位置关系，以便于进一步定位当前页面控件的相对位置关系。设置所述行标识所对应的指定行的上边界与所述当前页面控件的上边界之间的距离为所述当前页面控件的相对布局属性值。

在获取的各行标识不重合的情况下，则可以将各行标识所对应的指定行进行合并，作为更新后的指定行。在该情况下，行标识、行高度以及合并后的行内的各页面控件(包括当前页面控件)的相对布局属性值均需更新。可以配置所述更新后的指定行的行标识，将新配置的行标识作为更新后的指定行内各页面控件的行标识。设置所述更新后的指定行的行高度为不重合的各行标识所对应的行高度的加和。设置所述更新后的指定行的上边界与所述更新后的指定行内各页面控件的上边界之间的距离，为所述更新后的指定行内各页面控件的相对布局属性值。

另一个实施例中，在未提取到相交页面控件的情况下，可以获取页面控件的上边界位于当前页面控件的上边界的上方的页面控件，作为第一目标页面控件。然后，计算各第一目标页面控件的下边界与当前页面控件的上边界之间的距离最小值，作为第一控件距离。提取与当前页面控件的第一控件距离最小的第一目标页面控件，作为第一指定页面控件。

还可以获取页面控件的上边界位于当前页面控件的上边界的下方的页面控件，作为第二目标页面控件。然后，计算各第二目标页面控件的上边界与当前页面控件的下边界之间的距离最小值，作为第二控件距离。提取与当前页面控件的第二控件距离最小的第二目标页面控件，作为第二指定页面控件。

为所述当前页面控件新增一行，并设置新增行的行高度为所述当前页面控件的上边界与所述第二指定页面控件的上边界之间的距离。更新第一指定页面控件所在行的行高度为第一指定页面控件所在行更新前的行高度与新增行的行高度的差值。

或者，也可以先初步确定当前页面控件所在的初始行。所述初始行的两边界线为当前页面控件的边界线。然后，可以基于初始行的边界线来定位相交页面控件或者距离最近的页面控件等。具体实施方式，可以基于上述实施例的方案进行灵活设计，这里不做赘述。所属领域技术人员在本申请技术精髓的启示下，还可能做出其它变更，但只要其实现的功能和效果与本说明书实施例相同或相似，均应涵盖于本说明书实施例的保护范围内。

上述各个实施例，通过进一步为各页面控件配置行信息，并对各页面控件的行信息基于新布设的页面控件与各已布设的页面控件之间的位置关系。进行逐步迭代更新的方式，完成页面控件相对页面配置界面以及各页面控件之间位置关系的准确定位，从而可以大幅提高页面控件定位的简便性以及准确性，使得基于页面控件布局信息所生成的页面展示界面代码可以与实际布局对应准确性更高。同时，在每次对页面内的控件进行变更时，可直接更新原布局信息的方式，进而利用新布局信息对原页面代码进行更新即可，实现页面代码的循环利用，大幅提高页面构建界面的代码生成效率，提高代码可复用性。进一步的，采用上述方式，需求对页面控件的布局位置及方式进行限定，设备根据控件位置对布局信息进行自适应性调整，既可简单方便的生成便于二次开发的代码，提高控件布设的灵活性。

基于上述实施例的方案，本说明书还提供一种场景示例，以便于更清晰的对上述实施例的方案进行说明。

需要特别说明的是，本场景示例中所给出的上、下、左、右并非是在上述假设下所确定的，而是采用页面配置界面的上、下、左、右方向。如图2所示，在页面配置界面设置笛卡尔坐标系，以页面配置界面的左边界与上边界的交点为原点，以上边界所在的水平线为X轴，以左边界所在的垂线为Y轴。相应的，在接收到当前页面控件的操作信息后，可以记录当前页面控件的控件信息如下：

当前页面控件：控件标识C，控件C指定点(如拖拽释放点)相对于界面左边界的坐标X、相对于界面上边界的坐标Y，控件C的宽度(控件沿X轴方向的长度)W、高度(控件沿Y轴方向的长度)H。

还可以获取页面配置界面信息：界面宽度(界面沿X轴方向的长度)VW，界面高度(界面沿Y轴方向的长度)VH；

以及，还可以获取页面配置界面的已有页面控件布局信息：

已布设的各页面控件的标识以及各页面控件的指定点相对于界面左边界的坐标X'、相对于界面上边界的坐标Y'，控件的宽度(控件沿X轴方向的长度)W'、高度(控件沿Y轴方向的长度)H'。

可以采用下述方式确定当前页面控件与已布设的各页面控件是否存在重叠。

循环遍历已布设的各页面控件，对每一个已布设的页面控件执行下述步骤：

1)提取当前页面控件C的边界点坐标中的最大值和最小值。假设页面控件C为规则的矩形、圆形、菱形等，指定点为图形的中心点，则：

X_max＝X+W/2

X_min＝X-W/2

Y_max＝Y+H/2

Y_min＝Y-H/2

2)提取已布设的各页面控件的边界点坐标中的最大值和最小值。假设已布设的页面控件为规则的矩形、圆形、菱形等，指定点为图形的中心点，则：

X'_max＝X'+W'/2

X'_min＝X'-W'/2

Y'_max＝Y'+H'/2

Y'_min＝Y'-H'/2

3)当满足下述重叠条件一及条件二的情况下，确定当前页面控件与该已布设的各页面控件重叠，

条件一：X'_min＜X_max＜X'_max或X'_min＜X_min＜X'_max

条件二：Y'_min＜Y_max＜Y'_max或Y'_min＜Y_max＜Y'_max

当然，上述判断方式仅为优选举例说明，具体实施时还可以采用其他的判断方式，如可以确定页面控件所占的区域内所有点相对某基准点的位置关系，然后，比对各页面控件所占区域的所有点的位置关系，以确定是否存在重叠等。

如图3所示，在确定当前页面控件与至少一个已布设的页面控件存在重叠的情况下，设备还可以提取当前页面控件相对所述页面配置界面的相对布设信息，利用所述当前页面控件相对所述页面配置界面的相对布设信息更新所述已有页面控件布局信息。如可以计算当前页面控件的左边界到界面左边界距离占界面宽度的百分比l、当前页面控件上边界到界面上边界距离占界面高度的百分比t,使用绝对布局方式对当前页面控件进行布局。对应的CSS代码可以表示为style＝"position:absolute；left:l；top:t"。之后，可以将当前页面控件的布局信息以及控件信息更新至已有页面控件布局信息中，得到更新后的页面控件布局信息。其中，

l＝(X-W/2)/VW×100％

t＝(Y-H/2)/VH×100％

在基于当前页面控件的控件信息与已布设的各页面控件的控件信息的比对结果确定当前页面控件与已布设的各页面控件不存在重叠的情况下，提取在所述指定方向上与当前页面控件的位置信息存在重合的已布设的页面控件，作为相交页面控件。如可以获取当前页面控件在Y方向所占的坐标区间，以及已布设的页面控件在Y方向所占的坐标区间。然后，可以遍历已布设的页面控件，判断当前页面控件的坐标区间与已布设的页面控件的坐标区间是否存在重合的坐标值。对于X方向可以参考Y方向实施，这里不做赘述。

在页面控件的布局信息表征时，还可以进行配置页面控件的行信息，利用行信息来进一步简单准确的定位页面控件在页面配置界面的相对位置信息，以及页面控件间的相对位置信息。当然，行信息所对应的行延伸方向并不特别指定是水平方向，也可以为垂向，或者也可以为斜向。本场景示例中，为了便于更加直观的表述，行信息所对应的行延伸方向为X方向的定义为行，延伸方向为Y方向的则定义为列。

对Y方向的页面控件之间的布设位置进行分析如下。

遍历已布设的各页面控件，判断是否存在与当前页面控件C相交的控件。判断方式可以参考上述实施例，这里不做赘述。

若存在相交页面控件C₁，位置如图4所示，图4中虚线为控件C₁所在的行的边界线，I₁为该行的高度。获取控件C₁所在行标识R₁。将控件C₁的行标识R₁赋予控件C，新增控件C的相对布局属性M_top。

M_top＝Y_min-Y_1min

其中，Y_1min为行R₁的上边界的坐标值。

若存在相交页面控件C₂，位置如图5所示。图5中示出了控件C₁及C₂所在的行，I₁为控件C₁所在行的高度，I₂为控件C₂所在行的高度。获取控件C₂所在行标识R₂。将控件C₂的行标识R₂赋予控件C，更新控件C₁所在行R₁的高度I₁、C₂所在行R₂的高度I₂，更新行R₂中所有控件的相对布局属性M_2top。新增控件C的相对布局属性M_top为零。

I₁′＝I₁-(Y_2min-Y_min)

I₂′＝I₂+(Y_2min-Y_min)

M_2top′＝M_2top+(Y_2min-Y_min)

其中，Y_2min为更新前的行R₂的上边界的坐标，I₁′为更新后的行R₁的高度，I₂′为更新后的行R₂的高度，M_2top′为行R₂中所有控件更新后的相对布局属性。

若存在相交页面控件C₁及C₂，位置如图6所示。此时，相交页面控件C₁及C₂所在的行的行标识不重合，即相交页面控件C₁及C₂不在同一个行。将控件C₁及C₂所在行合并成一行R'(高度为I')，新增控件C的属性M_top，更新控件C₂原所在行中所有控件的属性M_2top。

I′＝I₁+I₂

M_top＝Y_min-Y_1min

M_2top′＝M_2top+(Y_min-Y_1min)

在未提取到相交页面控件的情况下，基于上述实施例的方式提取第一指定页面控件C₁、C₂，位置如图7所示。新增一行单独存放控件C(高度为I)，更新控件C₁所在行R₁的高度I₁。

I＝Y_2min-Y_min

I₁′＝I₁-I

对X方向的页面控件之间的布设位置进行分析如下。

在得到当前页面控件所在行后，遍历当前页面控件所在行的各页面控件，确定是否存在与当前页面控件相交的相交页面控件。

若存在相交页面控件C₁，位置如图8所示，图8中虚线为控件C₃所在的列，J₃为该列的宽度。获取控件C₃所在列标识R₃。将控件C₃的列标识R₃赋予控件C，新增控件C的相对布局属性M_left。

M_left＝X_min-X_3min

其中，X_3min为列R₃的左边界的坐标值。

若存在相交页面控件C₄，位置如图9所示。图9中示出了控件C₃及C₄所在的列，J₃为控件C₃所在列的宽度，J₄为控件C₄所在列的宽度。获取控件C₄所在的列标识R₄。将控件C₄所在的列标识R₄赋予控件C，更新控件C₃所在列R₃的宽度J₃、C₄所在列R₄的宽度J₄，更新列R₄中所有控件的相对布局属性M_4left。新增控件C的相对布局属性M_left为零。

J₃′＝J₃-(X_4min-X_min)

J₄′＝J₄+(X_4min-X_min)

M_4left′＝M_4left+(X_4min-X_min)

其中，X_4min为更新前的列R₄的左边界的坐标，J₃′为更新后的列R₃的宽度，J₄′为更新后的列R₄的宽度，M_4left′为列R₄中所有控件更新后的相对布局属性。

若存在相交页面控件C₃及C₄，位置如图10所示。此时，相交页面控件C₃及C₄所在的列的列标识不重合，即相交页面控件C₃及C₄不在同一个列。将控件C₃及C₄所在列合并成一列R”(宽度为J')，新增控件C的属性M_left，更新控件C₄原所在列中所有控件的属性M_4left。

J′＝J₃+J₄

M_left＝X_min-X_3min

M_4left′＝M_4left+(X_4min-X_3min)

在未提取到相交页面控件的情况下，基于上述实施例的方式提取第一指定页面控件C₃、C₄，位置如图11所示。新增一列单独存放控件C(宽度为J)，更新C₃所在列R₃的宽度J₃。

J＝(X_4min-X_min)

J₃′＝J₃-J

通过上述步骤得到当前控件的相对布局信息，并更新了关联控件的相对布局信息，从而实现页面自动布局。

一些实施例中，还可以在对行的高度以及列的宽度进行更新时，进一步考虑页面配置界面的宽度和高度，将计算的坐标值与界面的高度/宽度的比值作为行高度、列宽度，如J＝(X_4min-X_min)/VW×100％。通过该种方式，可以使得布局调整与页面的实际界面宽度、高度相适配，提高自动布局的灵活性。

另一些实施方式中，还可以对页面控件进行事件绑定。当选中页面配置界面中某个控件时，可对该控件进行点击、双击、鼠标移入、鼠标移开、内容个改变、内容被选中等事件进行绑定，绑定内容包括页面跳转、状态切换(切换页面控件的状态，如控件是否可见、改变控件颜色等)。如可以根据控件标识为所选控件添加绑定事件，根据控件标识改变控件状态。

还可以可对单个控件的样式进行更新。样式类型可以包括控件形状、宽度、高度、背景颜色、文本颜色、字体样式、字体大小、位置、外边距、内边距、边框样式等。还可以记录页面设计中的所有拖拽、编辑、事件绑定操作及对应时间点的页面内容，当进行撤销或重做操作时，可基于记录的上述信息将页面内容恢复到对应的状态。

如图12所示，在页面控件布局信息每次基于操作信息更新完成后，可以自动对页面的布局代码进行调整。如可以新增加控件时，可以生成新控件的布局代码及更新已有页面布局代码。但对控件样式编辑时，可以根据控件标识为对应的控件生成对应样式的代码。当撤销对拖拽、编辑、事件绑定等操作时，可以根据操作类型进行相应代码更新。或者，也可以在基于用户的提交操作后，再基于提交的页面控件布局信息进行页面的布局代码的调整。

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。具体的可以参照前述相关处理相关实施例的描述，在此不做一一赘述。

上述对本说明书特定实施例进行了描述。其它实施例在所附权利要求书的范围内。在一些情况下，在权利要求书中记载的动作或步骤可以按照不同于实施例中的顺序来执行并且仍然可以实现期望的结果。另外，在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中，多任务处理和并行处理也是可以的或者可能是有利的。

本说明书一个或多个实施例提供的页面构建方法，通过预先搭建可视化的流程绘制界面，便于用户基于该界面简单有效的进行审批流程的绘制。然后，再将基于绘制的审批流程图生成的原始审批流程文件发送至服务器，以使服务器转换成可执行的审批流程数据，完成审批流程的构建。从而提高了页面构建的高效便捷性，无需再通过专业人员进行流程的绘制以及维护，进一步降低了人工成本。

基于上述所述的页面构建方法，本说明书一个或多个实施例还提供一种页面构建装置。所述的装置可以包括使用了本说明书实施例所述方法的系统、软件(应用)、模块、组件、服务器等并结合必要的实施硬件的装置。基于同一创新构思，本说明书实施例提供的一个或多个实施例中的装置如下面的实施例所述。由于装置解决问题的实现方案与方法相似，因此本说明书实施例具体的装置的实施可以参见前述方法的实施，重复之处不再赘述。以下所使用的，术语“单元”或者“模块”可以实现预定功能的软件和/或硬件的组合。尽管以下实施例所描述的装置较佳地以软件来实现，但是硬件，或者软件和硬件的组合的实现也是可能并被构想的。具体的，图13表示说明书提供的一种页面构建装置实施例的模块结构示意图，如图13所示，所述装置可以包括：

操作信息接收模块102，可以用于接收用户对页面配置界面中的页面控件的操作信息；所述页面配置界面至少包括一个页面控件，所述页面控件用于可视化的表征页面展示元素的信息。

控件信息提取模块104，可以用于将所述操作信息所对应的页面控件作为当前页面控件，提取所述当前页面控件基于所述操作信息所确定的控件信息；其中，所述控件信息包括页面控件在指定方向上的长度以及页面控件的指定点相对页面配置界面的位置信息。

布局信息更新模块106，可以用于利用所述当前页面控件的控件信息对所述页面配置界面的已有页面控件布局信息进行更新，以根据更新后的页面控件布局信息生成用于页面展示的页面展示数据。

需要说明的，上述所述的装置根据方法实施例的描述还可以包括其他的实施方式。具体的实现方式可以参照相关方法实施例的描述，在此不作一一赘述。

本说明书还提供一种页面构建设备，所述设备可以应用于单独的页面系统中，也可以应用在多种计算机数据处理系统中。所述设备可以为单独终端及服务器，也可以包括使用了本说明书的一个或多个所述方法或一个或多个实施例装置的服务器集群、系统(包括分布式系统)、软件(应用)、实际操作装置、逻辑门电路装置、量子计算机等并结合必要的实施硬件的终端装置。一些实施例中，所述设备包括至少一个处理器及用于存储处理器可执行指令的存储器，所述指令被所述处理器执行时实现包括上述任一个或者多个实施例所述方法的步骤。

所述存储器可以包括用于存储信息的物理装置，通常是将信息数字化后再以利用电、磁或者光学等方式的媒体加以存储。所述存储介质有可以包括：利用电能方式存储信息的装置如，各式存储器，如RAM、ROM等；利用磁能方式存储信息的装置如，硬盘、软盘、磁带、磁芯存储器、磁泡存储器、U盘；利用光学方式存储信息的装置如，CD或DVD。当然，还有其他方式的可读存储介质，例如量子存储器、石墨烯存储器等等。

需要说明的，上述所述的设备根据方法或者装置实施例的描述还可以包括其他的实施方式，具体的实现方式可以参照相关方法实施例的描述，在此不作一一赘述。

本说明书实施例并不局限于必须是符合标准数据模型/模板或本说明书实施例所描述的情况。某些行业标准或者使用自定义方式或实施例描述的实施基础上略加修改后的实施方案也可以实现上述实施例相同、等同或相近、或变形后可预料的实施效果。应用这些修改或变形后的数据获取、存储、判断、处理方式等获取的实施例，仍然可以属于本说明书的可选实施方案范围之内。

本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于系统实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。在本说明书的描述中，参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本说明书的至少一个实施例或示例中。在本说明书中，对上述术语的示意性表述并不必须针对的是相同的实施例或示例。而且，描述的具体特征、结构、材料或者特点可以在任一个或多个实施例或示例中以合适的方式结合。此外，在不相互矛盾的情况下，本领域的技术人员可以将本说明书中描述的不同实施例或示例以及不同实施例或示例的特征进行结合和组合。

以上所述仅为本说明书的实施例而已，并不用于限制本说明书。对于本领域技术人员来说，本说明书可以有各种更改和变化。凡在本说明书的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本说明书的权利要求范围之内。

Claims (12)

1.一种页面构建方法，其特征在于，所述方法包括：

接收用户对页面配置界面中的页面控件的操作信息；所述页面配置界面至少包括一个页面控件，所述页面控件用于可视化的表征页面展示元素的信息；

将所述操作信息所对应的页面控件作为当前页面控件，提取所述当前页面控件基于所述操作信息所确定的控件信息；其中，所述控件信息包括页面控件在指定方向上的长度以及页面控件的指定点相对页面配置界面的位置信息；

利用所述当前页面控件的控件信息对所述页面配置界面的已有页面控件布局信息进行更新，以根据更新后的页面控件布局信息生成用于页面展示的页面展示数据；

其中，所述已有页面控件布局信息包括已布设的各页面控件的控件信息；更新所述已有页面控件布局信息，包括：

在基于当前页面控件的控件信息与已布设的各页面控件的控件信息的比对结果确定当前页面控件与已布设的各页面控件不存在重叠的情况下，若当前页面控件为页面配置界面的第一个布设的页面控件，则基于页面配置界面内预先设定的基准线，配置当前页面控件的行信息；其中，所述行信息包括行标识和行高度；所述行高度为包含当前页面控件的行与基准线之间的距离。

2.根据权利要求1所述的方法，其特征在于，更新所述已有页面控件布局信息，还包括：

在基于当前页面控件的控件信息与已布设的各页面控件的控件信息的比对结果确定当前页面控件与已布设的各页面控件存在重叠的情况下，提取当前页面控件相对所述页面配置界面的相对布设信息；

利用所述当前页面控件相对所述页面配置界面的相对布设信息更新所述已有页面控件布局信息。

3.根据权利要求1所述的方法，其特征在于，若当前页面控件不是页面配置界面的第一个布设的页面控件，则提取在所述指定方向上与当前页面控件的位置信息存在重合的已布设的页面控件，作为相交页面控件；

利用所述当前页面控件与所述相交页面控件所在的行的位置关系，更新所述已有页面控件布局信息。

4.根据权利要求3所述的方法，其特征在于，假设沿所述指定方向为向下，逆所述指定方向为向上；在上述假设下，以页面配置界面的下边界作为基准线。

5.根据权利要求4所述的方法，其特征在于，在提取到相交页面控件、且相交页面控件的上边界位于当前页面控件的上边界的上方的情况下，所述更新所述已有页面控件布局信息，包括：

设置所述当前页面控件的行标识为相交页面控件的行标识；

设置所述行标识所对应的指定行的上边界与所述当前页面控件的上边界之间的距离为所述当前页面控件的相对布局属性值。

6.根据权利要求4所述的方法，其特征在于，在提取到相交页面控件、且相交页面控件的上边界位于当前页面控件的上边界的下方的情况下，所述更新所述已有页面控件布局信息，包括：

设置所述当前页面控件的行标识为相交页面控件的行标识；

计算指定行的上边界与所述当前页面控件的上边界之间的距离，作为指定距离；更新所述指定行的行高度为所述指定行的更新前的行高度与所述指定距离的加和；

设置所述更新后的指定行内各页面控件的上边界与更新后的指定行的上边界之间的距离，为所述更新后的指定行内各页面控件的相对布局属性值。

7.根据权利要求6所述的方法，其特征在于，所述更新所述已有页面控件布局信息，包括：

获取页面控件的上边界位于当前页面控件的上边界的上方的页面控件，作为第一目标页面控件；

计算各第一目标页面控件的下边界与当前页面控件的上边界之间的距离最小值，作为第一控件距离；

提取与当前页面控件的第一控件距离最小的第一目标页面控件，作为第一指定页面控件；

更新第一指定页面控件所在行的行高度为第一指定页面控件所在行更新前的行高度与所述指定距离的差值。

8.根据权利要求4所述的方法，其特征在于，在提取到相交页面控件，且既存在相交页面控件的上边界位于当前页面控件的上边界的上方，也存在相交页面控件的上边界位于当前页面控件的上边界的下方的情况下，所述更新所述已有页面控件布局信息，包括：

获取各相交页面控件所在行的行标识；

在获取的各行标识重合的情况下，设置所述当前页面控件的行标识为相交页面控件的行标识；

设置所述行标识所对应的指定行的上边界与所述当前页面控件的上边界之间的距离为所述当前页面控件的相对布局属性值。

9.根据权利要求8所述的方法，其特征在于，所述更新所述已有页面控件布局信息，包括：

在获取的各行标识不重合的情况下，将各行标识所对应的指定行进行合并，作为更新后的指定行；

配置所述更新后的指定行的行标识，将新配置的行标识作为更新后的指定行内各页面控件的行标识；

设置所述更新后的指定行的行高度为不重合的各行标识所对应的行高度的加和；

设置所述更新后的指定行的上边界与所述更新后的指定行内各页面控件的上边界之间的距离，为所述更新后的指定行内各页面控件的相对布局属性值。

10.根据权利要求4所述的方法，其特征在于，在未提取到相交页面控件的情况下，所述更新所述已有页面控件布局信息，包括：

获取页面控件的上边界位于当前页面控件的上边界的上方的页面控件，作为第一目标页面控件；计算各第一目标页面控件的下边界与当前页面控件的上边界之间的距离最小值，作为第一控件距离；提取与当前页面控件的第一控件距离最小的第一目标页面控件，作为第一指定页面控件；

获取页面控件的上边界位于当前页面控件的上边界的下方的页面控件，作为第二目标页面控件；计算各第二目标页面控件的上边界与当前页面控件的下边界之间的距离最小值，作为第二控件距离；提取与当前页面控件的第二控件距离最小的第二目标页面控件，作为第二指定页面控件；

为所述当前页面控件新增一行，配置新增行的行标识、以及配置新增行的行高度为所述当前页面控件的上边界与所述第二指定页面控件的上边界之间的距离；

更新第一指定页面控件所在行的行高度为第一指定页面控件所在行更新前的行高度与新增行的行高度的差值。

11.一种页面构建装置，其特征在于，所述装置包括：

操作信息接收模块，用于接收用户对页面配置界面中的页面控件的操作信息；所述页面配置界面至少包括一个页面控件，所述页面控件用于可视化的表征页面展示元素的信息；

控件信息提取模块，用于将所述操作信息所对应的页面控件作为当前页面控件，提取所述当前页面控件基于所述操作信息所确定的控件信息；其中，所述控件信息包括页面控件在指定方向上的长度以及页面控件的指定点相对页面配置界面的位置信息；

布局信息更新模块，用于利用所述当前页面控件的控件信息对所述页面配置界面的已有页面控件布局信息进行更新，以根据更新后的页面控件布局信息生成用于页面展示的页面展示数据；

其中，所述已有页面控件布局信息包括已布设的各页面控件的控件信息；所述布局信息更新模块具体用于：

在基于当前页面控件的控件信息与已布设的各页面控件的控件信息的比对结果确定当前页面控件与已布设的各页面控件不存在重叠的情况下，若当前页面控件为页面配置界面的第一个布设的页面控件，则基于页面配置界面内预先设定的基准线，配置当前页面控件的行信息；其中，所述行信息包括行标识和行高度；所述行高度为包含当前页面控件的行与基准线之间的距离。

12.一种页面构建设备，其特征在于，所述设备包括至少一个处理器及用于存储处理器可执行指令的存储器，所述指令被所述处理器执行时实现包括所述权利要求1-10任一项所述方法的步骤。