页面配置信息确定方法、装置、计算机设备及存储介质制造方法及图纸

本发明专利技术公开了一种页面配置信息确定方法、装置、计算机设备及计算机可读介质。该方法包括：从页面设计数据中获取节点的布局信息和节点的层叠样式表；结合布局信息和层叠样式表，得到页面树形结构信息，页面树形结构信息包括多个节点之间的结构和节点对应的层叠样式；将页面树形结构信息转换为目标格式的页面配置信息。本发明专利技术通过从页面设计数据中自动提取出页面的布局信息以及对应的层叠样式表，将页面设计数据自动转换成目标格式的页面配置信息，提高了将页面设计数据向视图层的页面配置信息转换的效率，降低了人力物力的消耗，缩短了前端开发的周期。

Page configuration information determination method, device, computer equipment and storage medium

【技术实现步骤摘要】
页面配置信息确定方法、装置、计算机设备及存储介质
本专利技术涉及计算机
，特别涉及一种页面配置信息确定方法、装置、计算机设备及存储介质。
技术介绍
前端开发是指创建网页页面或应用程序等前端界面呈现给用户的过程，其主要职能是把互联网产品的界面更好地呈现给用户，通过例如超文本标记语言(HTML，HyperTextMarkupLanguage)、层叠样式表(CCS，CascadingStyleSheet)工具及脚本语言(JavaScript)以及衍生出来的各种技术、框架、解决方案等，实现互联网产品的用户界面交互。在一个互联网产品的页面开发过程主要包括：(1)获取页面设计数据，该页面设计数据通常是设计师绘制出来的图像文件，包括了页面布局以及页面内容；(2)人工分析页面设计数据，确定出页面中节点的布局以及节点的样式；(3)人工编写代码描述节点的布局以及节点的样式；(4)将编写好的代码转换成图形处理器能够执行的页面配置信息，例如视图层代码，基于该页面配置信息可以实现在目标终端屏幕上显示与页面设计数据对应的页面。但是，针对于上述的这种前端开发过程，从页面设计数据转换成页面配置信息的过程中需要大量的人工操作，降低了前端开发的效率，进一步的，如果是对不同的平台进行前端开发时，例如ios系统和Andriod系统，其对应的前端框架协议也不相同，在前端开发过程还需要针对于不同的平台设计不同的开发流程，所耗费的大量人力物力只会更加巨大，前端开发的效率也更低。
技术实现思路
本专利技术实施例提供了一种页面配置信息确定方法、装置、计算机设备及存储介质,能够解决现有技术中前端开发效率低的问题。该技术方案如下：一方面，提供了一种页面配置信息确定方法，该方法包括：从页面设计数据中获取节点的布局信息和节点的层叠样式表；结合布局信息和层叠样式表，得到页面树形结构信息，页面树形结构信息包括多个节点之间的结构和节点对应的层叠样式；将页面树形结构信息转换为目标格式的页面配置信息。在本专利技术的一个实施例中，上述从页面设计数据中获取节点的布局信息，包括：从页面设计数据提取页面图像；将页面图像的多个目标区域确定为对应的节点；将多个目标区域之间的嵌套关系确定为对应的节点之间的从属关系，生成节点的布局信息。在本专利技术的一个实施例中，上述从页面设计数据中获取节点的布局信息，包括：从页面设计数据提取页面图像；基于页面图像的多个目标区域，分别确定多个节点；将多个目标区域之间的嵌套关系确定为多个节点之间的从属关系，得到多个节点的布局信息。在本专利技术的一个实施例中，上述基于页面图像的多个目标区域，分别确定多个节点，包括：获取遮罩模板，遮罩模板具有多个遮罩区域；基于遮罩模板对页面图像进行遮罩处理，将未被多个遮罩区域所遮罩的区域、各个区域的子区域以及页面图像的整体区域确定为目标区域；将每个目标区域确定为一个节点。在本专利技术的一个实施例中，上述将多个目标区域之间的嵌套关系确定为多个节点之间的从属关系，得到多个节点的布局信息，包括：将多个目标区域中最大目标区域确定为父目标区域；将父目标区域中嵌套的多个子区域确定为子目标区域，生成父目标区域与子目标区域之间的嵌套关系；将嵌套关系作为对应节点之间的从属关系，获得多个节点的布局信息。在本专利技术的一个实施例中，上述结合布局信息和层叠样式表，得到页面树形结构信息，包括：基于布局信息中多个节点之间的从属关系，生成树形结构；从层叠样式表中获取多个节点对应的层叠样式，将层叠样式与树形结构中对应的节点绑定，得到页面树形结构信息。在本专利技术的一个实施例中，上述从层叠样式表中获取节点对应的层叠样式，将层叠样式与树形结构信息中对应的节点绑定，包括：为树形结构信息的各个节点分配对应的身份信息；将各个节点对应的层叠样式与对应的身份信息绑定。在本专利技术的一个实施例中，上述将页面树形结构信息转换为目标格式的页面配置信息，包括：获取转换规则，转换规则包括多种数据格式的转换规则；响应于转换指令，从转换规则中确定出目标格式的转换规则；基于目标转换规则对页面树形结构信息进行转换，获得目标格式的页面配置信息。一方面，提供了一种页面配置信息确定装置，该装置包括：获取模块，从页面设计数据中获取节点的布局信息和节点的层叠样式表；生成模块，用于结合布局信息和层叠样式表，生成页面树形结构信息，页面树形结构信息包括多个节点之间的结构和节点对应的层叠样式；转换模块，用于将页面树形结构信息转换为目标格式的页面配置信息。一方面，提供了一种计算机设备，该计算机设备包括一个或多个处理器和一个或多个存储器，该一个或多个存储器中存储有至少一条指令，该至少一条指令由该一个或多个处理器加载并执行以实现如上述任一种可能实现方式的页面配置信息确定方法所执行的操作。一方面，提供了一种计算机可读存储介质，该存储介质中存储有至少一条指令，该至少一条指令由处理器加载并执行以实现如上述任一种可能实现方式的页面配置信息确定方法所执行的操作。本专利技术实施例提供的技术方案带来的有益效果至少包括：本专利技术通过从页面设计数据中自动提取出页面的布局信息以及对应的层叠样式表，将页面设计数据自动转换成目标格式的页面配置信息，提高了将页面设计数据向视图层的页面配置信息转换的效率，降低了人力物力的消耗，缩短了前端开发的周期，同时，还可以针对不同的平台将页面设计数据自动转换成对应的页面配置信息，更进一步地提高了效率、降低了人力物力的消耗。附图说明为了更清楚地说明本专利技术实施例中的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本专利技术的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。图1是本专利技术实施例提供的一种页面配置信息确定方法的示意图；图2是本专利技术实施例提供的一种获取节点的布局信息的流程示意图；图3是本专利技术实施例提供的一种对页面图像的各个区域进行遮罩处理的流程示意图；图4是本专利技术实施例提供的一种生成节点布局信息的流程示意图；图5是本专利技术实施例提供的一种确定页面树形结构信息的流程示意图；图6是本专利技术实施例提供的一种将页面树形结构信息转换为页面配置信息的流程示意图；图7是本专利技术实施例提供的一种页面配置信息确定装置的示意图；图8是本专利技术实施例提供的一种页面配置信息确定系统的结构示意图；图9是本专利技术实施例提供的计算机设备的结构示意图；图10是本专利技术实施例提供的终端的结构框图。具体实施方式为使本专利技术的目的、技术方案和优点更加清楚，下面将结合附图对本专利技术实施方式作进一步地详细描述。图1是本专利技术实施例提供的一种页面配置信息确定方法的示意图。该方法可以应用于任一计算机设备，该计算机设备可以是终端或者服务器，参见图1，该实施例包括：101、从页面设计数据中获取节点的布局信息和节点的层叠样式表。在本专利技术的一个实施例中，页面开发是指创建网页或者应用的界面等前端页面呈现给用户的过程，在一个页面开发场景中，基于实际需求对页面进行视觉设计，设计出页面设计数据，该页面设计数据包括页面图像、页面内容、页面样式等，将页面设计数据转换为对应的代码，在终端上执行该代码，展示所设计的页面；其中，在页面设计数据的转换过程中，将页面中的多个区域以方框的形式进行勾画，将勾画出的每一个方框本文档来自技高网...

【技术保护点】
1.一种页面配置信息确定方法，其特征在于，包括：从页面设计数据中获取节点的布局信息和节点的层叠样式表；结合所述布局信息和所述层叠样式表，得到页面树形结构信息，所述页面树形结构信息包括多个节点之间的结构和节点对应的层叠样式；将所述页面树形结构信息转换为目标格式的页面配置信息。

【技术特征摘要】
1.一种页面配置信息确定方法，其特征在于，包括：从页面设计数据中获取节点的布局信息和节点的层叠样式表；结合所述布局信息和所述层叠样式表，得到页面树形结构信息，所述页面树形结构信息包括多个节点之间的结构和节点对应的层叠样式；将所述页面树形结构信息转换为目标格式的页面配置信息。2.根据权利要求1所述的方法，其特征在于，所述从页面设计数据中获取节点的布局信息，包括：从所述页面设计数据提取页面图像；基于所述页面图像的多个目标区域，分别确定多个节点；将所述多个目标区域之间的嵌套关系确定为所述多个节点之间的从属关系，得到所述多个节点的布局信息。3.根据权利要求2所述的方法，其特征在于，所述基于所述页面图像的多个目标区域，分别确定多个节点，包括：获取遮罩模板，所述遮罩模板具有多个遮罩区域；基于所述遮罩模板对所述页面图像进行遮罩处理，将未被所述多个遮罩区域所遮罩的区域、各个区域的子区域以及所述页面图像的整体区域确定为目标区域；将每个所述目标区域确定为一个节点。4.根据权利要求2所述的方法，其特征在于，所述将所述多个目标区域之间的嵌套关系确定为所述多个节点之间的从属关系，得到所述多个节点的布局信息，包括：将所述多个目标区域中最大目标区域确定为父目标区域；将所述父目标区域中嵌套的多个子区域确定为子目标区域，生成所述父目标区域与所述子目标区域之间的嵌套关系；将所述嵌套关系作为对应节点之间的从属关系，获得所述多个节点的布局信息。5.根据权利要求1所述的方法，其特征在于，所述结合所述布局信息和所述层叠样式表，得到页面树形结构信息，包括：基于所述布局信息中多个节点之间的从属关系，生成树形结构；从所述层叠样式...

【专利技术属性】
技术研发人员：张鑫淼，纪伟，张岩，周熠，王冬，
申请(专利权)人：北京三快在线科技有限公司，
类型：发明
国别省市：北京,11