CN109656556B - 一种自适应页面的生成方法及装置 - Google Patents

Abstract

本发明公开了一种自适应页面的生成方法及装置，确定待处理页面；根据待处理页面的要求，构建以块状页面元素组成的目标页面；建立目标页面中的块状页面元素的宽度、布局与浏览器宽度的关联关系。本发明通过块状页面元素组成目标页面，并通过建立目标页面中的块状页面元素的宽度、布局与浏览器宽度的关联关系的方式生成自适应页面，开发人员无需进行大量的源码编辑和修改，即可生成自适应页面，大幅提高了自适应页面的开发效率。

Description

一种自适应页面的生成方法及装置

技术领域

本发明涉及页面处理领域，具体为一种自适应页面的生成方法及装置。

背景技术

自适应页面是指页面可以根据终端设备大小来自动调节页面布局显示的页面设计。自适应页面具有能够使相同的网页页面可以通过不同尺寸大小的显示屏进行显示的功效，已经广泛应用到各种需要页面展示的软件之中。

现有的自适应页面的生成是大多是通过页面源码进行开发，再通过浏览器进行调试，直到完成符合要求的自适应页面。由于页面源码复杂且数量庞大，极易出现错误，一旦出现错误就需要重新修改源码，并重新进行调试，导致开发效率极其低下。

发明内容

本发明提供了一种自适应页面的生成方法及装置，可以解决现有技术中由于页面源码复杂且数量庞大导致自适应页面开发效率低的问题。

为达到上述目的，本发明提供了如下技术方案：

一种自适应页面的生成方法，包括：

确定待处理页面；

根据所述待处理页面的要求，构建以块状页面元素组成的目标页面；

建立所述目标页面中的所述块状页面元素的宽度、布局与浏览器宽度的关联关系。

可选的，若所述待处理页面为空白页面，所述确定待处理页面，包括：

确定空白页面的页面构建要求。

可选的，若所述待处理页面为空白页面，则所述根据所述待处理页面的要求，构建以块状页面元素组成的目标页面，包括：

获取所述空白页面的页面构建要求对应的块状页面元素；

组合所述获取的块状页面元素，得到所述目标页面。

可选的，若所述待处理页面为绝对定位页面，所述确定待处理页面，包括：

确定所述绝对定位页面的页面构建要求以及所述绝对定位页面的源码。

可选的，若所述待处理页面为绝对定位页面，则所述根据所述待处理页面的要求，构建以块状页面元素组成的目标页面，包括：

确定出所述绝对定位页面的源码对应的块状页面元素；

根据所述绝对定位页面的页面构建要求组合所述确定出的块状页面元素，得到所述目标页面。

一种自适应页面的生成组件，包括：

第一确定单元，用于确定待处理页面；

构建单元，用于根据所述待处理页面的要求，构建以块状页面元素组成的目标页面；

建立单元，用于建立所述目标页面中的所述块状页面元素的宽度、布局与浏览器宽度的关联关系。

可选的，若所述待处理页面为空白页面，则所述确定单元，用于确定空白页面的页面构建要求。

可选的，若所述待处理页面为空白页面，则所述构建单元，包括：

获取单元，用于获取所述空白页面的页面构建要求对应的块状页面元素；

第一组合单元，用于组合所述获取的块状页面元素，得到所述目标页面。

可选的，若所述待处理页面为绝对定位页面，所述确定单元，用于确定所述绝对定位页面的页面构建要求以及所述绝对定位页面的源码。

可选的，若所述待处理页面为绝对定位页面，则所述构建单元，包括：

第二确定单元，用于确定出所述绝对定位页面的源码对应的块状页面元素；

第二组合单元，用于根据所述绝对定位页面的页面构建要求组合所述确定出的块状页面元素，得到所述目标页面。

经由上述技术方案可知，本发明公开了一种自适应页面的生成方法及装置，确定待处理页面；根据待处理页面的要求，构建以块状页面元素组成的目标页面；建立目标页面中的块状页面元素的宽度、布局与浏览器宽度的关联关系。本发明通过块状页面元素组成目标页面，并通过建立目标页面中的块状页面元素的宽度、布局与浏览器宽度的关联关系的方式生成自适应页面，开发人员无需进行大量的源码编辑和修改，即可生成自适应页面，大幅提高了自适应页面的开发效率。

附图说明

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

图1为本发明实施例公开的一种自适应页面的生成方法的流程图；

图2为本发明实施例公开的另一种自适应页面的生成方法的流程图；

图3为本发明实施例公开的另一种自适应页面的生成方法的流程图；

图4为本发明实施例公开的一种自适应页面的生成装置的示意图。

具体实施方式

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

本发明提供了一种自适应页面的生成方法及装置，可以解决现有技术中由于页面源码复杂且数量庞大导致自适应页面开发效率低的问题。

如图1所示，本发明实施例公开了一种适应页面的生成方法，包括以下步骤：

S101、确定待处理页面。

需要说明的是，所述待处理页面可以是一个空白页面、一个绝对定位页面或一个采用现有技术生成的自适应页面，其中，所述绝对定位页面是指通过控制页面中的某元素的坐标原点将该元素固定在页面中的某一点，不随页面的变化而变化，在绝对定位页面的源码中记录该点位置的语句称为定位信息。

S102、根据所述待处理页面的要求，构建以块状页面元素组成的目标页面。

需要说明的是，所述块状页面元素是将页面源码在浏览器中实现的页面元素单独以块状的方式进行预储存，当需要某一页面元素时，直接将预备好的块状页面元素加入到页面当中，从而根据目标页面的要求将所有需要的块状页面元素组成目标页面，省去了大量的源码编写工作也不易出错，增加了页面生成效率的同时实现了能够可视化操作的页面开发。

其中，可视化操作是指，开发人员拖拽块状页面元素到开发界面后，拖拽完成可直接看到加入页面元素后的页面，开发人员可直接手动拖拽调整块状页面元素的位置、大小、直接在属性框中修改部分属性，修改后即生效可见，并可通过脚本绑定页面控制逻辑，而同样的操作采用现有技术的方法需要通过编写源码再到浏览器中调试才可见到相同的页面。

S103、建立所述目标页面中的所述块状页面元素的宽度、布局与浏览器宽度的关联关系。

具体的，通过修改块状页面元素的源码中的样式和脚本，控制所述目标页面中的所述块状页面元素的宽度、布局，建立所述目标页面中的所述块状页面元素的宽度、布局与浏览器宽度的关联关系，实现目标页面随着浏览器大小自适应的改变页面布局和页面元素宽度。

本实施例公开了一种自适应页面的生成方法，确定待处理页面；根据待处理页面的要求，构建以块状页面元素组成的目标页面；建立目标页面中的块状页面元素的宽度、布局与浏览器宽度的关联关系。本发明通过块状页面元素组成目标页面，并通过建立目标页面中的块状页面元素的宽度、布局与浏览器宽度的关联关系的方式生成自适应页面，开发人员无需进行大量的源码编辑和修改，即可生成自适应页面，大幅提高了自适应页面的开发效率。

如图2所示，本发明实施例公开了另一种适应页面的生成方法，其中，所述待处理页面为空白页面，所述方法包括以下步骤：

S201、确定空白页面的页面构建要求。

S202、获取所述空白页面的页面构建要求对应的块状页面元素。

S203、组合所述获取的块状页面元素，得到所述目标页面。

S204、建立所述目标页面中的所述块状页面元素的宽度、布局与浏览器宽度的关联关系。

本实施例公开的自适应页面的生成方法，为当所述待处理页面为空白页面时的生成方法，由于空白页面中没有内容，可以直接将页面构建要求所需的块状页面元素加入到空白页面当中，得到目标页面，再建立所述目标页面中的所述块状页面元素的宽度、布局与浏览器宽度的关联关系，生成自适应页面。

如图3所示，本发明实施例公开了另一种适应页面的生成方法，其中，所述待处理页面为绝对定位页面，所述方法包括以下步骤：

S301、确定所述绝对定位页面的页面构建要求以及所述绝对定位页面的源码。

S302、确定出所述绝对定位页面的源码对应的块状页面元素。

S303、根据所述绝对定位页面的页面构建要求组合所述确定出的块状页面元素，得到所述目标页面。

S304、将所述目标页面中的定位信息删除。

S305、建立所述目标页面中的所述块状页面元素的宽度、布局与浏览器宽度的关联关系。

本实施例公开的自适应页面的生成方法，为当所述待处理页面为绝对定位页面时的生成方法，通过删除目标页面定位信息的方式，解除了绝对定位页面中各块状页面元素的位置限制，使绝对定位页面能够转换成自适应页面。

需要说明的是，当所述待处理页面为采用现有技术生成的自适应页面时，可以先将所述采用现有技术生成的自适应页面转化成绝对定位页面，然后执行步骤S301-S305，即可完成自适应页面的修改，生成新的自适应页面。

具体的，将所述采用现有技术生成的自适应页面转换成绝对定位页面的过程，包括：

根据采用现有技术生成的自适应页面的源码中各页面元素的顺序，依次为各页面元素添加定位信息，使采用现有技术生成的自适应页面转换成绝对定位页面。

基于上述本发明实施例公开的自适应页面的生成方法，图4具体公开了应用该自适应页面的生成方法的自适应页面的生成装置。

如图4所示，本发明实施例公开了一种自适应页面的生成装置，该装置包括：

第一确定单元401，用于确定待处理页面；

构建单元402，用于根据所述待处理页面的要求，构建以块状页面元素组成的目标页面；

建立单元403，用于建立所述目标页面中的所述块状页面元素的宽度、布局与浏览器宽度的关联关系。

可选的，若所述待处理页面为空白页面，则所述确定单元，用于确定空白页面的页面构建要求。

可选的，若所述待处理页面为空白页面，则所述构建单元，包括：

获取单元，用于获取所述空白页面的页面构建要求对应的块状页面元素；

第一组合单元，用于组合所述获取的块状页面元素，得到所述目标页面。

可选的，若所述待处理页面为绝对定位页面，所述确定单元，用于确定所述绝对定位页面的页面构建要求以及所述绝对定位页面的源码。

可选的，若所述待处理页面为绝对定位页面，则所述构建单元，包括：

第二确定单元，用于确定出所述绝对定位页面的源码对应的块状页面元素；

第二组合单元，用于根据所述绝对定位页面的页面构建要求组合所述确定出的块状页面元素，得到所述目标页面。

以上本发明实施例公开的自适应页面的生成装置中的第一确定单元401、构建单元402和建立单元403的具体工作过程，可参见本发明上述实施例公开的自适应页面的生成方法中的对应内容，这里不再进行赘述。

本实施例公开了一种自适应页面的生成装置，第一确定单元确定待处理页面；构建单元根据待处理页面的要求，构建以块状页面元素组成的目标页面；建立单元建立目标页面中的块状页面元素的宽度、布局与浏览器宽度的关联关系。本发明通过块状页面元素组成目标页面，并通过建立目标页面中的块状页面元素的宽度、布局与浏览器宽度的关联关系的方式生成自适应页面，开发人员无需进行大量的源码编辑和修改，即可生成自适应页面，大幅提高了自适应页面的开发效率。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括要素的过程、方法、商品或者设备中还存在另外的相同要素。

本领域技术人员应明白，本申请的实施例可提供为方法、系统或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

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

Claims (6)

1.一种自适应页面的生成方法，其特征在于，包括：

确定待处理页面；

根据所述待处理页面的要求，构建以块状页面元素组成的目标页面；

建立所述目标页面中的所述块状页面元素的宽度、布局与浏览器宽度的关联关系；

其中，所述块状页面元素是将页面源码在浏览器中实现的页面元素单独以块状的方式进行预储存，通过手动拖拽调整块状页面元素的位置、大小、直接在属性框中修改属性；

其中，若所述待处理页面为已生成的自适应页面；

则将所述已生成的自适应页面转化为绝对定位页面；

确定所述绝对定位页面的页面构建要求以及所述绝对定位页面的源码；

确定出所述绝对定位页面的源码对应的块状页面元素；

根据所述绝对定位页面的页面构建要求组合所述确定出的块状页面元素，得到所述目标页面；

将所述目标页面中的定位信息删除。

2.根据权利要求1所述的生成方法，其特征在于，若所述待处理页面为空白页面，所述确定待处理页面，包括：

确定空白页面的页面构建要求。

3.根据权利要求2所述的生成方法，其特征在于，若所述待处理页面为空白页面，则所述根据所述待处理页面的要求，构建以块状页面元素组成的目标页面，包括：

获取所述空白页面的页面构建要求对应的块状页面元素；

组合所述获取的块状页面元素，得到所述目标页面。

4.一种自适应页面的生成装置，其特征在于，包括：

第一确定单元，用于确定待处理页面；

构建单元，用于根据所述待处理页面的要求，构建以块状页面元素组成的目标页面；

建立单元，用于建立所述目标页面中的所述块状页面元素的宽度、布局与浏览器宽度的关联关系；

其中，所述块状页面元素是将页面源码在浏览器中实现的页面元素单独以块状的方式进行预储存，通过手动拖拽调整块状页面元素的位置、大小、直接在属性框中修改属性；

其中，若所述待处理页面为已生成的自适应页面，则将所述已生成的自适应页面转化为绝对定位页面；且，所述确定单元，用于确定所述绝对定位页面的页面构建要求以及所述绝对定位页面的源码；所述构建单元，包括：第二确定单元，用于确定出所述绝对定位页面的源码对应的块状页面元素；第二组合单元，用于根据所述绝对定位页面的页面构建要求组合所述确定出的块状页面元素，得到所述目标页面；将所述目标页面中的定位信息删除。

5.根据权利要求4所述的生成装置，其特征在于，若所述待处理页面为空白页面，则所述确定单元，用于确定空白页面的页面构建要求。

6.根据权利要求5所述的生成装置，其特征在于，若所述待处理页面为空白页面，则所述构建单元，包括：

获取单元，用于获取所述空白页面的页面构建要求对应的块状页面元素；

第一组合单元，用于组合所述获取的块状页面元素，得到所述目标页面。

Images