页面渲染方法、装置、存储介质及计算机设备与流程

1.本发明涉及信息处理领域，尤其是涉及一种页面渲染方法、装置、存储 介质及计算机设备。


背景技术：

2.目前，开发人员多使用内容管理系统(content management system.cms) 进行网页开发。其中，cms是一种位于全球广域网前端和后端办公系统或流 程之间的软件系统，该系统是通过数据驱动的，也即通过动态页面实现内容 管理，具体地，开发者使用模板语法，针对静态页面中的内容进行有变量替 换和重写，在服务器端程序中编写对应的数据模型，同时在数据库中建表以 存储对应的数据，当访问者访问对应的网站时，服务器端从数据库中读取对 应的数据，将页面动态渲染并返回客户端。cms系统可以为开发人员提供一 种针对全球广域网或者手机应用程序等c端视图内容进行管理的方式。
3.然而，目前市场上主流的内容管理系统通常都以组件流式布局呈现。在 进行页面搭建渲染时需要根据页面的源代码，设置所有元素在页面的具体位 置，然后获取每个页面元素的尺寸信息和每个页面元素的坐标并进行渲染。 这就导致现有的页面搭建渲染方法对业务组件的定制化要求极高，而业务组 件通常体量较大，导致搭建页面的自由度与灵活性较为欠缺，在进行搭建渲 染时的所需的工作量较大。


技术实现要素：

4.有鉴于此，本技术提供了一种页面渲染方法、装置、存储介质及计算机 设备，主要目的在于解决页面搭建渲染时所需的工作量较大的问题。
5.根据本发明的第一个方面，提供了一种页面渲染方法，应用于内容管理 系统，该方法包括：
6.获取功能组件的组件信息和关联信息，其中，所述组件信息包括组件编 号、高度信息以及宽度信息，所述关联信息包括父级组件编号和子级组件的 关联关系；
7.基于每个所述功能组件的组件信息和关联信息，得到与每个所述功能组 件对应的基础二维数组，其中，所述基础二维数组包含组件信息和关联信息；
8.将每个所述基础二维数组按照所述关联信息整合成目标二维数组；
9.基于所述目标二维数组得到渲染参数并进行渲染，得到目标页面。
10.根据本发明的第二个方面，提供了一种页面渲染装置，该装置包括：
11.信息获取模块，用于获取功能组件的组件信息和关联信息，其中，所述 组件信息包括组件编号、高度信息以及宽度信息，所述关联信息包括父级组 件编号和子级组件的关联关系；
12.数组生成模块，用于基于每个所述功能组件的组件信息和关联信息，得 到与每个所述功能组件对应的基础二维数组，其中，所述基础二维数组包含 组件信息和关联信息；
13.数组整合模块，用于将每个所述基础二维数组按照所述关联信息整合成 目标二
维数组；
14.渲染执行模块，用于基于所述目标二维数组得到渲染参数并进行渲染， 得到目标页面。
15.根据本发明的第三个方面，提供了一种存储介质，其上存储有计算机程 序，所述程序被处理器执行时实现上述页面渲染方法。
16.根据本发明的第四个方面，提供了一种计算机设备，包括存储器、处理 器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所 述程序时实现上述页面渲染方法。
17.本发明提供的一种页面渲染方法、装置、存储介质及计算机设备，首先， 通过获取每个组件的组件编号、高度信息以及宽度信息，得到每个功能组件 的空间属性信息。随后，获取每个功能组件的父级组件编号以及子级组件的 关联关系，以确认功能组件间的相互关系。进一步的，根据每个功能组件的 组件编号、高度信息、宽度信息、父级组件编号以及子级组件的关联关系信 息，得到与每个组件对应的基础二维数组，并将得到的基础二维数组按照根 据父级组件与子级组件间的关联关系逐级组整合成包含所有的功能模块信息 的目标二维数组，最后，基于目标二维数组对页面进行搭建渲染，得到目标 页面。与现有的根据页面的源代码，设置所有元素在页面的具体位置，并获 取每个页面元素的尺寸信息和每个页面元素的坐标对页面进行渲染的方法相 比，上述方法不需要基于源代码对组件在页面中的具体位置进行设置，因此 能够极大的降低页面搭建渲染时的所需的工作量，提高页面搭建渲染的效率。
18.上述说明仅是本技术技术方案的概述，为了能够更清楚了解本技术的技 术手段，而可依照说明书的内容予以实施，并且为了让本技术的上述和其它 目的、特征和优点能够更明显易懂，以下特举本技术的具体实施方式。
附图说明
19.此处所说明的附图用来提供对本发明的进一步理解，构成本技术的一部 分，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的 不当限定。在附图中：
20.图1示出了本发明实施例提供的一种页面渲染方法的流程示意图；
21.图2示出了本发明实施例提供的一种页面渲染装置的结构示意图；
22.图3示出了本发明实施例提供的另一种页面渲染装置的结构示意图。
具体实施方式
23.下文中将参考附图并结合实施例来详细说明本发明。需要说明的是，在 不冲突的情况下，本技术中的实施例及实施例中的特征可以相互组合。
24.目前市场上主流的内容管理系统通常都以组件流式布局呈现。在进行页 面搭建渲染工作时，需要根据页面的源代码，设置所有组件在页面的具体位 置，然后分别获取每个页面组件的尺寸信息和每个页面组件的坐标并进行渲 染。因此，在进行页面搭建渲染时，对相关组件的定制化要求极高，具体业 务组件无法拆分成颗粒度更小的组件形式，运营的操作空间较小，导致在搭 建页面的工作缺乏自由度与灵活性。因此，现有的面搭建渲染方法在进行搭 建渲染时的所需的工作量较大，无法将开发人员从繁杂冗余的业务代码
中解 救出去。
25.在一个实施例中，如图1所示，提供了一种页面渲染方法，以该方法应 用于计算机设备为例进行说明，包括以下步骤：
26.101、获取功能组件的组件信息和关联信息。
27.其中，所述组件信息包括组件编号、高度信息以及宽度信息，所述关联 信息包括父级组件编号和子级组件的关联关系。此外，父级组件编号为指向 此功能组件的父级功能组件的组件编号，用于指示父级组件与子级组件的层 级关系。
28.进一步的，组件编号可以为组件的编号(identity document.id)，高度信 息可以包括功能组件的高度值与最小高度值，宽度信息可以包括功能组件的 宽度值与最小宽度值。功能组件的组件编号、高度信息以及宽度信息可以在 对功能组件的形式与参数进行设计时，根据实际情况标定。进一步的，关联 关系可以包括嵌套关系、流式关系、横向关系、绝对定位以及锚点关系。功 能组件间具体的关联关系可以在页面创建工作之初进行确定。
29.102、基于每个所述功能组件的组件信息和关联信息，得到与每个所述功 能组件对应的基础二维数组。
30.其中，所述基础二维数组包含组件信息和关联信息。在实际情况下，可 以为不同的关联关系设置不同的关联序号。如，将嵌套关系的关联序号设置 为1，将流式关系的关联序号设置为2，将绝对定位的关联序号设置为3，将 锚点关系的关联序号设置为4，将横向关系的关联序号设置为5。
31.具体的，根据功能组件的组件编号、高度值、最小高度值、宽度值与最 小宽度值、父级组件编号以及关联关系，得到每个功能组件的基础二维数组。 作为示例，以高度值为100，最小高度值为50，宽度值为100，最小宽度值为 50，组件编号为2，父级组件编号为1，关联关系为嵌套关系的功能组件为例， 其基础二维数组为：
32.[{height:100
[0033]
minwidth:50
[0034]
minheight:50
[0035]
type：1
[0036]
width:100
[0037]
id：2
[0038]
parentnode：1},]
[0039]
其中，type为关联关系的关联序号，height为高度值，width为宽度值， minheight为最小高度值，minwidth为最小宽度值，id为组件编号，parentnode 为父级组件编号。
[0040]
在本实施例中，将各个功能组件的组件编号、宽度信息、高度信息以及 包含组件间关系的父级组件编号和子级组件的关联关系整合进基础二维数组， 可以基于基础二维数组表征功能组件的组件信息和关联信息，以进一步实现 功能组件间的智能化组合与布局。
[0041]
103、将每个所述基础二维数组按照所述关联信息整合成目标二维数组。
[0042]
具体的，可以首先在多个基础二维数组中确定出最高级的父级组件的基 础二维数组，其中，最高级的父级组件是指父级组件编号缺省的功能组件， 也称为一级组件，然后按照层级关系，逐级将具有关联关系的功能组件的基 础二维数组逐级整合进最高级的父
级组件的基础二维数组中，得到整合后的 目标二维数组。在本实施例中，目标二维数组包含具有关联关系的全部功能 组件的组件编号、宽度信息、高度信息以及包含组件间关系的父级组件编号 和子级组件的关联关系。若将要进行渲染的页面内包含多个最高级的父级组 件(一级组件)，则需要按照上述方式，得到多个目标二维数组，以供后续 的页面渲染工作时使用。
[0043]
104、基于所述目标二维数组得到渲染参数并进行渲染，得到目标页面。
[0044]
具体的，将目标二维数组中包含的各功能组件的高度值、宽度值、最小 高度值以及最小宽度值作为功能组件的空间渲染参数。同时，基于各基础二 维数组在目标二维数组中的位置，以及所包含的各功能组件的组件编号、父 级组件编号以及关联序号，确定出各功能组件在页面上的相互关系，可以在 布画中渲染出符合要求的目标页面。
[0045]
本实施例提供的页面渲染方法，首先，通过获取每个组件的组件编号、 高度信息以及宽度信息，得到每个功能组件的空间属性信息。随后，获取每 个功能组件的父级组件编号以及子级组件的关联关系，以确认功能组件间的 相互关系。进一步的，根据每个功能组件的组件编号、高度信息、宽度信息、 父级组件编号以及子级组件的关联关系信息，得到与每个功能组件对应的基 础二维数组，并将得到的基础二维数组按照根据父级组件与子级组件间的关 联关系逐级组整合成包含所有功能模块信息的目标二维数组，最后，基于目 标二维数组对页面进行搭建渲染，得到目标页面。与现有的根据页面的源代 码，设置所有元素在页面的具体位置，并获取每个页面元素的尺寸信息和每 个页面元素的坐标对页面进行渲染的方法相比，上述方法不需要基于源代码 对组件在页面中的具体位置进行设置，因此能够极大的降低页面搭建渲染时 的所需的工作量。
[0046]
在一个实施例中，上述步骤104之前，页面渲染方法还包括：首先，对 每个所述功能组件的组件信息以及关联信息进行监听。在本实施例中，因为 在进行页面搭建时可能会对某些功能组件的细节进行修改，比如说对某个功 能组件的宽度信息、功能模块间的关联关系进行调整，或者加入或删除某些 功能组件。对每个功能组件进行监听可以实时获得页面中功能组件的变化信 息，并为后续的基础二维数组调整提供数据基础。进一步的，若所述功能组 件的组件信息和/或关联信息发生变化，则将变化后的组件信息和/或关联信息 整合到与所述功能组件对应的基础二维数组中，并再次执行所述将每个所述 基础二维数组按照所述关联信息整合成目标二维数组的步骤。具体的，获取 变化后的功能模块的组件信息和关联信息，提取变化后的组件编号、高度信 息、宽度信息以及父级组件编号和子级组件的关联关系等数据，并基于上述 变化的数据对变化前的功能模块的基础二维数组进行修改，得到获取变化后 的功能模块的基础二维数组。随后，基于变化后的功能模块的基础二维数组， 可以重新执行步骤103得到修改后的目标二维数组。此外，也可以在执行步 骤103之前，对每个所述功能组件的组件信息以及关联信息进行监听。若所 述功能组件的组件信息和/或关联信息发生变化，则将变化后的组件信息和/ 或关联信息整合到与所述功能组件对应的基础二维数组中。基于此，本实施 例可以从得到基础二维数组到进行页面渲染之间的全部时段，对功能组件的 组件信息以及关联信息进行监听及修正，从而可以实时的对基础二维数组进 行调整，进而得到调整后的目标二维数组。在本实施例中，监听页面中各功 能模块的变化，实时对现有的基础二维数组进行调整，得到修改后的目标二 维数组，进一步减少了对功能模块进行调整时所需的工作量。
[0047]
在一个实施例中，上述步骤103可以通过以下步骤实现：首先，基于所 述功能组件的关联信息确定至少一个一级组件。其中，所述一级组件为父级 组件编号缺省的功能组件。具体的，可以基于每个功能组件的关联信息状态 进行判断，若该功能组件的父级组件编号为缺省，则说明该功能组件不存在 与高一级的父级组件的关联关系，该功能组件为最高级的功能组件，可以判 断该功能组件为一级组件。然后，按照所述一级组件的组件编号，选择所述 父级组件编号与所述一级组件的组件编号相同的功能组件，并将所述功能组 件的基础二维数组与所述一级组件的基础二维数组进行整合，得到过程二维 数组。具体的，若某个功能组件的基础二维数组为：
[0048]
{type:2,
[0049]
id:1,
[0050]
width:100,
[0051]
height:100,
[0052]
minwidth:100,
[0053]
minheight:100,}
[0054]
因为，该功能模块中父级组件编号为缺省，则判定该功能组件为一级组 件。
[0055]
若另外一个功能组件的基础二维数组为：
[0056]
{type:1,
[0057]
id:5,
[0058]
width:50,
[0059]
height:50,
[0060]
minwidth:50,
[0061]
minheight:50,
[0062]
parentnode：1}
[0063]
该功能模块的父级组件编号与一级组件的组件编号相同，则可以判定该 一级模块为此功能模块的父级模块，进一步的，可以将该功能模块的基础二 维数组与该一级模块的基础二维数组整合，得到过程二维数组。作为示例， 过程二维数组为：
[0064]
{type:2,
[0065]
id:1,
[0066]
width:100,
[0067]
height:100,
[0068]
minwidth:100,
[0069]
minheight:100,
[0070]
children:[
[0071]
{type:1,
[0072]
id:5,
[0073]
parentnode:1,
[0074]
width:50,
[0075]
height:50,
[0076]
minwidth:50,
[0077]
minheight:50,}
[0078]
然后，执行第一循环过程直至满足第一预设条件，其中，所述第一循环 过程包括：按照所述过程二维数组内包含的组件编号，选择所述父级组件编 号与所述组件编号相同的基础二维数组，并将所述过程二维数组与所述基础 二维数组进行整合，得到整合后的过程二维数组。其中，所述第一预设条件 为每个具有关联关系的所述基础二维数组都被整合到所述过程二维数组中。
[0079]
具体的，若存在两个基础二维数组，分别为：
[0080]
{type:1,
[0081]
id:3,
[0082]
parentnode:1,
[0083]
width:40,
[0084]
height:40,
[0085]
minwidth:40,
[0086]
minheight:40,}
[0087]
与
[0088]
{type:1,
[0089]
id:4,
[0090]
parentnode:5,
[0091]
width:20,
[0092]
height:20,
[0093]
minwidth:20,
[0094]
minheight:20,}
[0095]
二者的父级组件编号与目标二维数组中的组件编号相同，则将此二者的 基础二维数组整合进目标二维数组中，得到整合后的过程二维数组：
[0096]
[{type:2,
[0097]
id:1,
[0098]
width:100,
[0099]
height:100,
[0100]
minwidth:100,
[0101]
minheight:100,
[0102]
children:[
[0103]
{type:1,
[0104]
id:5,
[0105]
parentnode:1,
[0106]
width:50,
[0107]
height:50,
[0108]
minwidth:50,
[0109]
minheight:50,
[0110]
children:[{type:1,
[0111]
id:4,
[0112]
parentnode:5,
[0113]
width:20,
[0114]
height:20,
[0115]
minwidth:20,
[0116]
minheight:20,},]},
[0117]
{type:1,
[0118]
id:3,
[0119]
parentnode:1,
[0120]
width:40,
[0121]
height:40,
[0122]
minwidth:40,
[0123]
minheight:40,},]
[0124]
重复上述步骤，直到每个具有关联关系的基础二维数组都被整合到过程 二维数组中。
[0125]
最后，将所述整合后的过程二维数组确定为所述一级组件的目标二维数 组。进一步的，若存在多个一级组件，则会得到多个目标二维数组。在本实 施例中，基于各功能组件的组件信息和关联信息将各功能组件的基础二维数 组逐级整合成至少一个目标二维数组，可以快速的整合页面中的全部功能组 件的相关信息，以供后续的页面渲染工作时使用。
[0126]
在一个实施例中，上述步骤104可以通过以下步骤实现：
[0127]
201，针对每个所述一级组件，获取所述一级组件的至少一个子级组件， 并对所述子级组件进行全排列，得到所述一级组件的纵向高度。
[0128]
具体的，一级组件的子级组件为父级组件编号为一级组件的组件编号的 功能组件，可以通过组件编号与父级组件编号确定每个一级组件的子级组件。 其中，纵向高度为所述一级组件中各子级组件组合成至少一个排列行所占用 的高度，用于表征一级组件中各子级组件排列出的纵向空间。其中，一个排 列行由至少一个子级组件组成，每个排列行具有预设的行高度。具体的，对 每个一级组件内的子级组件进行全排列，并基于由一级组件内包含的每个排 列行的行高度得到纵向高度。其中，行高度可以基于实际情况进行设定，也 可以将此排列行中高度信息最高的功能组件的高度信息确定为该排列行的行 高度。作为示例，若一级组件有3个排列行，而每个排列行的行高度为5，则 纵向高度为3*5＝15。
[0129]
202、基于所述一级组件的纵向高度和所述一级组件的宽度信息，得到每 个所述一级组件的坐标信息。
[0130]
具体的，可以根据所述一级组件的宽度信息确定所述一级组件的横向坐 标。在本实施例中，基于宽度信息得到每个一级组件在横向上所占用的横向 空间，得到每个一级组件的横向坐标。随后，基于所述一级组件的纵向高度， 确定所述一级组件的纵向坐标。在本实施例中，基于纵向高度得到每个一级 组件内的各子级组件在纵向空间上排列所占用的纵向空间，得到每个一级组 件的纵向坐标。最后，基于所述横向坐标以及所述纵向坐标，确
定所述一级 组件的坐标信息。在本实施例中，基于一级组件的横向坐标与纵向坐标的坐 标信息，可以得到各一级组件内子级组件在横向上以及纵向上的排布，为每 个一级组件的渲染工作提供空间排布上的基础信息。
[0131]
203、将每个所述一级组件的坐标信息和所述一级组件的目标二维数组整 合到所述渲染参数中。
[0132]
204、基于所述渲染参数进行渲染，得到目标页面。
[0133]
在本实施例中，首先，基于每个一级组件的横向坐标和纵向坐标得到关 于一级组件内子级组件排列方式的坐标信息，可以得到页面中各功能组件的 排列信息。随后，可以基于排列信息与包含组件信息和关联信息的目标二维 数组得到渲染参数，用于渲染得到目标页面，能够极大的降低页面搭建渲染 时的所需的工作量，增加了页面渲染效率。
[0134]
在一个实施例中，上述步骤201可以通过以下步骤实现：
[0135]
301、对所述一级组件的子级组件进行排列，得到包括至少一个所述子级 组件的目标排列行。
[0136]
其中，在所述目标排列行中，子级组件的组件宽度信息之和小于或等于 一级组件的宽度信息。同时，按照一级组件对应的目标二维数组中基础二维 数组的排列顺序，将位于排列顺序首位的基础二维数组所对应的子级组件， 确定为目标排列行内首位的子级组件。在本实施例中，各基础二维数组在目 标二维数组中的排列顺序可以由组件编号确定，可以按照各子级组件中组件 编号升序或降序顺序，将最小组件编号或最大组件编号的基础二维数组整合 到目标二维数组靠前的位置处。进一步的，在进行页面渲染时，在可以渲染 出满足宽度要求且特定的功能组件排在靠前位置的页面。作为示例，若某一 个一级组件的宽度信息为100，其包括组件编号分别为1、2、3、4和5的五 个子级组件，上述子级组件的宽度信息分别为50、70、30、50和20，高度信 息分别为20、30、30、60和40。对上述子级组件进行排列。在排列中，将组 件编号分为1的子级组件排列到目标排列行中靠前的位置。其中，组件编号 分别为1、3、5的子级组件的宽度信息之和为100，不超过一级组件的宽度信 息，则将组件编号分别1、3、5的子级组件确定为目标排列行。
[0137]
302、将所述目标排列行中高度信息最大的子级组件的高度信息确定为所 述目标排列行的行高度。
[0138]
作为示例，若组件编号分别为1、3、5的子级组件的高度信息分别为20、 30、40，则将组件编号为5的子级组件的高度信息40确定为目标排列行的行 高度。
[0139]
303、将除了所述目标排列行之外的其他的排列行确定为非目标排列行， 并根据所述非目标排列行内的子级组件的高度信息确定为所述非目标排列行 的行高度。
[0140]
其中，该一级组件内的部分子级组件被构建为目标排列行后，若存在剩 余的子级组件，则对各剩余的子级组件进行排列，得到非目标排列行。子级 组件排列成非目标排列行的方式与子级组件排列成目标排列行的方式相同。 进一步的，可以将非目标排列行中高度信息最大的子级组件的高度信息确定 为非目标排列行的行高度。作为示例，在得到目标排列行后，剩余组件编号 分别为2、4的子级组件。这两个子级组件的宽度信息之和大于100。所以， 分别将组件编号为2、4的子级组件作为非目标排列行，由组件编号为2的子 级组件构成的非目标排列行的行高度为30，由组件编号为4的子级组件构成 的非目标排列行的行高度为60。随后，将非目标排列行设置在目标排列行的 下方位置。
[0141]
304、根据所述目标排列行的行高度以及所述非目标排列行的行高度，确 定所述一级组件的纵向高度。
[0142]
作为示例，目标排列行的行高度为40，两个非目标排列行的行高度分别 为30和40，则一级组件的纵向高度为两个非目标排列行的行高度与目标排列 行的行高度之和，为110。
[0143]
在本实施例中，基于每个一级组间件内排列行的数量，以及每个排列行 的行高度，可以得到每个一级组件内的各子级组件在页面上排列的纵向空间 的大小，得到各一级组件的纵向排布形式。
[0144]
在一个实施例中，上述步骤301可以通过以下步骤实现：
[0145]
首先，在所述一级组件的子级组件中，按照所述一级组件的目标二维数 组内的基础二维数组的排列顺序，选择出位于所述排列顺序首位的基础二维 数组，并将所述基础二维数组对应的子级组件作为第一组件。具体的，在一 级组件的各个子级组件中，选择排列在目标二维数组内首位的基础二维数组 对应的子级组件作为第一组件。作为示例，若某一个一级组件的宽度信息为 100，其包括组件编号分别为1、2、3、4和5的五个子级组件，上述子级组 件的宽度信息分别为50、70、30、50和20，高度信息分别为20、30、30、 60和40。若组件编号为1的子级组件的基础二维数组排列在目标二维数组的 首位，则可以将组件编号为1的子级组件作为第一组件。进一步的，若该一 级组件只包括一个子级组件，则可以直接将该子级组件确定为目标排列行。
[0146]
然后，执行第二循环过程直至满足第二预设条件，其中，所述第二预设 条件为每个所述子级组件均被选择过一次，所述第二循环过程包括：
[0147]
401、按照所述排列顺序选择一个子级组件，并将所述子级组件的宽度信 息与所述第一组件的宽度信息相加，得到组件宽度和。
[0148]
其中，每个所述子级组件只被选择一次。
[0149]
具体的，在组件编号为1的子级组件被确定为第一组件的情况下，从组 件编号为2、3、4和5的功能组件中选择一个功能组件将该功能组件的宽度 信息与第一组件的宽度信息作求和运算，得到组件宽度和。
[0150]
作为示例，若在目标二维数组中，除组件编号为1的基础二维数组外， 组件编号为2、3、4和5的功能组件所对应的基础二维数组依次排列在组件 编号为1的基础二维数组之后，则选择组件编号为2的子级模块，将选择的 子级组件的宽度信息与第一组件的宽度信息相加，得到的组件宽度和为120。
[0151]
402、判断所述组件宽度和是否小于所述一级组件的宽度信息。
[0152]
作为示例，若步骤401中选取的是组件编号为2的功能组件，则计算得 到的组件宽度和为120，大于一级组件的宽度信息。
[0153]
进一步的，若组件宽度和大于所述一级组件的宽度信息，则将选取的子 级组件舍去。随后，基于剩余的子级组件，再次执行步骤401。
[0154]
403、若所述组件宽度和小于所述一级组件的宽度信息，则按照所述排列 顺序选择一个子级组件，并将所述子级组件的宽度信息与所述组件宽度和相 加，得到相加后的组件宽度和，并执行所述判断所述组件宽度和是否小于所 述一级组件的宽度信息的步骤。此外，若当前的组件宽度和等于所述一级组 件的宽度信息，则直接将当前选择的包括第一组
件在内的子级组件作为目标 排列行。
[0155]
作为示例，若步骤401中选取的是组件编号为3的功能组件，计算得到 的组件宽度和为80，小于一级组件的宽度信息，则按照所述的排列顺序，基 于组件编号为4和5的子级组件，再次执行步骤401。按照上述方式，最终会 选择出组件编号为1、3、5的子级组件。
[0156]
其中，所述第二预设条件为每个所述子级组件均被选择过一次。
[0157]
具体的，若2、3、4和5的四个子级组件均被选择过一次，则判定第二 循环过程满足第二预设条件，得到最终的组件宽度和。
[0158]
404、将所述第一组件所在的排列行确定为所述目标排列行。
[0159]
作为示例，将组件编号为1、3、5的子级组件确定为目标排列行。
[0160]
此外，若该一级组件的目标排列行构建完成后，若存在剩余的子级组件， 则在剩余的子级组件中，按照上述的排列顺序选择对应的基础二维数组排列 在前的子级组件作为第一组件，并基于上述步骤401至403，对各剩余的子级 组件进行排列，并将第一组件所在的排列行确定为非目标排列行。重复上述 方式，直到剩余的所有子级组件都被构建成非目标排列行。
[0161]
在一个实施例中，上述步骤204之前，页面渲染方法还包括：首先，判 断每个所述一级组件是否具有坐标信息和目标二维数组。具体的，判断是否 通过步骤102和步骤103得到了每个一级组件的坐标信息和目标二维数组。 可以通过遍历全部一级组件，找出该一级组件的坐标信息和目标二维数组的 方式来实现。进一步的，若每个所述一级组件具有坐标信息和目标二维数组， 则执行所述基于所述渲染参数进行渲染，得到目标页面的步骤。若存在遍历 全部一级组件时，无法得到某个一级组件的坐标信息和目标二维数组，则重 新执行步骤102。在本实施例中，基于上述验证检测步骤，可以在出现运算错 误，导致没有得到每个一级组件的坐标信息和目标二维数组时，及时发现并 进行更正，避免了出现页面渲染错误的情况发生，增加了页面渲染效率。
[0162]
本实施例提供的页面渲染方法，首先，通过获取每个组件的组件编号、 高度信息以及宽度信息，得到每个功能组件的空间属性信息。随后，获取每 个功能组件的父级组件编号以及子级组件的关联关系，以确认功能组件间的 相互关系。进一步的，根据每个功能组件的组件编号、高度信息、宽度信息、 父级组件编号以及子级组件的关联关系信息，得到与每个组件对应的基础二 维数组，并将得到的基础二维数组按照根据父级组件与子级组件间的关联关 系逐级组整合成包含所有功能模块信息的目标二维数组。再后，对每个一级 组件内的子级组件进行全排列，得到关于包含一级组件内子级组件排列方式 的坐标信息，可以得到页面中各功能组件的排列信息。最后，基于目标二维 数组以及排列信息对页面进行搭建渲染，得到目标页面。与现有的根据页面 的源代码，设置所有元素在页面的具体位置，并获取每个页面元素的尺寸信 息和每个页面元素的坐标对页面进行渲染的方法相比，上述方法不需要基于 源代码对组件在页面中的具体位置进行设置，因此能够极大的降低页面搭建 渲染时的所需的工作量。
[0163]
进一步的，作为图1所示方法的具体实现，本实施例提供了一种页面渲 染装置，如图2所示，该装置包括：信息获取模块21、数组生成模块22、数 组整合模块23和渲染执行模块24。
[0164]
信息获取模块21，可用于获取功能组件的组件信息和关联信息，其中， 所述组件
信息包括组件编号、高度信息以及宽度信息，所述关联信息包括父 级组件编号和子级组件的关联关系；
[0165]
数组生成模块22，可用于基于每个所述功能组件的组件信息和关联信息， 得到与每个所述功能组件对应的基础二维数组，其中，所述基础二维数组包 含组件信息和关联信息；
[0166]
数组整合模块23，可用于将每个所述基础二维数组按照所述关联信息整 合成目标二维数组；
[0167]
渲染执行模块24，可用于基于所述目标二维数组得到渲染参数并进行渲 染，得到目标页面。
[0168]
在具体的应用场景中，所述数组整合模块23，具体可用于基于所述功能 组件的关联信息确定至少一个一级组件，其中，所述一级组件为父级组件编 号缺省的功能组件；按照所述一级组件的组件编号，选择所述父级组件编号 与所述一级组件的组件编号相同的功能组件，并将所述功能组件的基础二维 数组与所述一级组件的基础二维数组进行整合，得到过程二维数组；执行第 一循环过程直至满足第一预设条件，其中，所述第一循环过程包括：按照所 述过程二维数组内包含的组件编号，选择所述父级组件编号与所述组件编号 相同的基础二维数组，并将所述过程二维数组与所述基础二维数组进行整合， 得到整合后的过程二维数组；其中，所述第一预设条件为每个具有关联关系 的所述基础二维数组都被整合到所述过程二维数组中；将所述整合后的过程 二维数组确定为所述一级组件的目标二维数组。
[0169]
在具体的应用场景中，所述渲染执行模块24，具体可用于针对每个所述 一级组件，获取所述一级组件的至少一个子级组件，并对所述子级组件进行 全排列，得到所述一级组件的纵向高度；基于所述一级组件的纵向高度和所 述一级组件的宽度信息，得到每个所述一级组件的坐标信息；将每个所述一 级组件的坐标信息和所述一级组件的目标二维数组整合到所述渲染参数中； 基于所述渲染参数进行渲染，得到目标页面。
[0170]
在具体的应用场景中，所述渲染执行模块24，还可以用于对所述一级组 件的子级组件进行排列，得到包括至少一个所述子级组件的目标排列行；将 所述目标排列行中高度信息最大的子级组件的高度信息确定为所述目标排列 行的行高度；将除了所述目标排列行之外的其他的排列行确定为非目标排列 行，并根据所述非目标排列行内的子级组件的高度信息确定为所述非目标排 列行的行高度；根据所述目标排列行的行高度以及所述非目标排列行的行高 度，确定所述一级组件的纵向高度。根据所述目标排列行以及所述非目标排 列行的行高度，确定所述一级组件的纵向高度。
[0171]
在具体的应用场景中，所述渲染执行模块24，还可以用于在所述一级组 件的子级组件中，按照所述一级组件的目标二维数组内的基础二维数组的排 列顺序，选择位于所述排列顺序首位的基础二维数组，并将所述基础二维数 组对应的子级组件作为第一组件；执行第二循环过程直至满足第二预设条件， 其中，所述第二循环过程包括：按照所述排列顺序选择一个子级组件，并将 所述子级组件的宽度信息与所述第一组件的宽度信息相加，得到组件宽度和， 其中，每个所述子级组件只被选择一次；；若所述组件宽度和小于所述一级 组件的宽度信息，则按照所述排列顺序选择一个子级组件，并将所述子级组 件的宽度信息与所述组件宽度和相加，得到相加后的组件宽度和，并执行所 述判断所述组件宽度和是否
小于所述一级组件的宽度信息的步骤；其中，所 述第二预设条件为每个所述子级组件均被选择过一次；将所述第一组件所在 的排列行确定为所述目标排列行。
[0172]
在具体的应用场景中，如图3所示，本装置还包括信息监听模块33，所 述信息监听模块33具体可用于对每个所述功能组件的组件信息以及关联信息 进行监听；若所述功能组件的组件信息和/或关联信息发生变化，则将变化后 的组件信息和/或关联信息整合到与所述功能组件对应的基础二维数组中，并 再次执行所述将每个所述基础二维数组按照所述关联信息整合成目标二维数 组的步骤。
[0173]
在具体的应用场景中，本装置还包括组件验证模块35，所述组件验证块 35具体可用于判断每个所述一级组件是否具有坐标信息和目标二维数组；若 每个所述一级组件具有坐标信息和目标二维数组，则执行所述基于所述渲染 参数进行渲染，得到目标页面的步骤。
[0174]
需要说明的是，本实施例提供的一种页面渲染装置所涉及各功能单元的 其它相应描述，可以参考图1中的对应描述，在此不再赘述。
[0175]
基于上述如图1所示方法，相应的，本实施例还提供了一种存储介质， 其上存储有计算机程序，该程序被处理器执行时实现上述如图1所示的页面 渲染方法。
[0176]
基于这样的理解，本技术的技术方案可以以软件产品的形式体现出来， 该待识别软件产品可以存储在一个非易失性存储介质(可以是cd-rom，u 盘，移动硬盘等)中，包括若干指令用以使得一台计算机设备(可以是个人 计算机，服务器，或者网络设备等)执行本技术各个实施场景所述的方法。
[0177]
基于上述如图1所示的方法，以及图2和图3所示的页面渲染装置实施 例，为了实现上述目的，本实施例还提供了一种页面渲染的实体设备，具体 可以为个人计算机、服务器、智能手机、平板电脑、智能手表、或者其它网 络设备等，该实体设备包括存储介质和处理器；存储介质，用于存储计算机 程序；处理器，用于执行计算机程序以实现上述如图1所示的方法。
[0178]
可选的，该实体设备还可以包括用户接口、网络接口、摄像头、射频(radiofrequency，rf)电路，传感器、音频电路、wi-fi模块等等。用户接口可以 包括显示屏(display)、输入单元比如键盘(keyboard)等，可选用户接口 还可以包括usb接口、读卡器接口等。网络接口可选的可以包括标准的有线 接口、无线接口(如wi-fi接口)等。
[0179]
本领域技术人员可以理解，本实施例提供的一种页面渲染的实体设备结 构并不构成对该实体设备的限定，可以包括更多或更少的部件，或者组合某 些部件，或者不同的部件布置。
[0180]
存储介质中还可以包括操作系统、网络通信模块。操作系统是管理上述 实体设备硬件和待识别软件资源的程序，支持信息处理程序以及其它待识别 软件和/或程序的运行。网络通信模块用于实现存储介质内部各组件之间的通 信，以及与信息处理实体设备中其它硬件和软件之间通信。
[0181]
通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到本申 请可以借助软件加必要的通用硬件平台的方式来实现，也可以通过硬件实现。 通过应用本技术的技术方案，首先，获取功能组件的组件信息和关联信息， 其中，所述组件信息包括组件编号、高度信息以及宽度信息，所述关联信息 包括父级组件编号和子级组件的关联关系。然
后，基于每个所述功能组件的 组件信息和关联信息，得到与每个所述功能组件对应的基础二维数组，其中， 所述基础二维数组包含组件信息和关联信息。随后，将每个所述基础二维数 组按照所述关联信息整合成目标二维数组。最后，基于所述目标二维数组得 到渲染参数并进行渲染，得到目标页面。与现有技术相比，能够极大的降低 页面搭建渲染时的所需的工作量。
[0182]
本领域技术人员可以理解附图只是一个优选实施场景的示意图，附图中 的模块或流程并不一定是实施本技术所必须的。本领域技术人员可以理解实 施场景中的装置中的模块可以按照实施场景描述进行分布于实施场景的装置 中，也可以进行相应变化位于不同于本实施场景的一个或多个装置中。上述 实施场景的模块可以合并为一个模块，也可以进一步拆分成多个子模块。
[0183]
上述本技术序号仅仅为了描述，不代表实施场景的优劣。以上公开的仅 为本技术的几个具体实施场景，但是，本技术并非局限于此，任何本领域的 技术人员能思之的变化都应落入本技术的保护范围。