CN111142870A - web界面定制方法、装置、电子设备及存储介质 - Google Patents

Abstract

本发明提供一种web界面定制方法、装置、电子设备及存储介质，涉及web界面定制技术领域。web界面定制方法包括：根据web界面布局定义网格布局参数；根据网格布局参数的行列标志及各块的数据将网格布局参数转化为行列布局参数；解析行列布局参数并建立节点与各类组件间的关系；响应各类型组件并进行视觉渲染。本发明的目的在于提供一种web界面定制方法、装置、电子设备及存储介质，能够对通过将可视化定制后的网格布局的参数转化为行列布局，以实现便捷的可视化定制操作的同时具有良好的响应式布局支持。

Description

web界面定制方法、装置、电子设备及存储介质

技术领域

本发明涉及web界面定制技术领域，具体而言，涉及一种 web界面定制方法、装置、电子设备及存储介质。

背景技术

目前现有的web界面布局模式通常为网格布局、行列布局以及流式布局。

其中，网格布局是一种通过X坐标(横坐标)、Y坐标(纵坐标)、长度以及高度进行参数定义的界面布局方法，可以通过拖拽的方式简单便捷的对界面的网格布局参数进行定义，其可视化定制操作体验以及布局灵活度相对较好。但是网格布局的方式对于响应式布局的支持相对较差(通常通过等比缩放的形式实现)。

发明内容

本发明的目的在于提供一种web界面定制方法、装置、电子设备及存储介质，能够对通过将可视化定制后的网格布局的参数转化为行列布局，以实现便捷的可视化定制操作的同时具有良好的响应式布局支持。

本发明的实施例是这样实现的：

本发明实施例的一方面，提供一种web界面定制方法，包括：根据web界面布局定义网格布局参数；

根据网格布局参数的行列标志及各块的数据将网格布局参数转化为行列布局参数；

解析行列布局参数并建立节点与各类组件间的关系；

响应各类型组件并进行视觉渲染。

可选地，根据网格布局参数的行列标志及各块的数据将网格布局参数转化为行列布局参数，包括：

判断网格布局参数的行列标志；

若行列标志为行，则获取能够规划到一行的块并进行行规划；

若行列标志为列，则获取能够规划到一列的块并进行列规划；

根据行规划和列规划形成行列布局参数的行参数和列参数。

可选地，若行列标志为行，则获取能够规划到一行的块并进行行规划，包括：

获取能规划到一行的块；

判断能规划到一行的块的个数；

若个数为一个，则将能规划到一行的块放入行列布局参数的行参数中；

若个数为零个或多个，则获取能规划到一行的块中能规划到一列的块并进行列规划；

相应地，若行列标志为列，则获取能够规划到一列的块并进行列规划，包括：

获取能规划到一列的块；

判断能规划到一列的块的个数；

若个数为一个，则将能规划到一列的块放入行列布局参数的列参数中；

若个数为零个或多个，则获取能规划到一列的块中能规划到一行的块并进行行规划。

可选地，获取能规划到一行的块，包括：

按横坐标小到大对各块进行排序；

依次计算不同块组合后的高度是否能贯穿整行；

将能贯穿整行的高度对应的组合包含的各块放入选中块集合，选中块集合中的各块作为能规划到一行的块。

可选地，解析行列布局参数并建立节点与各类组件间的关系，包括：

解析行列布局参数为DOM结构，并给每个节点赋予12栅格体系的行列参数；

建立节点与各类组件间的关系。

本发明实施例的另一方面，提供一种web界面定制装置，包括：网格布局定制模块，用于根据web界面布局定义网格布局参数；

行列布局转化模块，用于根据网格布局参数的行列标志及各块的数据将网格布局参数转化为行列布局参数；

行列布局解析模块，用于解析行列布局参数并建立节点与各类组件间的关系；

组件渲染模块，用于响应各类型组件并进行视觉渲染。

可选地，行列布局转化模块，具体用于判断网格布局参数的行列标志；若行列标志为行，则获取能够规划到一行的块并进行行规划；若行列标志为列，则获取能够规划到一列的块并进行列规划；根据行规划和列规划形成行列布局参数的行参数和列参数。

可选地，行列布局转化模块包括行列规划子模块；行列规划子模块，用于若行列标志为行，获取能规划到一行的块；判断能规划到一行的块的个数；若个数为一个，则将能规划到一行的块放入行列布局参数的行参数中；若个数为零个或多个，则获取能规划到一行的块中能规划到一列的块并进行列规划；若行列标志为列，获取能规划到一列的块；判断能规划到一列的块的个数；若个数为一个，则将能规划到一列的块放入行列布局参数的列参数中；若个数为零个或多个，则获取能规划到一列的块中能规划到一行的块并进行行规划。

本发明实施例的又一方面，提供一种电子设备，包括处理器、存储介质和总线，存储介质存储有处理器可执行的机器可读指令，当电子设备运行时，处理器与存储介质之间通过总线通信，处理器执行机器可读指令，以执行如上任一项的web界面定制方法。

本发明实施例的再一方面，提供一种存储介质，存储介质上存储有计算机程序，计算机程序被处理器运行时执行如上述任一项的web界面定制方法。

本发明实施例的有益效果包括：

本发明实施例提供的一种web界面定制方法，首先根据web 界面布局定义网格布局参数，以通过可视化操作对web界面简便快捷的进行定制，然后根据网格布局参数的行列标志以及网格布局各块的数据将网格布局参数转化为行列布局参数，之后对行列布局参数进行解析并建立节点与各类组件间的关系，以使定制的web界面能够具有较好的响应式布局功能，最终响应各类型组件并进行视觉渲染实现web界面的定制。通过该方法能够对通过将可视化定制后的网格布局的参数转化为行列布局，进而利用行列布局实现响应式布局支持，使web界面能够便捷的可视化定制同时具有良好的响应式布局支持。

附图说明

为了更清楚地说明本发明实施例的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，应当理解，以下附图仅示出了本发明的某些实施例，因此不应被看作是对范围的限定，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他相关的附图。

图1为本发明实施例提供的web界面定制方法的流程示意图之一；

图2为本发明实施例提供的web界面定制方法的流程示意图之二；

图3为本发明实施例提供的web界面定制方法的流程示意图之三；

图4为本发明实施例提供的web界面定制方法的流程示意图之四；

图5为本发明实施例提供的web界面定制方法的流程示意图之五；

图6为本发明实施例提供的web界面定制方法的流程示意图之六；

图7为本发明实施例提供的web界面定制装置的示意图之一；

图8为本发明实施例提供的web界面定制装置的示意图之二；

图9为本发明实施例提供的电子设备的示意图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。通常在此处附图中描述和示出的本发明实施例的组件可以以各种不同的配置来布置和设计。

因此，以下对在附图中提供的本发明的实施例的详细描述并非旨在限制要求保护的本发明的范围，而是仅仅表示本发明的选定实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

目前web界面的定制方法包括网格布局、行列布局以及流式布局。网格布局是一种通过X坐标(横坐标)、Y坐标(纵坐标)、长度以及高度进行参数定义的界面布局方法。行列布局是通过可嵌套的行列树型结构定义界面布局的方法。流式布局是按横向或纵向主轴顺序排列的布局的方法。

其中网格布局在定制操作中可视化定制操作相对简便，且体验较好，但是采用网格布局定制web界面，对于响应式布局的支持相对较差。而行列布局定制web界面通常可以采用对其参数进行解析的形式实现较好的响应式布局。

本发明实施例提供一种web界面定制方法，如图1所示，包括：

步骤101：根据web界面布局定义网格布局参数。

步骤102：根据网格布局参数的行列标志及各块的数据将网格布局参数转化为行列布局参数。

步骤103：解析行列布局参数并建立节点与各类组件间的关系。

步骤104：响应各类型组件并进行视觉渲染。

在该web界面定制方法中，根据web界面布局定义网格布局参数，可以采用拖拽的可视化操作进行定义，也可以采用其他本领域技术人员所应用的网格布局定义方法对web界面布局进行定义，对此，本发明实施例不做具体限制，只要能够对根据web界面布局对网格布局参数进行定义即可。

在上述步骤中，网格布局的参数的各块数据可以包括横坐标(X坐标)、纵坐标(Y坐标)、长度以及高度等，例如其JSON 格式的数据可以是[{x:0,y:0,w:12,h:9},…]，其每个块中X为横坐标、Y为纵坐标、W为长度、H为高度。

在对网格布局参数进行转化时，可以通过对其定义行列标志，以根据行列标志和网格布局参数各块的数据对其进行转化。通常，行列标志包括行和列两种标志。

通常，转化成的行列布局参数为树型数据格式，示例地，可以是[{rowH：9,cols:[{colW:12,params:{…}}]},…]，其中 rowH表示行高，colW表示列宽而params表示界面组件的参数，其可以包括组件类型、视觉参数以及业务逻辑参数等。

本发明实施例提供的一种web界面定制方法，首先根据web 界面布局定义网格布局参数，以通过可视化操作对web界面简便快捷的进行定制，然后根据网格布局参数的行列标志以及网格布局各块的数据将网格布局参数转化为行列布局参数，之后对行列布局参数进行解析并建立节点与各类组件间的关系，以使定制的web界面能够具有较好的响应式布局功能，最终响应各类型组件并进行视觉渲染实现web界面的定制。通过该方法能够对通过将可视化定制后的网格布局的参数转化为行列布局，进而利用行列布局实现响应式布局支持，使web界面能够便捷的可视化定制同时具有良好的响应式布局支持。

可选地，根据网格布局参数的行列标志及各块的数据将网格布局参数转化为行列布局参数，如图2所示，包括：

步骤201：判断网格布局参数的行列标志。

步骤202：若行列标志为行，则获取能够规划到一行的块并进行行规划。

步骤203：若行列标志为列，则获取能够规划到一列的块并进行列规划。

步骤204：根据行规划和列规划形成行列布局参数的行参数和列参数。

通过对行列标志的判断，以对网格布局参数进行相应的行规划或列规划，能够通过递归的方式将所有网格布局参数转化为对应的树型格式的行列布局参数，相对准确且简便快捷。

可选地，若行列标志为行，则获取能够规划到一行的块并进行行规划，如图3所示，包括：

步骤301：获取能规划到一行的块。

步骤302：判断能规划到一行的块的个数。

步骤303：若个数为一个，则将能规划到一行的块放入行列布局参数的行参数中。

步骤304：若个数为零个或多个，则获取能规划到一行的块中能规划到一列的块并进行列规划。

相应地，若行列标志为列，则获取能够规划到一列的块并进行列规划，如图4所示，包括：

步骤401：获取能规划到一列的块。

步骤402：判断能规划到一列的块的个数。

步骤403：若个数为一个，则将能规划到一列的块放入行列布局参数的列参数中。

步骤404：若个数为零个或多个，则获取能规划到一列的块中能规划到一行的块并进行行规划。

需要说明的是，上述步骤中对于获取的能规划到一行的块中能规划到一列的块进行的列规划，以及对于获取的能规划到一列的块中能规划到一行的块进行的行规划，为对应于前述对于能规划到一列的块进行的列规划以及对于能规划到一行的块进行的行规划(即该过程为递归重复的循环步骤过程)。

可选地，在上述步骤中，获取能规划到一行的块之后网格布局中剩下的块、获取能规划到一行的块中能规划到一列的块之后能规划到一行的块中剩下的块，可以再次按上述步骤进行行规划递归；获取能规划到一列的块之后网格布局中剩下的块、获取能规划到一列的块中能规划到一行的块之后能规划到一列的块中剩下的块，可以再次按上述步骤进行列规划递归。

在本实施例中，通过上述对于能规划到一行的块进行的行规划以及对于能规划到一列的块进行的列规划的步骤，能够实现对网格布局参数各块的数据进行递归计算，从而实现较准确和快捷的网格布局参数转化。例如，当行列标志为行时，获取能够规划到一行的块之后，对其按照上述步骤进行行规划，其中当能规划到一行的块的个数为零或多个时，则这些块进行重复计算，即获取能规划到一行的块中能规划到一列的块并进行列规划(该递归计算采用的步骤对应于对能规划到一列的块进行的列规划)依次递归重复进行直到最终将网格布局参数完全按照行规划和列规划进行转化。

其中，行列标志能够用于确定上述递归循环过程起始时采用行规划还是列规划，因此在实际应用中可以对行列标志进行默认定义，例如默认行列标志为行，此时该方法中从网格布局参数中直接获取的为能规划到一行的块。

可选地，获取能规划到一行的块，如图5所示，包括：

步骤501：按横坐标小到大对各块进行排序。

步骤502：依次计算不同块组合后的高度是否能贯穿整行。

步骤503：将能贯穿整行的高度对应的组合包含的各块放入选中块集合，选中块集合中的各块作为能规划到一行的块。

通过上述步骤来获取网格布局参数各块中能规划到一行的块和/或获取能规划到一列的块中能规划到一行的块，相对准确且能够较好的获取到可规划为行列布局参数中行参数的块。

在本实施例中，获取能够规划到一列的块的步骤可以与上述对应，例如，按纵坐标小到大对各块进行排序；依次计算不同块组合后的长度是否能贯穿整行；将能贯穿整行的长度对应的组合包含的各块放入选中块集，选中块集合中的各块作为能规划到一列的块。

可选地，解析行列布局参数并建立节点与各类组件间的关系，如图6所示，包括：

步骤601：解析行列布局参数为DOM结构，并给每个节点赋予12栅格体系的行列参数。

步骤602：建立节点与各类组件间的关系。

将行列布局参数解析为DOM结构，并给每个节点赋予12 栅格体系的行列参数，能够将行列布局解析为12栅格行列布局，使浏览器解析DOM结构后的页面具备较好的响应式布局的能力。

本发明实施例的另一方面，提供一种web界面定制装置，如图7所示，包括：网格布局定制模块11，用于根据web界面布局定义网格布局参数；

行列布局转化模块12，用于根据网格布局参数的行列标志及各块的数据将网格布局参数转化为行列布局参数；

行列布局解析模块13，用于解析行列布局参数并建立节点与各类组件间的关系；

组件渲染模块14，用于响应各类型组件并进行视觉渲染。

可选地，行列布局转化模块12，具体用于判断网格布局参数的行列标志；若行列标志为行，则获取能够规划到一行的块并进行行规划；若行列标志为列，则获取能够规划到一列的块并进行列规划；根据行规划和列规划形成行列布局参数的行参数和列参数。

可选地，如图8所示，行列布局转化模块12包括行列规划子模块121；行列规划子模块121，用于若行列标志为行，获取能规划到一行的块；判断能规划到一行的块的个数；若个数为一个，则将能规划到一行的块放入行列布局参数的行参数中；若个数为零个或多个，则获取能规划到一行的块中能规划到一列的块并进行列规划；若行列标志为列，获取能规划到一列的块；判断能规划到一列的块的个数；若个数为一个，则将能规划到一列的块放入行列布局参数的列参数中；若个数为零个或多个，则获取能规划到一列的块中能规划到一行的块并进行行规划。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的装置的具体工作过程，可以参考前述方法实施例中方法的对应过程，本发明中不再赘述。

本发明实施例还提供一种电子设备，该电子设备可以是能够执行前述web界面定制方法的服务器、计算机等。

如图9所示，该电子设备可以包括处理器31、存储介质32 和总线(图中未示出)，存储介质32存储有处理器31可执行的机器可读指令，当电子设备运行时，处理器31与存储介质32 之间通过总线通信，处理器31执行机器可读指令，以执行如前述的web界面定制方法。具体实现方式和技术效果类似，在此不再赘述。

为了便于说明，在上述电子设备中仅描述了一个处理器。然而，应当注意，本发明中的电子设备还可以包括多个处理器，因此本发明中描述的一个处理器执行的步骤也可以由多个处理器联合执行或单独执行。例如，若电子设备的处理器执行步骤A 和步骤B，则应该理解，步骤A和步骤B也可以由两个不同的处理器共同执行或者在一个处理器中单独执行。例如，第一处理器执行步骤A，第二处理器执行步骤B，或者第一处理器和第二处理器共同执行步骤A和B等。

在一些实施例中，处理器可以包括一个或多个处理核(例如，单核处理器(S)或多核处理器(S))。仅作为举例，处理器可以包括中央处理单元(Central Processing Unit，CPU)、专用集成电路(Application Specific Integrated Circuit，ASIC)、专用指令集处理器(Application Specific Instruction-set Processor， ASIP)、图形处理单元(Graphics Processing Unit，GPU)、物理处理单元(Physics Processing Unit，PPU)、数字信号处理器 (Digital Signal Processor，DSP)、现场可编程门阵列(Field ProgrammableGate Array，FPGA)、可编程逻辑器件 (Programmable Logic Device，PLD)、控制器、微控制器单元、简化指令集计算机(Reduced Instruction Set Computing，RISC)、或微处理器等，或其任意组合。

本发明实施例还提供一种存储介质，存储介质上存储有计算机程序，计算机程序被处理器运行时执行如前述的web界面定制方法。具体实现方式和技术效果类似，在此同样不再赘述。

可选地，该存储介质可以是U盘、移动硬盘、ROM、RAM、磁碟或者光盘等。

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

Claims (10)

1.一种web界面定制方法，其特征在于，包括：

根据web界面布局定义网格布局参数；

根据所述网格布局参数的行列标志及各块的数据将所述网格布局参数转化为行列布局参数；

解析所述行列布局参数并建立节点与各类组件间的关系；

响应各类型所述组件并进行视觉渲染。

2.如权利要求1所述的web界面定制方法，其特征在于，所述根据所述网格布局参数的行列标志及各块的数据将所述网格布局参数转化为行列布局参数，包括：

判断所述网格布局参数的行列标志；

若所述行列标志为行，则获取能够规划到一行的块并进行行规划；

若所述行列标志为列，则获取能够规划到一列的块并进行列规划；

根据所述行规划和所述列规划形成所述行列布局参数的行参数和列参数。

3.如权利要求2所述的web界面定制方法，其特征在于，所述若所述行列标志为行，则获取能够规划到一行的块并进行行规划，包括：

获取所述能规划到一行的块；

判断所述能规划到一行的块的个数；

若个数为一个，则将所述能规划到一行的块放入所述行列布局参数的行参数中；

若个数为零个或多个，则获取所述能规划到一行的块中能规划到一列的块并进行列规划；

相应地，若所述行列标志为列，则获取能够规划到一列的块并进行列规划，包括：

获取所述能规划到一列的块；

判断所述能规划到一列的块的个数；

若个数为一个，则将所述能规划到一列的块放入所述行列布局参数的列参数中；

若个数为零个或多个，则获取所述能规划到一列的块中能规划到一行的块并进行行规划。

4.如权利要求3任一项所述的web界面定制方法，其特征在于，所述获取所述能规划到一行的块，包括：

按横坐标小到大对各块进行排序；

依次计算不同块组合后的高度是否能贯穿整行；

将能贯穿整行的所述高度对应的组合包含的各块放入选中块集合，所述选中块集合中的各块作为所述能规划到一行的块。

5.如权利要求1至4任一项所述的web界面定制方法，其特征在于，所述解析所述行列布局参数并建立节点与各类组件间的关系，包括：

解析所述行列布局参数为DOM结构，并给每个节点赋予12栅格体系的行列参数；

建立节点与各类组件间的关系。

6.如权利要求1所述的web界面定制装置，其特征在于，包括：

网格布局定制模块，用于根据web界面布局定义网格布局参数；

行列布局转化模块，用于根据所述网格布局参数的行列标志及各块的数据将所述网格布局参数转化为行列布局参数；

行列布局解析模块，用于解析所述行列布局参数并建立节点与各类组件间的关系；

组件渲染模块，用于响应各类型所述组件并进行视觉渲染。

7.如权利要求6所述的web界面定制装置，其特征在于，所述行列布局转化模块，具体用于判断所述网格布局参数的行列标志；若所述行列标志为行，则获取能够规划到一行的块并进行行规划；若所述行列标志为列，则获取能够规划到一列的块并进行列规划；根据所述行规划和所述列规划形成所述行列布局参数的行参数和列参数。

8.如权利要求7所述的web界面定制装置，其特征在于，所述行列布局转化模块包括行列规划子模块；所述行列规划子模块，用于若所述行列标志为行，获取所述能规划到一行的块；判断所述能规划到一行的块的个数；若个数为一个，则将所述能规划到一行的块放入所述行列布局参数的行参数中；若个数为零个或多个，则获取所述能规划到一行的块中能规划到一列的块并进行列规划；若所述行列标志为列，获取所述能规划到一列的块；判断所述能规划到一列的块的个数；若个数为一个，则将所述能规划到一列的块放入所述行列布局参数的列参数中；若个数为零个或多个，则获取所述能规划到一列的块中能规划到一行的块并进行行规划。

9.一种电子设备，其特征在于，包括处理器、存储介质和总线，所述存储介质存储有所述处理器可执行的机器可读指令，当电子设备运行时，所述处理器与所述存储介质之间通过所述总线通信，所述处理器执行所述机器可读指令，以执行如权利要求1-5任一项所述的方法。

10.一种存储介质，其特征在于，所述存储介质上存储有计算机程序，所述计算机程序被处理器运行时执行如权利要求1-5任一项所述的方法。

Images