CN117873467A - 页面生成方法、装置、服务器及存储介质 - Google Patents

Abstract

本申请提供了一种页面生成方法、装置、服务器及存储介质，方法通过获取根据设计图像所开发的原始页面；获取原始页面的文档对象模型树，解析文档对象模型树获取文档对象模型树的各个节点对应的层叠样式表信息；根据层叠样式表信息生成原始页面对应的页面图像；将页面图像与设计图像进行特征比对，生成页面图像与设计图像的差异化信息；根据差异化信息修改文档对象模型树的各个节点对应的层叠样式表信息，根据修改后的文档对象模型树渲染生成对应的页面。进而使得前端开发人员能够自己比对设计稿差异，从而节省UI设计人员以及测试人员不必要工作，在提高所设计的页面的准确性的同时也提升了相关工作人员的工作效率。

Description

页面生成方法、装置、服务器及存储介质

技术领域

本申请涉及金融页面开发技术领域，尤其涉及一种页面生成方法、装置、服务器及存储介质。

背景技术

在金融系统中，不管是车险或者非车险，根据业务需求，都需要制定很多个性化UI(User Interface，用户界面)产品。前端技术人员根据UI设计人员提供的设计稿进行页面开发，目前在工作中前端技术人员开发完页面需要让UI设计人员对开发效果进行审核，指出开发中的不足，该方法不仅工作效率低，也容易导致设计稿的细节被遗漏，导致最终设计的页面存在较多缺陷。

发明内容

本申请提供了一种页面生成方法、装置、服务器及存储介质，旨在解决现有在工作中前端技术人员开发完页面需要让UI设计人员对开发效果进行审核，指出开发中的不足，该方法不仅工作效率低，也容易导致设计稿的细节被遗漏，导致最终设计的页面存在较多缺陷的问题。

第一方面，本申请提供了一种页面生成方法，所述方法包括：

获取根据设计图像所开发的原始页面；

获取原始页面的文档对象模型树，解析文档对象模型树获取文档对象模型树的各个节点对应的层叠样式表信息；

根据层叠样式表信息生成原始页面对应的页面图像；

将页面图像与设计图像进行特征比对，生成页面图像与设计图像的差异化信息；

根据差异化信息修改文档对象模型树的各个节点对应的层叠样式表信息，根据修改后的文档对象模型树渲染生成对应的页面。

第二方面，本申请提供了一种页面生成装置，包括：

页面获取模块，用于获取根据设计图像所开发的原始页面；

解析获取模块，用于获取所述原始页面的文档对象模型树，解析所述文档对象模型树获取所述文档对象模型树的各个节点对应的所述层叠样式表信息；

图像生成模块，用于根据所述层叠样式表信息生成所述原始页面对应的页面图像；

差异生成模块，用于将所述页面图像与所述设计图像进行特征比对，生成所述页面图像与所述设计图像的差异化信息；

渲染生成模块，用于根据所述差异化信息修改所述文档对象模型树的各个节点对应的所述层叠样式表信息，根据修改后的所述文档对象模型树渲染生成对应的页面。

第三方面，本申请提供了一种页面生成方法，所述方法包括：

获取根据设计图像所开发的原始页面，获取所述原始页面的文档对象模型树；

获取所述设计图像的层叠样式表信息，根据所述层叠样式表信息生成预设文档对象模型树，所述预设文档对象模型树的结构与所述文档对象模型树的结构相同；

将所述预设文档对象模型树的各个节点对应的所述层叠样式表信息与所述原始页面的文档对象模型树的各个节点对应的所述层叠样式表信息进行比对，生成差异化信息；

根据所述差异化信息修改所述原始页面的文档对象模型树的各个节点对应的所述层叠样式表信息，根据修改后的所述文档对象模型树渲染生成对应的页面。

第四方面，本申请提供了一种页面生成装置，包括：

模型获取模块，用于获取根据设计图像所开发的原始页面，获取所述原始页面的文档对象模型树；

信息获取模块，用于获取所述设计图像的层叠样式表信息，根据层叠样式表信息生成预设文档对象模型树，所述预设文档对象模型树的结构与所述文档对象模型树的结构相同；

信息比对模块，用于将所述预设文档对象模型树的各个节点对应的所述层叠样式表信息与所述原始页面的文档对象模型树的各个节点对应的所述层叠样式表信息进行比对，生成差异化信息；

渲染生成模块，用于根据所述差异化信息修改所述原始页面的文档对象模型树的各个节点对应的所述层叠样式表信息，根据修改后的所述文档对象模型树渲染生成对应的页面。

第五方面，本申请提供了一种服务器，所述服务器包括处理器、存储器、以及存储在所述存储器上并可被所述处理器执行的计算机程序，所述存储器存储有策略模型，其中所述计算机程序被所述处理器执行时，实现如本申请任一实施例所提供的页面生成方法。

第六方面，本申请提供了一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时使所述处理器实现如本申请任一实施例所提供的页面生成方法。

本申请提供了一种页面生成方法、装置、服务器及存储介质，方法通过获取根据设计图像所开发的原始页面；获取原始页面的文档对象模型树，解析文档对象模型树获取文档对象模型树的各个节点对应的层叠样式表信息；根据层叠样式表信息生成原始页面对应的页面图像；将页面图像与设计图像进行特征比对，生成页面图像与设计图像的差异化信息；根据差异化信息修改文档对象模型树的各个节点对应的层叠样式表信息，根据修改后的文档对象模型树渲染生成对应的页面。进而能通过获取原始页面的文档对象模型树的各个节点对应的层叠样式表信息生成原始页面对应的页面图像，将页面图像与UI设计师所提供的设计图像进行特征比对，根据差异化信息修改文档对象模型树的各个节点对应的层叠样式表信息，根据修改后的文档对象模型树渲染生成对应的页面，使得前端开发人员能够自己比对设计稿差异，从而节省UI设计人员以及测试人员不必要工作，在提高所设计的页面的准确性的同时也提升了相关工作人员的工作效率。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本申请。

附图说明

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

图1是本申请一实施例提供的一种页面生成方法的步骤示意流程图；

图2是本申请实施例提供的一种页面图像生成方法的步骤示意流程图；

图3是本申请一实施例提供的另一种页面生成方法的步骤示意流程图；

图4是本申请实施例提供的一种页面生成装置的结构示意图；

图5是本申请实施例提供的另一种页面生成装置的结构示意图；

图6是本申请的实施例提供的一种服务器的结构示意性框图。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本申请。

具体实施方式

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

附图中所示的流程图仅是示例说明，不是必须包括所有的内容和操作/步骤，也不是必须按所描述的顺序执行。例如，有的操作/步骤还可以分解、组合或部分合并，因此实际执行的顺序有可能根据实际情况改变。

应当理解，在此本申请说明书中所使用的术语仅仅是出于描述特定实施例的目的而并不意在限制本申请。如在本申请说明书和所附权利要求书中所使用的那样，除非上下文清楚地指明其它情况，否则单数形式的“一”、“一个”及“该”意在包括复数形式。

还应当进理解，在本申请说明书和所附权利要求书中使用的术语“和/或”是指相关联列出的项中的一个或多个的任何组合以及所有可能组合，并且包括这些组合。

为便于理解本申请实施例，下面对本申请实施例中涉及到的一些词汇作简单说明。

1.文档对象模型树(Document Object Model，DOM)：是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(HTML和XML文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM是一种基于树的API文档，它要求在处理过程中整个文档都表示在存储器中。

2.层叠样式表信息(Cascading Style Sheets，CSS)：DOM结构树的页面为树形结构分布，在树形结构中每个分支的信息为CSS信息，用于表征页面中该位置的内容。

下面结合附图，对本申请的一些实施方式作详细说明。在不冲突的情况下，下述的实施例及实施例中的特征可以相互组合。

目前，前端根据设计稿进行页面开发，但前端开发人员使用的电脑分辨率不同，采用的页面尺寸不同，都是对设计稿按比例开发，开发会出现的问题：1、开发人员大多书写ui设计尺寸并没有严格要求像素级精确，2、由于屏幕兼容适配问题，会在不同屏幕尺寸出现比例出现兼容问题，开发人员使用屏幕比较单一，导致开发页面兼容性不好。3、由于设计稿细节比较多，开发人员存在忽略的地方，比如阴影、字体等等。都会导致和设计稿有出处差别。

在金融系统中，不管是车险或者非车险，根据业务需求，都需要制定很多个性化UI(User Interface，用户界面)产品。前端技术人员根据UI设计人员提供的设计稿进行页面开发，目前在工作中前端技术人员开发完页面需要让UI设计人员对开发效果进行审核，指出开发中的不足，该方法不仅工作效率低，也容易导致设计稿的细节被遗漏，导致最终设计的页面存在较多缺陷

为解决上述问题，请参照图1，图1是本申请提出的一种页面生成方法的步骤示意流程图。

如图1所示，该页面生成方法具体包括步骤S101至步骤S105。

S101.获取根据设计图像所开发的原始页面。

具体地，通过获取前端工作人员根据UI人员所提供的设计图像开发的原始页面。通过本申请实施例所提供的方法能自动对原始页面进行修改，使修改后的原始页面能保留设计图像中的设计思路。

S102.获取原始页面的文档对象模型树，解析文档对象模型树获取文档对象模型树的各个节点对应的层叠样式表信息。

具体地，通过获取原始页面对应的DOM结构树，例如DOM结构树为根据页面布局排列的树形结构，其中DOM结构树中的分支为CSS信息，用于表征原始页面中各位置的内容，例如页面中的图标。进而能够将前端人员开发的原始页面转换为代码的形式，便于直观表征原始页面的设计内容。

S103.根据层叠样式表信息生成原始页面对应的页面图像。

具体地，通过原始页面对应DOM结构树各分支的CSS信息，将页面生成对应的页面图像，页面图像为与设计图像格式一致的稿图。进而能够将页面图像与设计图像进行比对，判断原始页面的设计是否与设计图像存在偏差。

S104.将页面图像与设计图像进行特征比对，生成页面图像与设计图像的差异化信息。

具体地，通过将原始页面生成的与设计图像格式一致的页面图像，将页面图像与设计图像进行特征比对。由于设计图像与页面图像都为层级分明的稿图，通过将页面图像与设计图像的每一层级的特征进行逐一比对，判断特征是否相同，能够得到页面图像与设计图像的差异化信息，例如页面图像中一个层级对应的图像为苹果图标，在设计图像中该层级对应的图标为梨的图标，那么差异化信息则记录此处差异。进而能快速确定原始页面中的错误。

S105.根据差异化信息修改文档对象模型树的各个节点对应的层叠样式表信息，根据修改后的文档对象模型树渲染生成对应的页面。

具体地，通过获取表征各个层级特征的差异化信息，能够对DOM结构树中的各个节点的CSS信息进行修正，例如页面图像中一个层级对应的图像为苹果图标，在设计图像中该层级对应的图标为梨的图标，那么通过对该节点的CSS信息修正为梨。进而根据修改后的文档对象模型树渲染生成对应的页面。使得前端开发人员能够自己比对设计稿差异，从而节省UI设计人员以及测试人员不必要工作，在提高所设计的页面的准确性的同时也提升了相关工作人员的工作效率。

在一些实施例中，请参照图2，图2是本申请实施例提供的一种页面图像生成方法的步骤示意流程图。

如图2所示，所提供的方法包括步骤S103a至S103b。

S103a.获取层叠样式表信息对应的元素，获取元素对应的图像。

S103b.按照文档对象模型树的结构将元素对应的图像进行排布生成原始页面对应的页面图像。

通过解析原始页面的DOM结构树每个节点对应的CSS信息，获取CSS信息对应的元素，在预设图库中搜索该元素的图像。进而能够根据各修正后的CSS信息在DOM结构树中的分布生成对应的页面图像。通过各元素对应的图像按照DOM结构树将前端人员开发的原始页面转换为与设计图像格式一致的层级分明的稿图。进而能够将前端人员设计的原始页面与UI人员设计的设计图像进行比对。

在一些实施例中，在所述根据所述层叠样式表信息生成所述原始页面对应的页面图像之前，还包括获取所述设计图像的预设分辨率；所述根据所述层叠样式表信息生成所述原始页面对应的页面图像，包括：根据所述层叠样式表信息生成分辨率为所述预设分辨率的页面图像。

由于开发原始页面的前端人员和提供设计稿图的UI人员所使用的电脑分辨率可能不同，因此通过获取设计图像对应的预设分辨率，将根据层叠样式表信息生成的页面图像的分辨率与设计图像一致，进而提高步骤S104所生成的差异化信息的准确度。

在一些实施例中，所述根据所述层叠样式表信息生成所述原始页面对应的页面图像，还包括：获取终端设备的设备分辨率，所述终端设备用于将所述页面图像与所述设计图像进行特征比对；根据所述层叠样式表信息生成分辨率为所述设备分辨率的页面图像。

设备分辨率为正在运行本申请实施例所提供的方法的设备的显示屏分辨率，例如服务器的显示屏的分辨率。通过将生成的页面图像与显示页面图像的设备的显示屏分辨率一致，进而能够确保不会由于设备分辨率过低导致步骤S104所生成的差异化信息的准确度下降。

示例性的，所述将所述页面图像与所述设计图像进行特征比对，包括：将所述设计图像的分辨率转换为所述设备分辨率；将转换后的所述设计图像与所述页面图像进行特征比对，用于获取所述差异化信息。

利用图像识别技术，通过图像变换将设计图像处理成与设备分辨率一致。进而能够确保不会由于设备分辨率过低导致步骤S104所生成的差异化信息的准确度下降。

本申请提供了一种页面生成方法，通过获取原始页面的文档对象模型树的各个节点对应的层叠样式表信息生成原始页面对应的页面图像，将页面图像与UI设计师所提供的设计图像进行特征比对，根据差异化信息修改文档对象模型树的各个节点对应的层叠样式表信息，根据修改后的文档对象模型树渲染生成对应的页面，使得前端开发人员能够自己比对设计稿差异，从而节省UI设计人员以及测试人员不必要工作，在提高所设计的页面的准确性的同时也提升了相关工作人员的工作效率。

请参照图3，图3是本申请提出的另一种页面生成方法的步骤示意流程图。如图1所示，该页面生成方法具体包括步骤S201至步骤S204。

S201.获取根据设计图像所开发的原始页面，获取原始页面的文档对象模型树。

具体地，通过获取前端工作人员根据UI人员所提供的设计图像所开发的原始页面，本申请实施例所提供的方法用于自动对原始页面进行修改使其趋近于设计图像。其中，原始页面对应的DOM结构树，例如DOM结构树为根据页面布局排列的树形结构，其中DOM结构树中的分支为CSS信息，用于表征页面中各位置的内容，例如页面中的图标。

S202.获取设计图像的层叠样式表信息，根据层叠样式表信息生成预设文档对象模型树，预设文档对象模型树的结构与文档对象模型树的结构相同。

具体地，通过获取设计图像中各层次所表征的内容，将其转换为CSS信息。再通过生成与原始页面对应的DOM结构树结构相同的预设DOM结构树，进而能够将UI人员开发的设计图像转换为DOM结构树。由于二者结构相同，便于通过各分支CSS信息进行比对，实现设计图像和原始图像的特征比对。

S203.将预设文档对象模型树的各个节点对应的层叠样式表信息与原始页面的文档对象模型树的各个节点对应的层叠样式表信息进行比对，生成差异化信息。

具体地，通过将原始页面对应的DOM结构树与设计图像对应的预设DOM树各分支的CSS信息进行逐一比对，判断特征是否相同，能够得到页面图像与设计图像的差异化信息。

S204.根据差异化信息修改原始页面的文档对象模型树的各个节点对应的层叠样式表信息，根据修改后的文档对象模型树渲染生成对应的页面。

具体地，通过获取表征各个层级特征的差异化信息，能够对DOM结构树中的各个节点的CSS信息进行修正，例如页面图像中一个DOM结构树的节点对应的CSS信息为苹果，在设计图像中预设DOM结构树的节点对应的CSS信息为梨的，那么通过对该节点的CSS信息修正为梨。进而根据修改后的DOM结构树渲染生成对应的页面。使得前端开发人员能够自己比对设计稿差异，从而节省UI设计人员以及测试人员不必要工作，在提高所设计的页面的准确性的同时也提升了相关工作人员的工作效率。

本申请提供了一种页面生成方法，通过原始页面的文档对象模型树与UI设计师所提供的设计图像转换为预设文档对象模型树进行特征比对，根据差异化信息修改文档对象模型树的各个节点对应的层叠样式表信息，根据修改后的文档对象模型树渲染生成对应的页面，使得前端开发人员能够自己比对设计稿差异，从而节省UI设计人员以及测试人员不必要工作，在提高所设计的页面的准确性的同时也提升了相关工作人员的工作效率。

如图4所示，图4是本申请实施例提供的一种页面生成装置的结构示意图，该页面生成装置用于执行前述的页面生成方法。其中，该页面生成装置可以配置于终端或服务器，终端或服务器安装有保险理赔系统。

如图4所示，该页面生成装置100，包括页面获取模块101、解析获取模块102、图像生成模块103、差异生成模块104和渲染生成模块105。

页面获取模块101，用于获取根据设计图像所开发的原始页面；

解析获取模块102，用于获取所述原始页面的文档对象模型树，解析所述文档对象模型树获取所述文档对象模型树的各个节点对应的所述层叠样式表信息；

图像生成模块103，用于根据所述层叠样式表信息生成所述原始页面对应的页面图像；

差异生成模块104，用于将所述页面图像与所述设计图像进行特征比对，生成所述页面图像与所述设计图像的差异化信息；

渲染生成模块105，用于根据所述差异化信息修改所述文档对象模型树的各个节点对应的所述层叠样式表信息，根据修改后的所述文档对象模型树渲染生成对应的页面。

在一些实施例中，该页面生成装置100还可以包括：图像获取模块106、分辨率生成模块107、分辨率获取模块108以及分辨率转换模块109。

图像获取模块106，获取所述层叠样式表信息对应的元素，获取所述元素对应的图像；按照所述文档对象模型树的结构将所述元素对应的图像进行排布生成所述原始页面对应的页面图像。

分辨率生成模块107，用于获取所述设计图像的预设分辨率；所述根据所述层叠样式表信息生成所述原始页面对应的页面图像，包括：根据所述层叠样式表信息生成分辨率为所述预设分辨率的页面图像。

分辨率获取模块108，用于获取终端设备的设备分辨率，所述终端设备用于将所述页面图像与所述设计图像进行特征比对；根据所述层叠样式表信息生成分辨率为所述设备分辨率的页面图像。

分辨率转换模块109，用于将所述设计图像的分辨率转换为所述设备分辨率；将转换后的所述设计图像与所述页面图像进行特征比对，用于获取所述差异化信息。

需要说明的是，所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，上述描述的装置和各模块的具体工作过程，可以参考前述图1至图2所对应的页面生成方法实施例中的对应过程，在此不再赘述。

如图5所示，图5是本申请实施例提供的另一种页面生成装置的结构示意图，该页面生成装置用于执行前述的页面生成方法。其中，该页面生成装置可以配置于终端或服务器。

如图4所示，该页面生成装置200，包括模型获取模模块201、信息获取模块202、信息比对模块203和渲染生成模块204。

模型获取模块201，用于获取根据设计图像所开发的原始页面，获取所述原始页面的文档对象模型树；

信息获取模块202，用于获取所述设计图像的层叠样式表信息，根据层叠样式表信息生成预设文档对象模型树，所述预设文档对象模型树的结构与所述文档对象模型树的结构相同；

信息比对模块203，用于将所述预设文档对象模型树的各个节点对应的所述层叠样式表信息与所述原始页面的文档对象模型树的各个节点对应的所述层叠样式表信息进行比对，生成差异化信息；

渲染生成模块204，用于根据所述差异化信息修改所述原始页面的文档对象模型树的各个节点对应的所述层叠样式表信息，根据修改后的所述文档对象模型树渲染生成对应的页面。

需要说明的是，所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，上述描述的装置和各模块的具体工作过程，可以参考前述图3所对应的页面生成方法实施例中的对应过程，在此不再赘述。

上述的装置可以实现为一种计算机程序的形式，该计算机程序可以在如图6所示的服务器上运行。

请参阅图6，图6是本申请的实施例提供的一种服务器的结构示意性框图。该服务器可以是终端。参阅图6，该服务器包括通过系统总线连接的处理器、存储器和网络接口，其中，存储器可以包括非易失性存储介质和内存储器。

非易失性存储介质可存储操作系统和计算机程序。该计算机程序包括程序指令，该程序指令被执行时，可使得处理器执行任意一种页面生成方法。

处理器用于提供计算和控制能力，支撑整个服务器的运行。

内存储器为非易失性存储介质中的计算机程序的运行提供环境，该计算机程序被处理器执行时，可使得处理器执行任意一种页面生成方法。

该网络接口用于进行网络通信，如发送分配的任务等。本领域技术人员可以理解，图6中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的服务器的限定，具体的服务器可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

应当理解的是，处理器可以是中央处理单元(Central Processing Unit，CPU)，该处理器还可以是其他通用处理器、数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现场可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。其中，通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。

其中，在一个实施例中，所述处理器用于运行存储在存储器中的计算机程序，以实现如下步骤：

获取根据设计图像所开发的原始页面。

获取原始页面的文档对象模型树，解析文档对象模型树获取文档对象模型树的各个节点对应的层叠样式表信息。

根据层叠样式表信息生成原始页面对应的页面图像。

将页面图像与设计图像进行特征比对，生成页面图像与设计图像的差异化信息。

根据差异化信息修改文档对象模型树的各个节点对应的层叠样式表信息，根据修改后的文档对象模型树渲染生成对应的页面。

在一些实施例中，处理器用于实现：获取所述层叠样式表信息对应的元素，获取所述元素对应的图像；按照所述文档对象模型树的结构将所述元素对应的图像进行排布生成所述原始页面对应的页面图像。

在一些实施例中，处理器用于实现：获取所述设计图像的预设分辨率；所述根据所述层叠样式表信息生成所述原始页面对应的页面图像，包括：根据所述层叠样式表信息生成分辨率为所述预设分辨率的页面图像。

在一些实施例中，处理器用于实现：获取终端设备的设备分辨率，所述终端设备用于将所述页面图像与所述设计图像进行特征比对；根据所述层叠样式表信息生成分辨率为所述设备分辨率的页面图像。

在一些实施例中，处理器用于实现：将所述设计图像的分辨率转换为所述设备分辨率；将转换后的所述设计图像与所述页面图像进行特征比对，用于获取所述差异化信息。

其中，在一个实施例中，所述处理器用于运行存储在存储器中的计算机程序，以实现如下步骤：

获取根据设计图像所开发的原始页面，获取所述原始页面的文档对象模型树。

获取所述设计图像的层叠样式表信息，根据所述层叠样式表信息生成预设文档对象模型树，所述预设文档对象模型树的结构与所述文档对象模型树的结构相同。

将所述预设文档对象模型树的各个节点对应的所述层叠样式表信息与所述原始页面的文档对象模型树的各个节点对应的所述层叠样式表信息进行比对，生成差异化信息。

根据所述差异化信息修改所述原始页面的文档对象模型树的各个节点对应的所述层叠样式表信息，根据修改后的所述文档对象模型树渲染生成对应的页面。

本申请的实施例中还提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序中包括程序指令，所述处理器执行所述程序指令，实现本申请实施例提供的任一项页面生成方法。

其中，所述计算机可读存储介质可以是前述实施例所述的服务器的内部存储单元，例如所述服务器的硬盘或内存。所述计算机可读存储介质也可以是所述服务器的外部存储设备，例如所述服务器上配备的插接式硬盘，智能存储卡(Smart Media Card，SMC)，安全数字(Secure Digital，SD)卡，闪存卡(Flash Card)等。

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

Claims (10)

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

获取根据设计图像所开发的原始页面；

获取所述原始页面的文档对象模型树，解析所述文档对象模型树获取所述文档对象模型树的各个节点对应的层叠样式表信息；

根据所述层叠样式表信息生成所述原始页面对应的页面图像；

将所述页面图像与所述设计图像进行特征比对，生成所述页面图像与所述设计图像的差异化信息；

根据所述差异化信息修改所述文档对象模型树的各个节点对应的所述层叠样式表信息，根据修改后的所述文档对象模型树渲染生成对应的页面。

2.根据权利要求1所述的方法，其特征在于，所述根据所述层叠样式表信息生成所述原始页面对应的页面图像，包括：

获取所述层叠样式表信息对应的元素，获取所述元素对应的图像；

按照所述文档对象模型树的结构将所述元素对应的图像进行排布生成所述原始页面对应的页面图像。

3.根据权利要求1所述的方法，其特征在于，所述根据所述层叠样式表信息生成所述原始页面对应的页面图像之前，还包括：

获取所述设计图像的预设分辨率；

所述根据所述层叠样式表信息生成所述原始页面对应的页面图像，包括：

根据所述层叠样式表信息生成分辨率为所述预设分辨率的页面图像。

4.根据权利要求1所述的方法，其特征在于，所述根据所述层叠样式表信息生成所述原始页面对应的页面图像，还包括：

获取终端设备的设备分辨率，所述终端设备用于将所述页面图像与所述设计图像进行特征比对；

根据所述层叠样式表信息生成分辨率为所述设备分辨率的页面图像。

5.根据权利要求4所述的方法，其特征在于，所述将所述页面图像与所述设计图像进行特征比对，包括：

将所述设计图像的分辨率转换为所述设备分辨率；

将转换后的所述设计图像与所述页面图像进行特征比对，用于获取所述差异化信息。

6.一种页面生成装置，其特征在于，包括：

页面获取模块，用于获取根据设计图像所开发的原始页面；

解析获取模块，用于获取所述原始页面的文档对象模型树，解析所述文档对象模型树获取所述文档对象模型树的各个节点对应的所述层叠样式表信息；

图像生成模块，用于根据所述层叠样式表信息生成所述原始页面对应的页面图像；

差异生成模块，用于将所述页面图像与所述设计图像进行特征比对，生成所述页面图像与所述设计图像的差异化信息；

渲染生成模块，用于根据所述差异化信息修改所述文档对象模型树的各个节点对应的所述层叠样式表信息，根据修改后的所述文档对象模型树渲染生成对应的页面。

7.一种页面生成方法，其特征在于，所述方法包括：

获取根据设计图像所开发的原始页面，获取所述原始页面的文档对象模型树；

获取所述设计图像的层叠样式表信息，根据所述层叠样式表信息生成预设文档对象模型树，所述预设文档对象模型树的结构与所述文档对象模型树的结构相同；

将所述预设文档对象模型树的各个节点对应的所述层叠样式表信息与所述原始页面的文档对象模型树的各个节点对应的所述层叠样式表信息进行比对，生成差异化信息；

根据所述差异化信息修改所述原始页面的文档对象模型树的各个节点对应的所述层叠样式表信息，根据修改后的所述文档对象模型树渲染生成对应的页面。

8.一种页面生成装置，其特征在于，包括：

模型获取模块，用于获取根据设计图像所开发的原始页面，获取所述原始页面的文档对象模型树；

信息获取模块，用于获取所述设计图像的层叠样式表信息，根据层叠样式表信息生成预设文档对象模型树，所述预设文档对象模型树的结构与所述文档对象模型树的结构相同；

信息比对模块，用于将所述预设文档对象模型树的各个节点对应的所述层叠样式表信息与所述原始页面的文档对象模型树的各个节点对应的所述层叠样式表信息进行比对，生成差异化信息；

渲染生成模块，用于根据所述差异化信息修改所述原始页面的文档对象模型树的各个节点对应的所述层叠样式表信息，根据修改后的所述文档对象模型树渲染生成对应的页面。

9.一种服务器，其特征在于，所述服务器包括处理器、存储器、以及存储在所述存储器上并可被所述处理器执行的计算机程序，所述存储器存储有策略模型，其中所述计算机程序被所述处理器执行时，实现如权利要求1至5中任一项所述的页面生成方法，或，实现如权利要求7所述的页面生成方法。

10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时使所述处理器实现如权利要求1至5中任一项所述的页面生成方法，或，实现如权利要求7所述的页面生成方法。