CN110007999A - 页面布局方法、装置及计算机可读存储介质 - Google Patents

Abstract

本发明提供一种页面布局方法、装置及计算机可读存储介质，涉及互联网技术领域。所述方法包括：从预先设置的组件库中获取多个目标组件，根据预先设置的布局规则和多个所述目标组件，生成页面模板，根据所述页面模板，生成包括多个所述目标组件的页面。通过布局规则对目标组件在页面中的位置以及各个目标组件的大小进行调整，无需用户通过拖拽的方式手动调整各个组件，减少了用户调整各个组件所花费的时间，提高了对页面中各个组件进行布局、生成包括多个组件的页面的效率。

Description

页面布局方法、装置及计算机可读存储介质

技术领域

本发明涉及互联网技术领域，具体而言，涉及一种页面布局方法、装置及计算机可读存储介质。

背景技术

随着互联网技术的不断发展，可以采用在页面中通过添加不同组件的方式，实现数据可视化，从而更加清晰的向用户展示多种形式的信息。

相关技术中，在编辑页面的过程中，可以选中需要添加的组件，并对该组件的基础属性(如外观、可见和刷新率)以及与该组件对应的相关事件进行匹配，从而在页面中添加该组件。而且，可以通过手动拖拽的方式对各个组件的位置进行调整，从而实现对组件布局的调整。

但是，当页面中包括多个组件时，若采用手动拖拽的方式调整各个组件的位置，则花费时间较多，造成效率较低的问题。

发明内容

本发明的目的在于，针对上述现有技术中的不足，提供一种页面布局方法、装置及计算机可读存储介质，以解决对页面中的各个组件进行布局时，效率较低的问题。

为实现上述目的，本发明实施例采用的技术方案如下：

第一方面，本发明实施例提供了一种页面布局方法，所述方法包括：

从预先设置的组件库中获取多个目标组件；

根据预先设置的布局规则和多个所述目标组件，生成页面模板；

根据所述页面模板，生成包括多个所述目标组件的页面。

可选的，所述布局规则包括：位置规则、类型规则和数量规则；

所述根据预先设置的布局规则和多个所述目标组件，生成页面模板，包括：

确定多个所述目标组件中每个所述目标组件对应的类型；

根据所述类型规则和所述数量规则，结合每个所述目标组件对应的类型，以及每种类型的组件所对应的数量，按照所述位置规则对各个所述目标组件在页面中的位置进行调整，生成所述页面模板。

可选的，在所述根据所述页面模板，生成包括多个所述目标组件的页面之前，所述方法还包括：

在所述页面模板中填充与各个所述目标组件对应的组件图像，得到预览图像；

显示提醒消息，所述提醒消息用于提醒用户是否生成与所述预览图像相匹配的页面；

所述根据所述页面模板，生成包括多个所述目标组件的页面，包括：

若检测到用户基于所述提醒消息触发的确认操作，根据所述页面模板，生成包括多个所述目标组件、且与所述预览图像相匹配的页面。

可选的，在所述在所述页面模板中填充与各个所述目标组件对应的组件图像，得到预览图像之后，所述方法还包括：

若检测到用户触发的添加删除操作，根据所述添加删除操作对多个所述目标组件进行添加或删除，得到多个调整后的目标组件；

根据所述布局规则和多个所述调整后的目标组件，重新生成页面模板，得到调整后的页面模板；

在所述调整后的页面模板中填充与各个所述调整后的目标组件对应的组件图像，得到调整后的预览图像；

所述根据所述页面模板，生成包括多个所述目标组件的页面，还包括：

若检测到用户触发的确认操作，根据所述调整后的页面模板，生成包括多个所述调整后的目标组件、且与所述调整后的预览图像相匹配的页面。

可选的，在所述页面模板中填充与各个所述目标组件对应的组件图像，得到预览图像之后，所述方法还包括：

若检测到用户触发的移动操作，对所述预览图像中与所述移动操作相对应的目标组件的位置进行调整，得到调整后的预览图像；

所述根据所述页面模板，生成包括多个所述目标组件的页面，还包括：

若检测到用户触发的确认操作，根据所述页面模板，生成包括多个所述目标组件、且与所述调整后的预览图像相匹配的页面。

可选的，所述从预先设置的组件库中获取多个目标组件，包括：

获取待展示数据；

根据所述待展示数据的数据类型，从所述组件库中选取多个所述目标组件。

可选的，所述从预先设置的组件库中获取多个目标组件，包括：

检测用户触发的选择操作，所述选择操作用于选取所述目标组件；

将所述组件库中与所述选择操作相对应的组件作为所述目标组件。

可选的，在所述从预先设置的组件库中获取多个目标组件之前，所述方法还包括：

通过组件预览的方式，渲染得到包括多个渲染后的组件的组件库；

获取所述组件库中每个渲染后的组件对应的组件图像；

建立各个所述组件图像与相应渲染后的组件之间的对应关系。

第二方面，本发明实施例还提供了一种页面布局装置，所述装置包括：

第一获取模块，用于从预先设置的组件库中获取多个目标组件；

第一生成模块，用于根据预先设置的布局规则和多个所述目标组件，生成页面模板；

第二生成模块，用于根据所述页面模板，生成包括多个所述目标组件的页面。

可选的，所述布局规则包括：位置规则、类型规则和数量规则；

所述第一生成模块，具体用于确定多个所述目标组件中每个所述目标组件对应的类型；根据所述类型规则和所述数量规则，结合每个所述目标组件对应的类型，以及每种类型的组件所对应的数量，按照所述位置规则对各个所述目标组件在页面中的位置进行调整，生成所述页面模板。

可选的，所述装置还包括：

填充模块，用于在所述页面模板中填充与各个所述目标组件对应的组件图像，得到预览图像；

显示模块，用于显示提醒消息，所述提醒消息用于提醒用户是否生成与所述预览图像相匹配的页面；

所述第二生成模块，具体用于若检测到用户基于所述提醒消息触发的确认操作，根据所述页面模板，生成包括多个所述目标组件、且与所述预览图像相匹配的页面。

可选的，所述装置还包括：

添加删除模块，用于若检测到用户触发的添加删除操作，根据所述添加删除操作对多个所述目标组件进行添加或删除，得到多个调整后的目标组件；

所述第一生成模块，还用于根据所述布局规则和多个所述调整后的目标组件，重新生成页面模板，得到调整后的页面模板；

所述填充模块，还用于在所述调整后的页面模板中填充与各个所述调整后的目标组件对应的组件图像，得到调整后的预览图像；

所述第二生成模块，具体用于若检测到用户触发的确认操作，根据所述调整后的页面模板，生成包括多个所述调整后的目标组件、且与所述调整后的预览图像相匹配的页面。

可选的，所述装置还包括：

移动模块，用于若检测到用户触发的移动操作，对所述预览图像中与所述移动操作相对应的目标组件的位置进行调整，得到调整后的预览图像；

所述第二生成模块，具体用于若检测到用户触发的确认操作，根据所述页面模板，生成包括多个所述目标组件、且与所述调整后的预览图像相匹配的页面。

可选的，所述第一获取模块，具体用于获取待展示数据；根据所述待展示数据的数据类型，从所述组件库中选取多个所述目标组件。

可选的，所述第一获取模块，还具体用于检测用户触发的选择操作，所述选择操作用于选取所述目标组件；将所述组件库中与所述选择操作相对应的组件作为所述目标组件。

可选的，所述装置还包括：

渲染模块，用于通过组件预览的方式，渲染得到包括多个渲染后的组件的组件库；

第二获取模块，用于获取所述组件库中每个渲染后的组件对应的组件图像；

关系建立模块，用于建立各个所述组件图像与相应渲染后的组件之间的对应关系。

第三方面，本发明实施例还提供了一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器运行时执行如上述第一方面所述的页面布局方法的步骤。

本发明的有益效果是：

本发明实施例提供的方法及装置，通过从预先设置的组件库中获取多个目标组件，并根据预先设置的布局规则和多个目标组件，生成页面模板，最后根据页面模板，生成包括多个目标组件的页面。通过布局规则对目标组件在页面中的位置以及各个目标组件的大小进行调整，无需用户通过拖拽的方式手动调整各个组件，减少了用户调整各个组件所花费的时间，提高了对页面中各个组件进行布局、生成包括多个组件的页面的效率。

附图说明

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

图1为本发明一实施例提供的页面布局方法的流程示意图；

图2为本发明另一实施例提供的页面布局方法的流程示意图；

图3为本发明一实施例提供的页面布局装置的示意图；

图4为本发明另一实施例提供的页面布局装置的示意图；

图5为本发明又一实施例提供的页面布局装置的示意图；

图6为本发明又一实施例提供的页面布局装置的示意图；

图7为本发明又一实施例提供的页面布局装置的示意图；

图8为本发明一实施例提供的页面布局装置的示意图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。

图1为本发明一实施例提供的页面布局方法的流程示意图，如图1所示，该方法包括：

步骤101、从预先设置的组件库中获取多个目标组件。

其中，组件库中包括多个渲染得到的组件。

由于不同的页面需要向用户展示不同的数据，因此，在对页面中的各个组件进行布局之前，需要从组件库中选取多个目标组件，从而得到具有不同功能的页面，以便向用户展示不同的数据。

具体地，终端可以检测用户触发的操作，并根据用户触发的操作，从组件库中选取相对应的组件作为目标组件，以便在后续步骤中，可以根据各个目标组件完成对页面的布局。

例如，终端可以根据用户触发的选择操作，将与选择操作相对应的组件作为目标组件，也可以根据用户触发的输入操作，获取需要展示的待展示数据，终端则可以根据待展示数据的类型，选取目标组件。

当然，还可以通过其他方式选取目标组件，本发明实施例对此不做限定。例如，终端可以对用户触发的选择操作和输入操作进行结合，在根据用户触发的选择操作选取目标组件之后，结合待展示数据的类型，向用户推荐用户并未选择的、用于展示待展示数据的组件。

步骤102、根据预先设置的布局规则和多个目标组件，生成页面模板。

为了减少用户调整目标组件在页面中的位置所花费的时间，终端在确定多个目标组件后，可以根据布局规则对多个目标组件的位置进行设置，从而得到页面模板。

具体地，终端可以先确定各个目标组件的类型，并确定每种类型的目标组件的数量，最后根据布局规则，将不同类型的目标组件设置在页面的不同位置，并根据各种类型的目标组件的数量，对各个目标组件的大小进行调整，从而得到页面模板。

步骤103、根据页面模板，生成包括多个目标组件的页面。

在生成页面模板后，终端可以根据页面模板中每个目标组件所在的位置以及各个目标组件的大小，在页面中添加各个目标组件，从而得到包括各个目标组件的页面，实现对页面中各个目标组件的布局。

综上所述，本发明实施例提供的页面布局方法，通过从预先设置的组件库中获取多个目标组件，并根据预先设置的布局规则和多个目标组件，生成页面模板，最后根据页面模板，生成包括多个目标组件的页面。通过布局规则对目标组件在页面中的位置以及各个目标组件的大小进行调整，无需用户通过拖拽的方式手动调整各个组件，减少了用户调整各个组件所花费的时间，提高了对页面中各个组件进行布局、生成包括多个组件的页面的效率。

图2为本发明另一实施例提供的页面布局方法的流程示意图，如图2所示，该方法包括：

步骤201、渲染组件并获取各个渲染后的组件的组件图像。

用户在通过终端所加载的应用程序对页面中的各个组件进行布局，而在对各个组件进行布局之前，终端可以先对应用程序中的各个组件进行渲染，得到由各个渲染后的组件所组成的组件库，并获取各个渲染后的组件所对应的组件图像，以便在后续步骤中，可以根据各个渲染后的组件以及各个组件对应的组件图像，在页面中完成对各个组件的布局。

可选的，终端可以通过组件预览的方式，渲染得到包括多个渲染后的组件的组件库，并获取组件库中每个渲染后的组件对应的组件图像，再建立各个组件图像与相应渲染后的组件之间的对应关系。

具体地，在检测到用户启动应用程序后，终端可以通过组件预览的方式，对应用程序中的各个组件进行渲染，从而得到由多个组件形成的组件库。而且，渲染得到组件后，可以通过图片转换接口，获取各个组件的组件图像，从而将各个组件图像作为页面缓存，以便在后续步骤中，可以根据各个组件图像生成预览图像。

进一步地，终端还可以建立组件与组件图像之间的对应关系，以便在后续步骤中，可以根据页面所包括的组件，选取相对应的组件图像，从而生成预览图像。

步骤202、从预先设置的组件库中获取多个目标组件。

在渲染得到组件库后，终端可以检测用户触发的操作，并根据检测到的操作，从组件库中选取多个组件作为目标组件。但是，为了简化组件布局的步骤，可以采用不同的方式确定目标组件。

因此，步骤202可以包括步骤202a和/或步骤202b：

步骤202a、获取待展示数据，并根据待展示数据的数据类型，从组件库中选取多个目标组件。

为了提高页面布局的效率，减少用户操作的步骤，可以检测用户输入的待展示数据，并根据输入的待检测数据，从组件库中选取相匹配的组件作为目标组件。

具体地，终端可以检测用户触发的输入操作，获取输入的待展示数据，并根据用户触发的确认操作，对待展示数据进行提取分析，从而确定组件库中可以展示该待展示数据的组件，进而将确定的组件作为目标组件。

步骤202b、检测用户触发的选择操作，将组件库中与选择操作相对应的组件作为目标组件。

其中，选择操作用于选取目标组件。

为了使得对页面中各个组件的布局更加符合用户的期望，终端可以检测用户触发的选择操作，从而将与选择操作相对应的组件作为目标组件。

具体地，终端可以检测用户触发的选择操作，当检测到用户触发选择操作时，可以将选择操作在组件库中所选取的至少一个组件作为目标组件。其中，该选择操作可以为点击、拖拽或者其他类型的操作，本发明实施例对此不做限定。

需要说明的是，在实际应用中，用户可以触发多次选择操作，从而将多个组件选取为目标组件。因此，终端可以持续检测用户触发的选择操作，直至检测到用户触发第一确认操作时，将选取的各个组件作为目标组件。

进一步地，在执行步骤202a后，也可以继续执行步骤202b。例如，终端在检测到用户触发的输入操作后，可以根据输入的待展示数据选取目标组件，同时检测用户触发的选择操作，将用户添加的组件也作为目标组件。或者，终端在获取待展示数据后，根据用户触发的选择操作选取目标组件，在检测到用户触发的第一确认操作后，可以结合待展示数据向用户推荐组件库中用户并未选择的组件，从而根据用户再次触发的选择操作，将推荐的组件也作为目标组件。

步骤203、根据预先设置的布局规则和多个目标组件，生成页面模板。

其中，该布局规则可以包括：位置规则、类型规则和数量规则。

由于不同类型的组件可以设置在页面的不同位置，因此可以根据预先设置的布局规则，对多个目标组件在页面中的位置进行调整，从而得到用于生成页面的页面模板。

可选的，终端可以确定多个目标组件中每个目标组件对应的类型，并根据类型规则和数量规则，结合每个目标组件对应的类型，以及每种类型的组件所对应的数量，按照位置规则对各个目标组件在页面中的位置进行调整，生成页面模板。

具体地，终端可以先获取各个目标组件的类型，根据位置规则将不同类型的组件设置在页面的不同区域，同时可以确定每种类型的目标组件所对应的数量，并根据类型规则和数量规则确定各个目标组件的排布方式，从而将多个目标组件排布在页面中。

例如，该位置规则可以为：页面中央设置核心组件，页面左侧设置统计类组件，页面右侧设置趋势类组件，页面下方设置表格类组件；该数量规则可以为：按照相同类型的组件的数量，将各个组件等大小排布；而该类型规则可以为：第一类型的组件可以与第二类型的组件共同设置在页面的某个区域。

需要说明的是，若步骤203是根据步骤202a确定的目标组件，则可以不再执行步骤204至步骤206，而是在执行完毕步骤203后，执行步骤207，从而生成布局各个组件后的页面。

步骤204、在页面模板中填充与各个目标组件对应的组件图像，得到预览图像。

在得到页面模板后，终端可以根据页面模板生成预览图像，以便用户可以根据预览图像查看生成的页面中各个组件所在的位置，从而可以对各个组件的位置进行调整，以便在后续步骤中，可以得到满足用户期望的页面。

具体地，终端可以根据页面模板所包括的各个目标组件，结合组件与组件图像之间的对应关系，获取各个目标组件的组件图像，并根据页面模板中各个目标组件所在的位置，将不同目标组件对应的组件图像，填充在相应目标组件在页面模板中对应的位置，在对每个目标组件的组件图像填充完毕后，即可得到预览图像。

需要说明的是，若终端检测到用户触发的第二确认操作，则可以执行步骤207。但是，若终端检测到用户触发了添加删除操作或者移动操作，则说明用户需要对页面布局进行调整，可以执行步骤205。

步骤205、根据用户触发的操作，对页面模板和/或预览图像进行调整。

若终端在向用户展示预览界面后，检测到用户触发的添加删除操作，和/或，移动操作，则说明用户需要对页面布局再次进行调整，则终端可以根据用户触发的添加删除操作，或移动操作，对各个目标组件再次进行调整。

由于用户触发的操作可以包括：添加删除操作和移动操作，则步骤205可以可以包括步骤205a和步骤205b中的至少一个。

步骤205a、若检测到用户触发的添加删除操作，根据该添加删除操作对多个目标组件进行添加或删除，得到多个调整后的目标组件，并根据布局规则和多个调整后的目标组件，重新生成页面模板，得到调整后的页面模板，再在调整后的页面模板中填充与各个调整后的目标组件对应的组件图像，得到调整后的预览图像。

其中，该添加删除操作用于向页面模板中加入新的目标组件，或者，从页面模板中删除以及添加的目标组件。

具体地，若终端检测到用户触发的添加删除操作，可以根据该添加删除操作对页面模板中的目标组件进行添加或删除，从而得到调整后的目标组件，终端则可以根据调整后的目标组件，并结合布局规则，再次生成页面模板，从而得到调整后的页面模板，之后再次填充各个目标组件对应的组件图像，得到调整后的预览图像。

上述过程与步骤203至步骤204类似，在此不再赘述。

步骤205b、若检测到用户触发的移动操作，对预览图像中与移动操作相对应的目标组件的位置进行调整，得到调整后的预览图像。

若终端检测到用户触发的移动操作，则说明用户需要对各个目标组件的位置进行调整，因此，终端可以根据移动操作，对各个组件的位置进行互换。

具体地，终端可以确定移动操作开始所选定的目标组件，并检测移动操作的滑动轨迹，再根据该滑动轨迹的末端所在的区域，将该区域中的目标组件与开始选定的目标组件之间的位置进行互换，从而实现对各个目标组件的位置的调整。

需要说明的是，在实际应用中，终端可以仅执行一次步骤205a或步骤205b，也可以多次执行步骤205a，和/或步骤205b，也即是用户多次对目标组件的数量和位置进行调整。当终端检测到用户触发的第三确认操作时，说明用户不再对目标组件进行调整，则可以执行步骤206。

步骤206、显示提醒消息。

其中，该提醒消息用于提醒用户是否生成与预览图像相匹配的页面。

在用户对各个目标组件调整完毕后，终端可以向用户确认是否按照预览界面生成布局后的页面。因此，终端可以显示提醒消息，以便根据用户触发的消息。

例如，该提醒消息可以为“是否按照预览界面生成布局后的页面？”，并向用户提供选项“是”和选项“否”，若检测到用户选择选项“是”，则可以执行步骤207，但是，若检测到用户选择选项“否”，则可以再次执行步骤205和步骤206，直至用户选择选项“是”。

步骤207、根据页面模板，生成包括多个目标组件的页面。

由于步骤205对页面模板进行了调整，因此，本步骤207可以根据不同的页面模板，生成不同的页面。相应的，步骤207可以为步骤207a、步骤207b或步骤207c中的任意一个：

步骤207a、若检测到用户基于提醒消息触发的确认操作，根据所述页面模板，生成包括多个目标组件、且与预览图像相匹配的页面。

与步骤204相对应的，若用户并未对预览界面中的各个组件进行调整，则可以执行步骤207a，根据第一次生成的预览界面生成组件布局后的页面。

步骤207b、若检测到用户触发的确认操作，根据调整后的页面模板，生成包括多个调整后的目标组件、且与调整后的预览图像相匹配的页面。

与步骤205a相对应的，若用户对各个目标组件进行了添加或删除，则可以根据调整后的目标组件和调整后的预览图像，生成相匹配的页面。

步骤207c、若检测到用户触发的确认操作，根据页面模板，生成包括多个目标组件、且与调整后的预览图像相匹配的页面。

与步骤205b相对应的，用户仅对目标组件的位置进行了调整，但是并未对目标组件进行添加或删除，则可以根据调整后的预览界面中各个目标组件的位置，生成相匹配的页面。

由于步骤207a、步骤207b和步骤207c中生成页面的过程，与步骤103中生成页面的过程类似，在此不再赘述。

综上所述，本发明实施例提供的页面布局方法，通过从预先设置的组件库中获取多个目标组件，并根据预先设置的布局规则和多个目标组件，生成页面模板，最后根据页面模板，生成包括多个目标组件的页面。通过布局规则对目标组件在页面中的位置以及各个目标组件的大小进行调整，无需用户通过拖拽的方式手动调整各个组件，减少了用户调整各个组件所花费的时间，提高了对页面中各个组件进行布局、生成包括多个组件的页面的效率。

图3为本发明一实施例提供的页面布局装置的示意图，如图3所示，该装置具体包括：

第一获取模块301，用于从预先设置的组件库中获取多个目标组件；

第一生成模块302，用于根据预先设置的布局规则和多个该目标组件，生成页面模板；

第二生成模块303，用于根据该页面模板，生成包括多个该目标组件的页面。

可选的，该布局规则包括：位置规则、类型规则和数量规则；

该第一生成模块302，具体用于确定多个该目标组件中每个该目标组件对应的类型；根据该类型规则和该数量规则，结合每个该目标组件对应的类型，以及每种类型的组件所对应的数量，按照该位置规则对各个该目标组件在页面中的位置进行调整，生成该页面模板。

可选的，如图4所示，该装置还包括：

填充模块304，用于在该页面模板中填充与各个该目标组件对应的组件图像，得到预览图像；

显示模块305，用于显示提醒消息，该提醒消息用于提醒用户是否生成与该预览图像相匹配的页面；

该第二生成模块303，具体用于若检测到用户基于该提醒消息触发的确认操作，根据该页面模板，生成包括多个该目标组件、且与该预览图像相匹配的页面。

可选的，如图5所示，该装置还包括：

添加删除模块306，用于若检测到用户触发的添加删除操作，根据该添加删除操作对多个该目标组件进行添加或删除，得到多个调整后的目标组件；

该第一生成模块302，还用于根据该布局规则和多个该调整后的目标组件，重新生成页面模板，得到调整后的页面模板；

该填充模块304，还用于在该调整后的页面模板中填充与各个该调整后的目标组件对应的组件图像，得到调整后的预览图像；

该第二生成模块303，具体用于若检测到用户触发的确认操作，根据该调整后的页面模板，生成包括多个该调整后的目标组件、且与该调整后的预览图像相匹配的页面。

可选的，如图6所示，该装置还包括：

移动模块307，用于若检测到用户触发的移动操作，对该预览图像中与该移动操作相对应的目标组件的位置进行调整，得到调整后的预览图像；

该第二生成模块303，具体用于若检测到用户触发的确认操作，根据该页面模板，生成包括多个该目标组件、且与该调整后的预览图像相匹配的页面。

可选的，该第一获取模块301，具体用于获取待展示数据；根据该待展示数据的数据类型，从该组件库中选取多个该目标组件。

可选的，该第一获取模块301，还具体用于检测用户触发的选择操作，该选择操作用于选取该目标组件；将该组件库中与该选择操作相对应的组件作为该目标组件。

可选的，如图7所示，该装置还包括：

渲染模块308，用于通过组件预览的方式，渲染得到包括多个渲染后的组件的组件库；

第二获取模块309，用于获取该组件库中每个渲染后的组件对应的组件图像；

关系建立模块310，用于建立各个该组件图像与相应渲染后的组件之间的对应关系。

综上所述，本发明实施例提供的页面布局装置，通过从预先设置的组件库中获取多个目标组件，并根据预先设置的布局规则和多个目标组件，生成页面模板，最后根据页面模板，生成包括多个目标组件的页面。通过布局规则对目标组件在页面中的位置以及各个目标组件的大小进行调整，无需用户通过拖拽的方式手动调整各个组件，减少了用户调整各个组件所花费的时间，提高了对页面中各个组件进行布局、生成包括多个组件的页面的效率。

上述装置用于执行前述实施例提供的方法，其实现原理和技术效果类似，在此不再赘述。

以上这些模块可以是被配置成实施以上方法的一个或多个集成电路，例如：一个或多个特定集成电路(Application Specific Integrated Circuit，简称ASIC)，或，一个或多个微处理器(digital singnal processor，简称DSP)，或，一个或者多个现场可编程门阵列(Field Programmable Gate Array，简称FPGA)等。再如，当以上某个模块通过处理元件调度程序代码的形式实现时，该处理元件可以是通用处理器，例如中央处理器(CentralProcessing Unit，简称CPU)或其它可以调用程序代码的处理器。再如，这些模块可以集成在一起，以片上系统(system-on-a-chip，简称SOC)的形式实现。

图8为本发明一实施例提供的页面布局装置的示意图，该装置可以集成于终端设备或者终端设备的芯片，该终端可以是具备页面布局功能的计算设备。

该装置包括：存储器801、处理器802。

存储器801用于存储程序，处理器802调用存储器801存储的程序，以执行上述方法实施例。具体实现方式和技术效果类似，这里不再赘述。

可选地，本发明还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器运行时执行上述页面布局方法实施例。

在本发明所提供的几个实施例中，应该理解到，所揭露的装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用硬件加软件功能单元的形式实现。

上述以软件功能单元的形式实现的集成的单元，可以存储在一个计算机可读取存储介质中。上述软件功能单元存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)或处理器(英文：processor)执行本发明各个实施例所述方法的部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(英文：Read-Only Memory，简称：ROM)、随机存取存储器(英文：Random Access Memory，简称：RAM)、磁碟或者光盘等各种可以存储程序代码的介质。

上仅为本申请的具体实施方式，但本申请的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本申请的保护范围之内。因此，本申请的保护范围应以权利要求的保护范围为准。

Claims (10)

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

从预先设置的组件库中获取多个目标组件；

根据预先设置的布局规则和多个所述目标组件，生成页面模板；

根据所述页面模板，生成包括多个所述目标组件的页面。

2.如权利要求1所述的方法，其特征在于，所述布局规则包括：位置规则、类型规则和数量规则；

所述根据预先设置的布局规则和多个所述目标组件，生成页面模板，包括：

确定多个所述目标组件中每个所述目标组件对应的类型；

根据所述类型规则和所述数量规则，结合每个所述目标组件对应的类型，以及每种类型的组件所对应的数量，按照所述位置规则对各个所述目标组件在页面中的位置进行调整，生成所述页面模板。

3.如权利要求1所述的方法，其特征在于，在所述根据所述页面模板，生成包括多个所述目标组件的页面之前，所述方法还包括：

在所述页面模板中填充与各个所述目标组件对应的组件图像，得到预览图像；

显示提醒消息，所述提醒消息用于提醒用户是否生成与所述预览图像相匹配的页面；

所述根据所述页面模板，生成包括多个所述目标组件的页面，包括：

若检测到用户基于所述提醒消息触发的确认操作，根据所述页面模板，生成包括多个所述目标组件、且与所述预览图像相匹配的页面。

4.如权利要求3所述的方法，其特征在于，在所述在所述页面模板中填充与各个所述目标组件对应的组件图像，得到预览图像之后，所述方法还包括：

若检测到用户触发的添加删除操作，根据所述添加删除操作对多个所述目标组件进行添加或删除，得到多个调整后的目标组件；

根据所述布局规则和多个所述调整后的目标组件，重新生成页面模板，得到调整后的页面模板；

在所述调整后的页面模板中填充与各个所述调整后的目标组件对应的组件图像，得到调整后的预览图像；

所述根据所述页面模板，生成包括多个所述目标组件的页面，还包括：

若检测到用户触发的确认操作，根据所述调整后的页面模板，生成包括多个所述调整后的目标组件、且与所述调整后的预览图像相匹配的页面。

5.如权利要求3所述的方法，其特征在于，在所述页面模板中填充与各个所述目标组件对应的组件图像，得到预览图像之后，所述方法还包括：

若检测到用户触发的移动操作，对所述预览图像中与所述移动操作相对应的目标组件的位置进行调整，得到调整后的预览图像；

所述根据所述页面模板，生成包括多个所述目标组件的页面，还包括：

若检测到用户触发的确认操作，根据所述页面模板，生成包括多个所述目标组件、且与所述调整后的预览图像相匹配的页面。

6.如权利要求1所述的方法，其特征在于，所述从预先设置的组件库中获取多个目标组件，包括：

获取待展示数据；

根据所述待展示数据的数据类型，从所述组件库中选取多个所述目标组件。

7.如权利要求1所述的方法，其特征在于，所述从预先设置的组件库中获取多个目标组件，包括：

检测用户触发的选择操作，所述选择操作用于选取所述目标组件；

将所述组件库中与所述选择操作相对应的组件作为所述目标组件。

8.如权利要求1至7任一所述的方法，其特征在于，在所述从预先设置的组件库中获取多个目标组件之前，所述方法还包括：

通过组件预览的方式，渲染得到包括多个渲染后的组件的组件库；

获取所述组件库中每个渲染后的组件对应的组件图像；

建立各个所述组件图像与相应渲染后的组件之间的对应关系。

9.一种页面布局装置，其特征在于，所述装置包括：

获取模块，用于从预先设置的组件库中获取多个目标组件；

第一生成模块，用于根据预先设置的布局规则和多个所述目标组件，生成页面模板；

第二生成模块，用于根据所述页面模板，生成包括多个所述目标组件的页面。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器运行时执行如权利要求1至8任一所述的页面布局方法的步骤。