CN110262788A - 页面配置信息确定方法、装置、计算机设备及存储介质 - Google Patents

Abstract

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

Description

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

技术领域

本发明涉及计算机技术领域，特别涉及一种页面配置信息确定方法、装置、计算机设备及存储介质。

背景技术

前端开发是指创建网页页面或应用程序等前端界面呈现给用户的过程，其主要职能是把互联网产品的界面更好地呈现给用户，通过例如超文本标记语言(HTML，HyperTextMarkup Language)、层叠样式表(CCS，Cascading Style Sheet)工具及脚本语言(JavaScript)以及衍生出来的各种技术、框架、解决方案等，实现互联网产品的用户界面交互。在一个互联网产品的页面开发过程主要包括：(1)获取页面设计数据，该页面设计数据通常是设计师绘制出来的图像文件，包括了页面布局以及页面内容；(2)人工分析页面设计数据，确定出页面中节点的布局以及节点的样式；(3)人工编写代码描述节点的布局以及节点的样式；(4)将编写好的代码转换成图形处理器能够执行的页面配置信息，例如视图层代码，基于该页面配置信息可以实现在目标终端屏幕上显示与页面设计数据对应的页面。

但是，针对于上述的这种前端开发过程，从页面设计数据转换成页面配置信息的过程中需要大量的人工操作，降低了前端开发的效率，进一步的，如果是对不同的平台进行前端开发时，例如ios系统和Andriod系统，其对应的前端框架协议也不相同，在前端开发过程还需要针对于不同的平台设计不同的开发流程，所耗费的大量人力物力只会更加巨大，前端开发的效率也更低。

发明内容

本发明实施例提供了一种页面配置信息确定方法、装置、计算机设备及存储介质,能够解决现有技术中前端开发效率低的问题。该技术方案如下：

一方面，提供了一种页面配置信息确定方法，该方法包括：

从页面设计数据中获取节点的布局信息和节点的层叠样式表；

结合布局信息和层叠样式表，得到页面树形结构信息，页面树形结构信息包括多个节点之间的结构和节点对应的层叠样式；

将页面树形结构信息转换为目标格式的页面配置信息。

在本发明的一个实施例中，上述从页面设计数据中获取节点的布局信息，包括：

从页面设计数据提取页面图像；

将页面图像的多个目标区域确定为对应的节点；

将多个目标区域之间的嵌套关系确定为对应的节点之间的从属关系，生成节点的布局信息。

在本发明的一个实施例中，上述从页面设计数据中获取节点的布局信息，包括：

从页面设计数据提取页面图像；

基于页面图像的多个目标区域，分别确定多个节点；

将多个目标区域之间的嵌套关系确定为多个节点之间的从属关系，得到多个节点的布局信息。

在本发明的一个实施例中，上述基于页面图像的多个目标区域，分别确定多个节点，包括：

获取遮罩模板，遮罩模板具有多个遮罩区域；

基于遮罩模板对页面图像进行遮罩处理，将未被多个遮罩区域所遮罩的区域、各个区域的子区域以及页面图像的整体区域确定为目标区域；

将每个目标区域确定为一个节点。

在本发明的一个实施例中，上述将多个目标区域之间的嵌套关系确定为多个节点之间的从属关系，得到多个节点的布局信息，包括：

将多个目标区域中最大目标区域确定为父目标区域；

将父目标区域中嵌套的多个子区域确定为子目标区域，生成父目标区域与子目标区域之间的嵌套关系；

将嵌套关系作为对应节点之间的从属关系，获得多个节点的布局信息。

在本发明的一个实施例中，上述结合布局信息和层叠样式表，得到页面树形结构信息，包括：

基于布局信息中多个节点之间的从属关系，生成树形结构；

从层叠样式表中获取多个节点对应的层叠样式，将层叠样式与树形结构中对应的节点绑定，得到页面树形结构信息。

在本发明的一个实施例中，上述从层叠样式表中获取节点对应的层叠样式，将层叠样式与树形结构信息中对应的节点绑定，包括：

为树形结构信息的各个节点分配对应的身份信息；

将各个节点对应的层叠样式与对应的身份信息绑定。

在本发明的一个实施例中，上述将页面树形结构信息转换为目标格式的页面配置信息，包括：

获取转换规则，转换规则包括多种数据格式的转换规则；

响应于转换指令，从转换规则中确定出目标格式的转换规则；

基于目标转换规则对页面树形结构信息进行转换，获得目标格式的页面配置信息。

一方面，提供了一种页面配置信息确定装置，该装置包括：

获取模块，从页面设计数据中获取节点的布局信息和节点的层叠样式表；

生成模块，用于结合布局信息和层叠样式表，生成页面树形结构信息，页面树形结构信息包括多个节点之间的结构和节点对应的层叠样式；

转换模块，用于将页面树形结构信息转换为目标格式的页面配置信息。

一方面，提供了一种计算机设备，该计算机设备包括一个或多个处理器和一个或多个存储器，该一个或多个存储器中存储有至少一条指令，该至少一条指令由该一个或多个处理器加载并执行以实现如上述任一种可能实现方式的页面配置信息确定方法所执行的操作。

一方面，提供了一种计算机可读存储介质，该存储介质中存储有至少一条指令，该至少一条指令由处理器加载并执行以实现如上述任一种可能实现方式的页面配置信息确定方法所执行的操作。

本发明实施例提供的技术方案带来的有益效果至少包括：

本发明通过从页面设计数据中自动提取出页面的布局信息以及对应的层叠样式表，将页面设计数据自动转换成目标格式的页面配置信息，提高了将页面设计数据向视图层的页面配置信息转换的效率，降低了人力物力的消耗，缩短了前端开发的周期，同时，还可以针对不同的平台将页面设计数据自动转换成对应的页面配置信息，更进一步地提高了效率、降低了人力物力的消耗。

附图说明

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

图1是本发明实施例提供的一种页面配置信息确定方法的示意图；

图2是本发明实施例提供的一种获取节点的布局信息的流程示意图；

图3是本发明实施例提供的一种对页面图像的各个区域进行遮罩处理的流程示意图；

图4是本发明实施例提供的一种生成节点布局信息的流程示意图；

图5是本发明实施例提供的一种确定页面树形结构信息的流程示意图；

图6是本发明实施例提供的一种将页面树形结构信息转换为页面配置信息的流程示意图；

图7是本发明实施例提供的一种页面配置信息确定装置的示意图；

图8是本发明实施例提供的一种页面配置信息确定系统的结构示意图；

图9是本发明实施例提供的计算机设备的结构示意图；

图10是本发明实施例提供的终端的结构框图。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚，下面将结合附图对本发明实施方式作进一步地详细描述。

图1是本发明实施例提供的一种页面配置信息确定方法的示意图。该方法可以应用于任一计算机设备，该计算机设备可以是终端或者服务器，参见图1，该实施例包括：

101、从页面设计数据中获取节点的布局信息和节点的层叠样式表。

在本发明的一个实施例中，页面开发是指创建网页或者应用的界面等前端页面呈现给用户的过程，在一个页面开发场景中，基于实际需求对页面进行视觉设计，设计出页面设计数据，该页面设计数据包括页面图像、页面内容、页面样式等，将页面设计数据转换为对应的代码，在终端上执行该代码，展示所设计的页面；其中，在页面设计数据的转换过程中，将页面中的多个区域以方框的形式进行勾画，将勾画出的每一个方框作为一个节点，再基于各个方框之间的关系确定对应的节点的布局信息。

在本发明的一个实施例中，在对页面进行视觉设计的过程中，需要对页面样式的设计进行定义和记录，通过层叠样式表来记录所设计页面中各个区域的样式，在将各个区域转换为节点后，从层叠样式表中获取节点对应的层叠样式，并与该节点绑定。

在本发明的一个实施例中，上述页面设计数据可以是HTML格式的数据或可扩展标记语言(XML，Extensible Markup Language)格式的数据，上述层叠样式表可以直接存储于HTML格式的页面设计数据或XML格式的页面设计数据，或者以单独的样式单文件存储，无论对于上述任何一种存储方式，层叠样式表中包含了将层叠样式应用到指定框架或节点的规则；从页面设计数据中获取节点的层叠样式表可以存储在一个带有文件扩展名为.css的文件中。

102、结合布局信息和层叠样式表，生成页面树形结构信息，页面树形结构信息包括多个节点之间的结构和节点对应的层叠样式。

在本发明的一个实施例中，通过预设的树形插件自动对节点的布局信息进行描述，生成该布局信息的树形结构信息，再将节点的层叠样式表与该树形结构信息进行绑定，最终获得页面树形结构信息。

103、将页面树形结构信息转换为目标格式的页面配置信息。

在本发明的一个实施例中，针对于所接收到的转换指令，从语法规则集合中确定出与该转换指令对应的语法规则，字符串转换模块基于该语法规则对页面树形结构信息进行转换，获得目标格式的页面配置信息，其中，上述语法规则集合整合了多个前端框架的语法规则，比如vue.js框架的语法规则、React框架的语法规则等。

本发明通过从页面设计数据中自动提取出页面的布局信息以及对应的层叠样式表，将页面设计数据自动转换成目标格式的页面配置信息，提高了将页面设计数据向视图层的页面配置信息转换的效率，降低了人力物力的消耗，缩短了前端开发的周期。

基于上述图1所示实施例，步骤101“从页面设计数据中获取节点的布局信息”可以采用下述方式实现，图2是本发明实施例提供的一种获取节点的布局信息的流程示意图。参见图2，该实施例包括：

201、从页面设计数据提取页面图像。

其中，页面设计数据中包括了页面的视觉文件，即页面图像，将该页面图像提取出后，即可以对页面图像进行框化处理，将页面图像的各个区域的范围以方框的形式进行框化，将框化后的方框确定为对应的节点，以实现页面图像的代码化。

202、基于页面图像的多个目标区域，分别确定多个节点。

在一种可能的实现方式中，通过前端开发系统中的半透明遮罩模块对页面图像的各个区域进行遮罩处理，按照区域之间的嵌套关系依次提取出目标区域，并将目标区域确定为对应的节点。

203、将多个目标区域之间的嵌套关系确定为多个节点之间的从属关系，得到多个节点的布局信息。

在本发明的一个实施例中，基于步骤202中对页面图像的各个区域进行遮罩处理的流程，还可以确定出目标区域之间的嵌套关系，从而实现确定出节点之间的从属关系，生成节点的布局信息。

基于上述图2所示实施例，步骤202“将页面图像的多个目标区域确定为对应的节点”可以采用下述方式实现，图3是本发明实施例提供的一种页面图像的各个区域进行遮罩处理的流程示意图。参见图3，对页面图像的各个区域进行遮罩处理的具体过程包括以下步骤：

301、获取遮罩模板。

在本发明的一个实施例中，获取到的遮罩模板包括多个遮罩区域，通过各个遮罩区域可以从页面图像中确定出目标区域。

302、基于遮罩模板对页面图像进行遮罩处理，将未被多个遮罩区域所遮罩的区域、各个区域的子区域以及页面图像的整体区域确定为目标区域。

在本发明的一个实施例中，基于遮罩模板对页面图像进行遮罩处理，将页面图像中不关注的区域进行遮罩，露出未被遮罩的区域，即目标区域。

303、将多个目标区域确定为对应的节点。

在本发明的一个实施例中，首先各个目标区域进行框化，确定为最大的节点，然后再将各个目标区域中的子区域进一步进行框化，将这些区域确定为子节点，以此类推，直至目标区域无法框化，为各个节点配置一个身份识别号码(identity)，便于后续层叠样式表的绑定。

在一种可能的实现方式中，将各个框化处理的目标区域确定为对应的节点后，生成一个对应的标签，通过HTML格式的代码将各个节点对应的标签进行存储。

在步骤301-303中，对页面图像进行遮罩处理的过程后还可以确定出各个目标区域之间的嵌套关系，具体包括如图4所示的步骤，图4是本发明实施例提供的一种生成节点布局信息的流程示意图。参见图4，对页面图像的生成节点布局信息的流程的具体过程包括以下步骤：

401、将多个目标区域中区域范围最大目标区域确定为父目标区域。

402、将父目标区域中嵌套的目标区域确定为子目标区域，生成父目标区域与子目标区域之间的嵌套关系。

403、将嵌套关系作为对应节点之间的从属关系，生成节点的布局信息。

在本发明的一个实施例中，上述一个父目标区域中可能嵌套多个子目标区域，而子目标区域之间的关系可能是并列关系，也可能是包含关系，因此，可以基于父目标区域与子目标区域之间的嵌套关系作为对应节点之间的从属关系，基于该从属关系生成节点的布局信息。

基于上述图1所示实施例，步骤102“结合布局信息和层叠样式表，生成页面树形结构信息，页面树形结构信息包括多个节点之间的结构和节点对应的层叠样式”可以采用下述方式实现，图5是本发明实施例提供的一种确定页面树形结构信息的流程示意图。参见图5，该实施例包括：

501、基于布局信息中多个节点之间的从属关系，生成树形结构。

在本发明的一个实施例中，可以通过树形结构插件，比如easyui、dynatree、ztree等，实现对布局信息中节点之间的从属关系进行树形结构描述，获得树形结构，具体的，首先，基于布局信息中节点之间的从属关系设置一个树形结构，其次，将节点之间的从属关系填入至上述预先设置的树形结构中，获得树形结构的数据：

{id:1,pId:0,name:"父节点1-展开"},

{id:11,pId:1,name:"父节点11-折叠"},

{id:111,pId:11,name:"叶子节点111"},

{id:12,pId:1,name:"父节点12-折叠"},

{id:121,pId:12,name:"叶子节点121"},

{id:13,pId:1,name:"父节点13-没有子节点"},

{id:2,pId:0,name:"父节点2-折叠"},

{id:21,pId:2,name:"父节点21-展开"},

{id:211,pId:21,name:"叶子节点211"},

{id:212,pId:21,name:"叶子节点212"},

{id:213,pId:21,name:"叶子节点213"},

{id:214,pId:21,name:"叶子节点214"},

{id:22,pId:2,name:"父节点22-折叠"},

{id:221,pId:22,name:"叶子节点221"},

{id:222,pId:22,name:"叶子节点222"},

{id:223,pId:22,name:"叶子节点223"},

{id:224,pId:22,name:"叶子节点224"},

{id:23,pId:2,name:"父节点23-折叠"},

{id:231,pId:23,name:"叶子节点231"},

{id:232,pId:23,name:"叶子节点232"},

{id:233,pId:23,name:"叶子节点233"},

{id:234,pId:23,name:"叶子节点234"},

{id:3,pId:0,name:"父节点3-没有子节点"}

其中，该树形结构可以采用json数据格式，该树形数据结构中示出了各个节点的id、节点之间的从属关系以及各个节点的名称。

502、从层叠样式表中获取多个节点对应的层叠样式，将层叠样式与树形结构中对应的节点绑定，得到页面树形结构信息。

在本发明的一个实施例中，确定出树形结构后，还需要对树形结构中的各个节点绑定对应的层叠样式，具体的，可以基于节点的id在层叠样式表中查找与id对应的层叠样式，将该层叠样式与节点进行绑定，使得树形结构中每个节点绑定有自身的层叠样式，将绑定层叠样式后的树形结构确定为页面树形结构信息。

例如，上述页面树形结构信息可以是下述所示代码：

基于上述图1所示实施例，步骤103“将页面树形结构信息转换为目标格式的页面配置信息”可以采用下述方式实现，图6是本发明实施例提供的一种将页面树形结构信息转换为页面配置信息的流程示意图。参见图6，该实施例包括：

601、获取转换规则，转换规则包括多种数据格式的转换规则。

在一种可能的实现方式中，将现有的不同前端框架的转换规则进行整合后，获得上述转换规则中，基于此，在针对于不同平台进行页面开发时，无需针对于对应的平台重新设计开发流程。

602、响应于转换指令，从转换规则中确定出目标格式的转换规则。

在本发明的一个实施例中，当接收到转换指令后，从转换指令中解析出页面树形结构信息的目标格式，从转换规则中确定出与目标格式匹配的转换规则。

603、基于目标转换规则对页面树形结构信息进行转换，获得目标格式的页面配置信息。

在本发明的一个实施例中，将上述步骤602中确定出的目标格式的转换规则加载至字符串转换器中，即可将页面树形结构信息转换为目标格式的页面配置信息。

本发明公开了一种页面配置信息确定方法，通过从页面设计数据中自动提取出页面的布局信息以及对应的层叠样式表，将页面设计数据自动转换成目标格式的页面配置信息，提高了将页面设计数据向视图层的页面配置信息转换的效率，降低了人力物力的消耗，缩短了前端开发的周期。

上述所有可选技术方案，可以采用任意结合形成本公开的可选实施例，在此不再一一赘述。

下述为本发明的装置实施例，可以用于执行本发明方法实施例。对于本发明装置实施例中未披露的细节，请参照本发明方法实施例。图7是本发明实施例提供的一种页面配置信息确定装置的示意图。参见图7，该装置包括：

获取模块701，从页面设计数据中获取节点的布局信息和节点的层叠样式表；

生成模块702，用于结合布局信息和层叠样式表，生成页面树形结构信息，页面树形结构信息包括多个节点之间的结构和节点对应的层叠样式；

转换模块703，用于将页面树形结构信息转换为目标格式的页面配置信息。

在本发明的一个实施例中，上述获取模块701具体用于：

从页面设计数据提取页面图像；

基于页面图像的多个目标区域，分别确定多个节点；

将多个目标区域之间的嵌套关系确定为多个节点之间的从属关系，得到多个节点的布局信息。

在本发明的一个实施例中，上述获取模块701具体用于：

获取遮罩模板，遮罩模板具有多个遮罩区域；

基于遮罩模板对页面图像进行遮罩处理，将未被多个遮罩区域所遮罩的区域、各个区域的子区域以及页面图像的整体区域确定为目标区域；

将每个目标区域确定为一个节点。

在本发明的一个实施例中，上述获取模块701具体用于：

将多个目标区域中最大目标区域确定为父目标区域；

将父目标区域中嵌套的多个子区域确定为子目标区域，生成父目标区域与子目标区域之间的嵌套关系；

将嵌套关系作为对应节点之间的从属关系，获得多个节点的布局信息。

在本发明的一个实施例中，上述生成模块702具体用于：

基于布局信息中多个节点之间的从属关系，生成树形结构；

从层叠样式表中获取多个节点对应的层叠样式，将层叠样式与树形结构中对应的节点绑定，得到页面树形结构信息。

在本发明的一个实施例中，上述生成模块702具体用于：

为树形结构信息的各个节点分配对应的身份信息；

将各个节点对应的层叠样式与对应的身份信息绑定。

在本发明的一个实施例中，上述转换模块703具体用于：

获取转换规则，转换规则包括多种数据格式的转换规则；

响应于转换指令，从转换规则中确定出目标格式的转换规则；

基于目标转换规则对页面树形结构信息进行转换，获得目标格式的页面配置信息。

下面通过一个页面配置信息确定系统800的实施例对本发明公开的一种页面配置信息确定方法进行详细阐述。

向页面配置信息确定系统800输入数据格式为.html或.xml的页面设计数据，首先，该页面配置信息确定系统800包含一个从页面设计数据中获取节点的布局信息和节点的层叠样式表的工具，通过该工具从页面设计数据的页面图像上自动提取出节点的布局信息以及节点的层叠样式表，并为节点分配一个唯一的id；其次，从层叠样式表提取出每个节点对应的层叠样式，并通过id将层叠样式绑定到对应节点上，形成一个json格式的页面树形结构信息；最后，通过规则引擎将json格式的页面树形结构信息描述转化成目标视图层的页面配置信息，该页面配置信息确定系统800可以大大提高前端的开发效率以及页面设计数据还原的准确程度，图8是本发明实施例提供的一种页面配置信息确定系统800的结构示意图。参见图8，该实施例包括：提取节点布局信息模块801、提取节点层叠样式表模块802、页面树形结构信息模块803以及转换模块804，具体的，

提取节点布局信息模块801：在得到页面设计数据时，利用页面配置信息确定系统800中的半透明遮罩工具，以一种类似于“描绘”的方式自动构造出节点的布局信息，并为每一个布局的节点分配id；至此，得到一组节点的布局信息。

其中，上述提取节点布局信息模块801、提取节点层叠样式表模块802可以基于图7所示的获取模块701实现相关功能。

提取节点层叠样式表模块802：对页面设计数据进行解析，把页面设计数据原有的层叠样式表提取出来，复用其中的层叠样式属性部分，并绑定于节点的布局信息中对应的节点。

其中，上述页面树形结构信息模块803可以基于图7所示的生成模块702实现相关功能。

页面树形结构信息模块803：对801、802中两个模块得出的数据进行合并处理，最终得到一个json格式的页面树结构的描述，页面树结构的描述每一个节点上都绑定有自身的层叠样式。

转换模块804：该转换模块804包含两个功能模块：分别为转换规则整合模块805和转换模块806；其中，转换规则整合模块805内部整合了现有的开源前端框架的语法分析规则(比如VUE、React等前端框架的语法规则)；响应于转换指令，从转换规则整合模块805中确定出目标格式的转换规则，并作为转换模块806转换依据，转化出目标格式的页面配置信息。

其中，转换模块804与上述图7所示的转换模块703对应。

本发明实施例所提出的页面配置信息确定系统800能够提高前端开发的效率，使研发人员能够从手动的布局以及样式转换的工作中解脱出来，降低了人力的消耗还，除此之外，还能够提升前端开发的质量，通过技术手段提升页面设计数据到实际页面展示的还原精准性。

需要说明的是：上述实施例提供的页面配置信息确定装置以及页面配置信息确定系统在确定面配置信息时，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将设备的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。另外，上述实施例提供的页面配置信息确定装置以及页面配置信息确定系统与页面配置信息确定方法实施例属于同一构思，其具体实现过程详见方法实施例，这里不再赘述。

图9是本发明实施例提供的一种计算机设备的结构示意图，该计算机设备900可因配置或性能不同而产生比较大的差异，可以包括一个或一个以上处理器(centralprocessing units，CPU)901和一个或一个以上的存储器902，其中，该存储器902中存储有至少一条指令，该至少一条指令由该处理器901加载并执行以实现上述各个方法实施例提供的页面配置信息确定方法。当然，该计算机设备还可以具有有线或无线网络接口、键盘以及输入输出接口等部件，以便进行输入输出，该计算机设备还可以包括其他用于实现设备功能的部件，在此不做赘述。

在示例性实施例中，还提供了一种计算机可读存储介质，例如包括指令的存储器，上述指令可由终端中的处理器执行以完成上述实施例中页面配置信息确定方法。例如，该计算机可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。

图10是本发明实施例提供的终端1000的结构框图。该终端1000可以是：智能手机、平板电脑、MP3播放器(Moving Picture Experts Group Audio Layer III，动态影像专家压缩标准音频层面3)、MP4(Moving Picture Experts Group Audio Layer IV，动态影像专家压缩标准音频层面4)播放器、笔记本电脑或台式电脑。终端1000还可能被称为用户设备、便携式终端、膝上型终端、台式终端等其他名称。

通常，终端1000包括有：处理器1001和存储器1002。

处理器1001可以包括一个或多个处理核心，比如4核心处理器、8核心处理器等。处理器1001可以采用DSP(Digital Signal Processing，数字信号处理)、FPGA(Field－Programmable Gate Array，现场可编程门阵列)、PLA(Programmable Logic Array，可编程逻辑阵列)中的至少一种硬件形式来实现。处理器1001也可以包括主处理器和协处理器，主处理器是用于对在唤醒状态下的数据进行处理的处理器，也称CPU(Central ProcessingUnit，中央处理器)；协处理器是用于对在待机状态下的数据进行处理的低功耗处理器。在一些实施例中，处理器1001可以在集成有GPU(Graphics Processing Unit，图像处理器)，GPU用于负责显示屏所需要显示的内容的渲染和绘制。一些实施例中，处理器1001还可以包括AI(Artificial Intelligence，人工智能)处理器，该AI处理器用于处理有关机器学习的计算操作。

存储器1002可以包括一个或多个计算机可读存储介质，该计算机可读存储介质可以是非暂态的。存储器1002还可包括高速随机存取存储器，以及非易失性存储器，比如一个或多个磁盘存储设备、闪存存储设备。在一些实施例中，存储器1002中的非暂态的计算机可读存储介质用于存储至少一个指令，该至少一个指令用于被处理器1001所执行以实现本申请中方法实施例提供的虚拟资源确定方法。

在一些实施例中，终端1000还可选包括有：外围设备接口1003和至少一个外围设备。处理器1001、存储器1002和外围设备接口1003之间可以通过总线或信号线相连。各个外围设备可以通过总线、信号线或电路板与外围设备接口1003相连。具体地，外围设备包括：射频电路1004、触摸显示屏1005、摄像头1006、音频电路1007、定位组件1008和电源1009中的至少一种。

外围设备接口1003可被用于将I/O(Input/Output，输入/输出)相关的至少一个外围设备连接到处理器1001和存储器1002。在一些实施例中，处理器1001、存储器1002和外围设备接口1003被集成在同一芯片或电路板上；在一些其他实施例中，处理器1001、存储器1002和外围设备接口1003中的任意一个或两个可以在单独的芯片或电路板上实现，本实施例对此不加以限定。

射频电路1004用于接收和发射RF(Radio Frequency，射频)信号，也称电磁信号。射频电路1004通过电磁信号与通信网络以及其他通信设备进行通信。射频电路1004将电信号转换为电磁信号进行发送，或者，将接收到的电磁信号转换为电信号。可选地，射频电路1004包括：天线系统、RF收发器、一个或多个放大器、调谐器、振荡器、数字信号处理器、编解码芯片组、用户身份模块卡等等。射频电路1004可以通过至少一种无线通信协议来与其它终端进行通信。该无线通信协议包括但不限于：城域网、各代移动通信网络(2G、3G、4G及5G)、无线局域网和/或WiFi(Wireless Fidelity，无线保真)网络。在一些实施例中，射频电路1004还可以包括NFC(Near Field Communication，近距离无线通信)有关的电路，本申请对此不加以限定。

显示屏1005用于显示UI(User Interface，用户界面)。该UI可以包括图形、文本、图标、视频及其它们的任意组合。当显示屏1005是触摸显示屏时，显示屏1005还具有采集在显示屏1005的表面或表面上方的触摸信号的能力。该触摸信号可以作为控制信号输入至处理器1001进行处理。此时，显示屏1005还可以用于提供虚拟按钮和/或虚拟键盘，也称软按钮和/或软键盘。在一些实施例中，显示屏1005可以为一个，设置终端1000的前面板；在另一些实施例中，显示屏1005可以为至少两个，分别设置在终端1000的不同表面或呈折叠设计；在再一些实施例中，显示屏1005可以是柔性显示屏，设置在终端1000的弯曲表面上或折叠面上。甚至，显示屏1005还可以设置成非矩形的不规则图形，也即异形屏。显示屏1005可以采用LCD(Liquid Crystal Display，液晶显示屏)、OLED(Organic Light-Emitting Diode,有机发光二极管)等材质制备。

摄像头组件1006用于采集图像或视频。可选地，摄像头组件1006包括前置摄像头和后置摄像头。通常，前置摄像头设置在终端的前面板，后置摄像头设置在终端的背面。在一些实施例中，后置摄像头为至少两个，分别为主摄像头、景深摄像头、广角摄像头、长焦摄像头中的任意一种，以实现主摄像头和景深摄像头融合实现背景虚化功能、主摄像头和广角摄像头融合实现全景拍摄以及VR(Virtual Reality，虚拟现实)拍摄功能或者其它融合拍摄功能。在一些实施例中，摄像头组件1006还可以包括闪光灯。闪光灯可以是单色温闪光灯，也可以是双色温闪光灯。双色温闪光灯是指暖光闪光灯和冷光闪光灯的组合，可以用于不同色温下的光线补偿。

音频电路1007可以包括麦克风和扬声器。麦克风用于采集用户及环境的声波，并将声波转换为电信号输入至处理器1001进行处理，或者输入至射频电路1004以实现语音通信。出于立体声采集或降噪的目的，麦克风可以为多个，分别设置在终端1000的不同部位。麦克风还可以是阵列麦克风或全向采集型麦克风。扬声器则用于将来自处理器1001或射频电路1004的电信号转换为声波。扬声器可以是传统的薄膜扬声器，也可以是压电陶瓷扬声器。当扬声器是压电陶瓷扬声器时，不仅可以将电信号转换为人类可听见的声波，也可以将电信号转换为人类听不见的声波以进行测距等用途。在一些实施例中，音频电路1007还可以包括耳机插孔。

定位组件1008用于定位终端1000的当前地理位置，以实现导航或LBS(LocationBased Service，基于位置的服务)。定位组件1008可以是基于美国的GPS(GlobalPositioning System，全球定位系统)、中国的北斗系统、俄罗斯的格雷纳斯系统或欧盟的伽利略系统的定位组件。

电源1009用于为终端1000中的各个组件进行供电。电源1009可以是交流电、直流电、一次性电池或可充电电池。当电源1009包括可充电电池时，该可充电电池可以支持有线充电或无线充电。该可充电电池还可以用于支持快充技术。

在一些实施例中，终端1000还包括有一个或多个传感器1100。该一个或多个传感器1100包括但不限于：加速度传感器1101、陀螺仪传感器1102、压力传感器1103、指纹传感器1104、光学传感器1105以及接近传感器1106。

加速度传感器1101可以检测以终端1000建立的坐标系的三个坐标轴上的加速度大小。比如，加速度传感器1101可以用于检测重力加速度在三个坐标轴上的分量。处理器1001可以根据加速度传感器1101采集的重力加速度信号，控制触摸显示屏1005以横向视图或纵向视图进行用户界面的显示。加速度传感器1101还可以用于游戏或者用户的运动数据的采集。

陀螺仪传感器1102可以检测终端1000的机体方向及转动角度，陀螺仪传感器1101可以与加速度传感器1101协同采集用户对终端1000的3D动作。处理器1001根据陀螺仪传感器1102采集的数据，可以实现如下功能：动作感应(比如根据用户的倾斜操作来改变UI)、拍摄时的图像稳定、游戏控制以及惯性导航。

压力传感器1103可以设置在终端1000的侧边框和/或触摸显示屏1005的下层。当压力传感器1103设置在终端1000的侧边框时，可以检测用户对终端1000的握持信号，由处理器1001根据压力传感器1103采集的握持信号进行左右手识别或快捷操作。当压力传感器1103设置在触摸显示屏1005的下层时，由处理器1001根据用户对触摸显示屏1005的压力操作，实现对UI界面上的可操作性控件进行控制。可操作性控件包括按钮控件、滚动条控件、图标控件、菜单控件中的至少一种。

指纹传感器1104用于采集用户的指纹，由处理器1001根据指纹传感器1104采集到的指纹识别用户的身份，或者，由指纹传感器1104根据采集到的指纹识别用户的身份。在识别出用户的身份为可信身份时，由处理器1001授权该用户执行相关的敏感操作，该敏感操作包括解锁屏幕、查看加密信息、下载软件、支付及更改设置等。指纹传感器1104可以被设置终端1000的正面、背面或侧面。当终端1000上设置有物理按键或厂商Logo时，指纹传感器1104可以与物理按键或厂商Logo集成在一起。

光学传感器1105用于采集环境光强度。在一个实施例中，处理器1001可以根据光学传感器1105采集的环境光强度，控制触摸显示屏1005的显示亮度。具体地，当环境光强度较高时，调高触摸显示屏1005的显示亮度；当环境光强度较低时，调低触摸显示屏1005的显示亮度。在另一个实施例中，处理器1001还可以根据光学传感器1105采集的环境光强度，动态调整摄像头组件1006的拍摄参数。

接近传感器1106，也称距离传感器，通常设置在终端1000的前面板。接近传感器1106用于采集用户与终端1000的正面之间的距离。在一个实施例中，当接近传感器1106检测到用户与终端1000的正面之间的距离逐渐变小时，由处理器1001控制触摸显示屏1005从亮屏状态切换为息屏状态；当接近传感器1106检测到用户与终端1000的正面之间的距离逐渐变大时，由处理器1001控制触摸显示屏1005从息屏状态切换为亮屏状态。

本领域技术人员可以理解，图10中示出的结构并不构成对终端1000的限定，可以包括比图示更多或更少的组件，或者组合某些组件，或者采用不同的组件布置。

本领域普通技术人员可以理解实现上述实施例的全部或部分步骤可以通过硬件来完成，也可以通过程序来指令相关的硬件完成，该程序可以存储于一种计算机可读存储介质中，上述提到的存储介质可以是只读存储器，磁盘或光盘等。

以上仅为本发明的较佳实施例，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (10)

1.一种页面配置信息确定方法，其特征在于，包括：

从页面设计数据中获取节点的布局信息和节点的层叠样式表；

结合所述布局信息和所述层叠样式表，得到页面树形结构信息，所述页面树形结构信息包括多个节点之间的结构和节点对应的层叠样式；

将所述页面树形结构信息转换为目标格式的页面配置信息。

2.根据权利要求1所述的方法，其特征在于，所述从页面设计数据中获取节点的布局信息，包括：

从所述页面设计数据提取页面图像；

基于所述页面图像的多个目标区域，分别确定多个节点；

将所述多个目标区域之间的嵌套关系确定为所述多个节点之间的从属关系，得到所述多个节点的布局信息。

3.根据权利要求2所述的方法，其特征在于，所述基于所述页面图像的多个目标区域，分别确定多个节点，包括：

获取遮罩模板，所述遮罩模板具有多个遮罩区域；

基于所述遮罩模板对所述页面图像进行遮罩处理，将未被所述多个遮罩区域所遮罩的区域、各个区域的子区域以及所述页面图像的整体区域确定为目标区域；

将每个所述目标区域确定为一个节点。

4.根据权利要求2所述的方法，其特征在于，所述将所述多个目标区域之间的嵌套关系确定为所述多个节点之间的从属关系，得到所述多个节点的布局信息，包括：

将所述多个目标区域中最大目标区域确定为父目标区域；

将所述父目标区域中嵌套的多个子区域确定为子目标区域，生成所述父目标区域与所述子目标区域之间的嵌套关系；

将所述嵌套关系作为对应节点之间的从属关系，获得所述多个节点的布局信息。

5.根据权利要求1所述的方法，其特征在于，所述结合所述布局信息和所述层叠样式表，得到页面树形结构信息，包括：

基于所述布局信息中多个节点之间的从属关系，生成树形结构；

从所述层叠样式表中获取所述多个节点对应的层叠样式，将所述层叠样式与所述树形结构中对应的节点绑定，得到页面树形结构信息。

6.根据权利要求5所述的方法，其特征在于，所述从所述层叠样式表中获取所述节点对应的层叠样式，将所述层叠样式与所述树形结构信息中对应的节点绑定，包括：

为所述树形结构信息的各个节点分配对应的身份信息；

将所述各个节点对应的层叠样式与对应的身份信息绑定。

7.根据权利要求1所述的方法，其特征在于，所述将所述页面树形结构信息转换为目标格式的页面配置信息，包括：

获取转换规则，所述转换规则包括多种数据格式的转换规则；

响应于转换指令，从所述转换规则中确定出目标格式的转换规则；

基于所述目标转换规则对所述页面树形结构信息进行转换，获得目标格式的页面配置信息。

8.一种页面配置信息确定装置，其特征在于，所述装置包括：

获取模块，从页面设计数据中获取节点的布局信息和节点的层叠样式表；

生成模块，用于结合所述布局信息和所述层叠样式表，生成页面树形结构信息，所述页面树形结构信息包括多个节点之间的结构和节点对应的层叠样式；

转换模块，用于将所述页面树形结构信息转换为目标格式的页面配置信息。

9.一种计算机设备，其特征在于，所述计算机设备包括一个或多个处理器和一个或多个存储器，所述一个或多个存储器中存储有至少一条指令，所述至少一条指令由所述一个或多个处理器加载并执行以实现如权利要求1至权利要求7任一项所述的页面配置信息确定方法所执行的操作。

10.一种计算机可读存储介质，其特征在于，所述存储介质中存储有至少一条指令，所述至少一条指令由处理器加载并执行以实现如权利要求1至权利要求7任一项所述的页面配置信息确定方法所执行的操作。