CN112182458B - 一种页面数据处理方法及装置 - Google Patents

Abstract

本发明提供一种页面数据处理方法及装置，在获得页面设计文件后，从页面设计文件中获得每个图层的属性数据，基于每个图层的属性数据，确定每个图层各自对应的图层导出规则，基于每个图层各自对应的图层导出规则，从页面设计文件中导出每个图层的素材数据，实现基于每个图层的属性数据自动导出每个图层的素材数据，因此无论是页面设计文件初次完成还是对页面设计文件进行修改之后，均能够基于对应的页面设计文件中每个图层的属性数据自动导出素材数据，省去人工导出素材数据的环节，提高页面生成效率。且自动导出的素材数据与页面设计文件中的素材数据保持一致，使得基于导出的素材数据生成的页面与页面设计文件对应的页面一致，提高页面的准确度。

Description

一种页面数据处理方法及装置

技术领域

本发明属于数据处理技术领域，更具体地说，尤其涉及一种页面数据处理方法及装置。

背景技术

目前为了塑造商家的品牌形象以及增加品牌下的产品流量，为商场设计的页面包含大量的图片和动画效果，这些页面数据会存储在页面的页面涉及文件中，如PSD（PhotoShop Document，图像处理软件 Photoshop的专用格式）文件中。

在页面设计师设计好页面之后，页面开发人员以PSD文件中的每个图层为单位，手动导出每个图层对应的素材数据，如每个图层对应的图片和/或每个图片的坐标，并由页面开发人员将手动导出的素材数据输入到脚本文件中，这样浏览器运行时能够加载该脚本文件，从而在浏览器的界面中显示页面。

综上可知，目前从页面设计完成到页面在浏览器的界面中显示，需要手动导出每个图层对应的素材数据且手动复制素材数据到脚本文件中，降低页面生成效率，且在手动导出和手动复制的任一环节可能会出错，如漏掉一条素材数据，从而使得生成的页面与设计的页面不相符，降低页面的准确度。

发明内容

有鉴于此，本发明的目的在于提供一种页面数据处理方法及装置，用于从页面设计文件中自动导出每个图层的素材数据。技术方案如下：

一方面，本发明提供一种页面数据处理方法，所述方法包括：

从页面设计文件中获得每个图层的属性数据；

基于每个图层的属性数据，确定每个图层各自对应的图层导出规则；

基于每个图层各自对应的图层导出规则，从所述页面设计文件中导出每个图层的素材数据。

优选的，所述基于每个图层的属性数据，确定每个图层各自对应的图层导出规则包括：

从所述每个图层的属性数据中，获得每个图层的图层颜色；

基于每个图层的图层颜色，确定每个图层各自对应的图层导出规则，其中，不同图层颜色的图层对应的图层导出规则导出的素材数据不同。

优选的，所述基于每个图层各自对应的图层导出规则，从所述页面设计文件中导出每个图层的素材数据包括：

如果当前待处理图层的图层颜色为空，从所述页面设计文件中导出所述当前待处理图层对应的各个第一图片、所述各个第一图片的位置数据和所述各个第一图片的名称；

如果当前待处理图层的图层颜色为红色，从所述页面设计文件中导出所述当前待处理图层对应的各个第二图片、所述各个第二图片的位置数据和所述各个第二图片的名称，所述第二图片的图片格式与所述第一图片的图片格式不同；

如果当前待处理图层的图层颜色为绿色，从所述页面设计文件中导出所述当前待处理图层对应的各个第三图片的位置数据和所述各个第三图片的名称；

如果当前待处理图层的图层颜色为蓝色，从所述页面设计文件中导出所述当前待处理图层对应的各个第四图片和所述各个第四图片的名称；

如果当前待处理图层的图层颜色为灰色，禁止从所述页面设计文件中导出所述当前待处理图层的素材数据。

优选的，所述基于每个图层的属性数据，确定每个图层各自对应的图层导出规则包括：

从所述每个图层的属性数据中，获得每个图层所在图层组的标识；

基于每个图层所在图层组的标识，确定每个图层各自对应的图层导出规则，其中，不同标识的图层组的图层对应的图层导出规则导出的素材数据不同。

优选的，所述基于每个图层各自对应的图层导出规则，从所述页面设计文件中导出每个图层的素材数据包括：

如果当前待处理图层所在图层组的标识为空，禁止从所述页面设计文件中导出所述当前待处理图层的素材数据；

如果当前待处理图层所在图层组的标识为图片，从所述页面设计文件中导出所述当前待处理图层对应的各个第一图片和所述各个第一图片的名称；

如果当前待处理图层所在图层组的标识为数据，从所述页面设计文件中导出所述当前待处理图层对应的各个第二图片、所述各个第二图片的位置数据和所述各个第二图片的名称，所述第二图片的图片格式与所述第一图片的图片格式不同；

如果当前待处理图层所在图层组的标识非空且所述标识不是图片和数据，从所述页面设计文件中导出所述当前待处理图层对应的第三图片的位置数据和所述第三图片的名称。

优选的，所述第一图片的高度和所述第一图片的宽度为偶数；

所述第二图片的高度和所述第二图片的宽度为偶数。

优选的，所述方法还包括：

构建与每个素材数据各自对应的待加载对象；

利用每个素材数据对各自对应的待加载对象进行描述；

加载各个所述待加载对象，从而生成与所述页面设计文件对应的页面。

优选的，所述利用每个素材数据对各自对应的待加载对象进行描述包括：

基于每个素材数据中的图片的名称和图片的位置数据，获得每个素材数据各自对应的待加载对象的属性数据；

将所述每个素材数据中的图片与各自对应的待加载对象建立对应关系。

又一方面，本发明还提供一种页面数据处理装置，所述装置包括：

获得单元，用于从页面设计文件中获得每个图层的属性数据；

确定单元，用于基于每个图层的属性数据，确定每个图层各自对应的图层导出规则；

导出单元，用于基于每个图层各自对应的图层导出规则，从所述页面设计文件中导出每个图层的素材数据。

又一方面，本发明还提供一种终端，所述终端包括：

处理器和存储器；

其中，所述处理器用于执行所述存储器中存储的程序；

所述存储器用于存储程序，所述程序至少用于：

从页面设计文件中获得每个图层的属性数据；

基于每个图层的属性数据，确定每个图层各自对应的图层导出规则；

基于每个图层各自对应的图层导出规则，从所述页面设计文件中导出每个图层的素材数据。

又一方面，本发明还提供一种存储介质，所述存储介质中存储有计算机可执行指令，所述计算机可执行指令被处理器加载并执行时，实现上述页面数据处理方法。

从上述技术方案可知，在获得页面设计文件后，从页面设计文件中获得每个图层的属性数据，基于每个图层的属性数据，确定每个图层各自对应的图层导出规则，基于每个图层各自对应的图层导出规则，从页面设计文件中导出每个图层的素材数据，实现基于每个图层的属性数据自动导出每个图层的素材数据，因此无论是页面设计文件初次完成还是对页面设计文件进行修改之后，均能够基于对应的页面设计文件中每个图层的属性数据自动导出素材数据，省去人工导出素材数据的环节，提高页面生成效率。并且自动导出的素材数据与页面设计文件中的素材数据保持一致，防止导出素材数据过程中素材数据的丢失，使得基于导出的素材数据生成的页面与页面设计文件对应的页面一致，提高页面的准确度。

附图说明

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

图1是本发明实施例提供的一种页面数据处理方法的流程图；

图2是本发明实施例提供的一种素材数据导出的流程图；

图3是本发明实施例提供的另一种素材数据导出的流程图；

图4是本发明实施例提供的另一种页面数据处理方法的流程图；

图5是本发明实施例提供的页面数据处理方法的应用示意图；

图6是本发明实施例提供的一种页面数据处理装置的结构示意图；

图7是本发明实施例提供的一种终端的结构示意图。

具体实施方式

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

请参阅图1，其示出了本申请实施例提供的一种页面数据处理方法，用于自动导出每个图层的素材数据，可以包括以下步骤：

101：从页面设计文件中获得每个图层的属性数据。

可以理解的是：页面设计文件是设计页面生成的一个文件，该页面设计文件记录页面包括的所有图层、通道、参考线、注解和颜色模式等数据，使得页面设计文件能够保留页面的各个图层对应的所有素材数据，即页面的各个图层包括的所有素材数据，例如页面设计文件的一种表现形式是PSD文件。

由于页面设计文件包括所有图层等对象的数据，所以从页面设计文件中能够提取到每个图层的属性数据，其中任一个图层的属性数据能够从图层的图层属性中获得，以通过图层的属性数据复原该图层，如图层的属性数据用于表征图层所属图层组、图层的图层颜色以及图层包括的内容，例如图层包括的内容包括但不限于：图层包括的图片有哪些、图层包括的图片之间的位置关系以及图层包括的图片的位置等等，通过这些数据能够复原图层。

102：基于每个图层的属性数据，确定每个图层各自对应的图层导出规则。其中图层导出规则用于指示对图层进行自动导出操作，以从页面设计文件中导出图层的素材数据，而不同图层对应的图层导出规则可能会不同，使得基于不同图层导出规则导出的素材数据也所有不同。

在本实施例中，基于每个图层的属性数据确定图层导出规则包括但不限于如下两种方式：

第一种方式：从每个图层的属性数据中，获得每个图层的图层颜色，基于每个图层的图层颜色，确定每个图层各自对应的图层导出规则，其中不同图层颜色的图层对应的图层导出规则导出的素材数据不同。

也就是说图层导出规则可以基于图层颜色设定，使得具有不同图层颜色的图层使用不同的图层导出规则，相同图层颜色的图层能够使用相同的图层导出规则。而与图层颜色匹配的图层导出规则具体导出何种素材数据需要视生成页面时页面对各图层所需内容而定，本实施例会给出一种不同图层颜色对应的图层导出规则的实例，但是并不限于本实施例所提供的图层导出规则，在实际应用中可以根据页面对各图层所需内容而更新图层导出规则。

第二种方式：从每个图层的属性数据中，获得每个图层所在图层组的标识，基于每个图层所在图层组的标识，确定每个图层各自对应的图层导出规则，其中，不同标识的图层组的图层对应的图层导出规则导出的素材数据不同。

区别于第一种方式中采用图层颜色确定图层导出规则，第二种方式采用图层组确定图层导出规则，基于图层组的方式对图层进行分组，以将属于同一种类型图层组的各图层采用同一种图层导出规则。同样的与图层组匹配的图层导出规则具体导出何种素材数据需要视生成页面时页面对各图层所需内容而定，本实施例会给出一种不同图层组对应的图层导出规则的实例，但是并不限于本实施例所提供的图层导出规则，在实际应用中可以根据页面对各图层所需内容而更新图层导出规则。

其中图层所在图层组的标识用于表示图层所在图层组的类型，以指示属于该图层组中图层包括的内容，例如图层所在图层组的标识为：空、图片（image）、数据（jpg data）和其他（该其他是指标识非空且不是图片和数据）中的一种，如果图层组的标识为空说明该图层组中各个图层不包括图片，如果图层组的标识为图片说明该图层组中各个图层包括图片，如果图层组的标识为数据说明该图层组中各个图层包括图片且包括各个图片的位置数据，如果图层组的标识为其他说明该图层组保留各个图片的位置数据。

103：基于每个图层各自对应的图层导出规则，从页面设计文件中导出每个图层的素材数据，实现基于图层导出规则自动从页面设计文件中导出每个图层的素材数据，省去人工导出素材数据的环节。

在本实施例中，实现自动导出素材数据的一种方式可以是：开发一个具有本实施例提供的页面数据处理方法的脚本文件，将该脚本文件存储到页面设计文件对应的目录下，例如如果页面设计文件为PSD文件，则可以将具有本实施例提供的页面数据处理方法的脚本文件放到目录/Applications/Adobe Photoshop CC 2017/Presets/Scripts/中，并通过Photoshop软件的菜单中的边界功能，将脚本文件与设备中的一个操作方式建立对应关系，例如将脚本文件与设备中的一个按键（可以是物理按键也可以是虚拟按键）的操作（如按键的点击操作）建立对应关系，或者将脚本文件与设备中鼠标的一种操作建立对应关系等等。

在页面设计文件开启之后，监测是否获得与脚本文件建立对应关系的操作方式，如果获得触发脚本文件从页面设计文件中自动导出每个图层的素材数据。

下面分别从图层颜色和图层组两方面阐述基于图层导出规则对每个图层的导出，如果图层导出规则基于图层颜色确定，基于图层导出规则对图层的导出过程如图2所示，可以包括以下步骤：

201：如果当前待处理图层的图层颜色为空，从页面设计文件中导出当前待处理图层对应的各个第一图片、各个第一图片的位置数据和各个第一图片的名称，其中第一图片的位置数据可以是第一图片在其所属图层的坐标，而第一图片的名称则是用于区分第一图片，以防止加载时出错。

202：如果当前待处理图层的图层颜色为红色，从页面设计文件中导出当前待处理图层对应的各个第二图片、各个第二图片的位置数据和各个第二图片的名称，第二图片的图片格式与第一图片的图片格式不同。

其中第二图片的图片格式可以是png（Portable Network Graphics，便携式网络图形）格式，第一图片的图片格式可以是jpg（Joint Photographic Experts Group）格式，之所以第一图片采用jpg格式，第二图片采用png格式是因为在页面加载时页面对各个图层所需图片格式要求而定，如果页面对各个图层所需图片格式要求发生变化，第一图片和第二图片的格式也会适应性变化，第二图片的位置数据可以是第二图片在其所属图层的坐标，第二图片的名称同样是为了区分不同的第二图片，以防止第二图片加载时出错。

203：如果当前待处理图层的图层颜色为绿色，从页面设计文件中导出当前待处理图层对应的各个第三图片的位置数据和各个第三图片的名称。

204：如果当前待处理图层的图层颜色为蓝色，从页面设计文件中导出当前待处理图层对应的各个第四图片和各个第四图片的名称。

205：如果当前待处理图层的图层颜色为灰色，禁止从页面设计文件中导出当前待处理图层的素材数据。

上述步骤201至步骤205可以并行执行，例如为每个图层颜色分配一个线程，通过各自线程执行素材数据的导出。在这里需要说明的一点是：对于任一页面来说可能会为其设置动画，动画是通过位于不同图层的图片实现且实现该动画的不同图层的图片的位置相同，那么在导出素材数据时动画素材可以仅导出第一帧图片的位置数据，其余帧则需要导出图片，为此对于动画这种情况可以为实现该动画的第一帧图片所在图层的图层颜色设置为空或红色，其余帧所在图层的图层颜色设置为蓝色。

在图层导出规则基于图层组的标识确定的情况下，基于图层导出规则对图层的导出过程如图3所示，可以包括以下步骤：

301：如果当前待处理图层所在图层组的标识为空，禁止从页面设计文件中导出当前待处理图层的素材数据。

302：如果当前待处理图层所在图层组的标识为图片，从页面设计文件中导出当前待处理图层对应的各个第一图片和各个第一图片的名称。

303：如果当前待处理图层所在图层组的标识为数据，从页面设计文件中导出当前待处理图层对应的各个第二图片、各个第二图片的位置数据和各个第二图片的名称，第二图片的图片格式与第一图片的图片格式不同。

其中第二图片的图片格式可以是png格式，第一图片的图片格式可以是jpg格式，之所以第一图片采用jpg格式，第二图片采用png格式是因为在页面加载时页面对各个图层所需图片格式要求而定，如果页面对各个图层所需图片格式要求发生变化，第一图片和第二图片的格式也会适应性变化，第二图片的位置数据可以是第二图片在其所属图层的坐标，第二图片的名称同样是为了区分不同的第二图片，以防止第二图片加载时出错。

304：如果当前待处理图层所在图层组的标识非空且标识不是图片和数据，从页面设计文件中导出当前待处理图层对应的第三图片的位置数据和第三图片的名称。

在通过如上两种方式导出每个图层的素材数据之后，可以将每个图层的素材数据保留到与页面设计文件同级的export目录中，以便于在加载过程中查找素材数据，例如每个图层的素材数据包括在一个文件中，该文件的命名可以参照其对应图层中的图片的名称，位置数据则可以采用Export_+{fileName}.js表示。

在进行素材数据导出过程中，首先可以对页面设计文件包括的图层和图层组进行分析，将每个图层作为待处理序列（如一种表现形式为数组）中的一个元素，然后依次对待处理序列中的每个元素进行素材数据的导出，其将每个图层作为待处理序列中的一个元素的过程如下：

1）从页面设计文件中获取图层信息到第一待处理序列以及获取图层组信息到第二待处理序列；

2）如果第二待处理序列的长度大于0，从第二待处理序列中提取每个图层组中的图层信息至第一待处理序列；如果第二待处理序列的长度小于或等于0，执行3）；

3）如果第一待处理序列的长度小于或等于0，结束操作；如果第一待处理序列的长度大于0，将第一待处理序列中的每个图层信息分别作为第三待处理序列中的一个元素，对所述第三待处理序列中的每个元素执行上述素材数据的导出过程。

如基于每个元素的图层颜色，导出每个元素的素材数据；或者基于每个元素所在图层组，导出每个元素的素材数据。这里需要说明的一点是：在基于元素所在图层组导出时需要结合图层组的标识，因此在将第一待处理序列中的每个图层信息分别作为第三待处理序列中的一个元素时，如果图层导出规则基于每个元素所在图层组确定，则相对于基于图层颜色来说需要将图层组作为元素的一个属性一并写入到第三待处理序列中。

在这里需要指出的一点是：在加载页面时显示区域（如显示屏）无法渲染小于1的像素，如果上述导出的素材数据中图片的高度和宽度为奇数，在显示区域渲染时被2整除会得到小于1的像素，这部分小于1的像素在不被渲染的情况下会在视觉上形成图片错位或图片被裁减的视觉效果，因此对于导出的第一图片和第二图片来说，本实施例将第一图片的高度和第一图片的宽度为偶数，第二图片的高度和第二图片的宽度为偶数，以在渲染时能够被2整除，防止出现图片错位或被裁减的视觉效果。

例如如果第一图片的高度和第一图片的宽度中至少一个参数的取值为奇数，可以对该参数的取值执行加一处理，以使得第一图片的高度和第一图片的宽度都是偶数。

从上述技术方案可知，在获得页面设计文件后，从页面设计文件中获得每个图层的属性数据，基于每个图层的属性数据，确定每个图层各自对应的图层导出规则，基于每个图层各自对应的图层导出规则，从页面设计文件中导出每个图层的素材数据，实现基于每个图层的属性数据自动导出每个图层的素材数据，因此无论是页面设计文件初次完成还是对页面设计文件进行修改之后，均能够基于对应的页面设计文件中每个图层的属性数据自动导出素材数据，省去人工导出素材数据的环节，提高页面生成效率。并且自动导出的素材数据与页面设计文件中的素材数据保持一致，防止导出素材数据过程中素材数据的丢失，使得基于导出的素材数据生成的页面与页面设计文件对应的页面一致，提高页面的准确度。

请参阅图4，其示出了本申请实施例提供的另一种页面数据处理方法，在图1基础上，还可以包括以下步骤：

104：构建与每个素材数据各自对应的待加载对象。

可以理解的是：待加载对象是用于加载至页面的空白界面中以生成页面的对象，在本实施例中可以基于Canvas 的 Createjs 库来构建待加载对象，通过Canvas 的Createjs 库构建的待加载对象包含在Canvas的DOM结构中，使得页面对应的DOM结构仅有一个，从而简化页面的DOM结构；或者构建div元素作为待加载对象，每个div元素可以视为是一个DOM，且每个div元素是相互独立的，从而会增大页面的DOM结构。

105：利用每个素材数据对各自对应的待加载对象进行描述，以使得待加载对象在页面中展示的内容与页面设计文件中其对应的素材数据的表征的内容相符。

如果待加载对象基于Canvas 的 Createjs 库构建，则利用每个素材数据对各自对应的待加载对象进行描述的方式可以是：基于每个素材数据中的图片的名称和图片的位置数据，获得每个素材数据各自对应的待加载对象的属性数据，将每个素材数据中的图片与各自对应的待加载对象建立对应关系。

例如待加载对象的名称设置为图片的名称，待加载对象在页面中的位置数据为图片的位置数据，使得待加载对象的属性数据与对应素材数据中包含的内容相一致。而将图片与待加载对象建立对应关系能够使得待加载对象显示内容为图片，或者将图片作为待加载对象存在，即待加载对象就是图片本身，在加载待加载对象时相当于直接加载图片。

在本实施例中，若待加载对象基于Canvas 的 Createjs 库构建，其对应的实现代码如下所示：

inputData=[

{name:"frameBg",color:"none",x:84,y:133,"src":"ima/frameBg.png"},

{name:"bg",color:"red",x:0,y:0,"src":"ima/bg.jng"}

]

其中name表示名称，color表示图层颜色，none表示图层颜色为空，x和y表示位置数据，src表示图片的路径，通过该图片的路径能够获取到图片。

上述src用于预加载，所谓预加载是指在页面展示之前将素材数据中的图片加载完毕，以通过预加载方式将待加载对象与图片建立对应关系，例如待加载对象就是图片本身；color用于在生成页面时对待加载对象或者说图片执行相对应的处理，name、x和y则用于定位待加载对象。

相对应的构建待加载对象的实现代码如下：

//生成同名对象，添加到Createjs容器中，所谓同名对象是指待加载对象的名称与图片的名称相同

for(var j = spritesData.length - 1; j>= 0; j-- ){

this[spritesData[j].name]=

new createjs.Bitmap(common.images[spritesData[j].name);

this[spritesData[j].name].x = spritesData[j].x;

this[spritesData[j].name].y = spritesData[j].y;

this.frameContainer.addChild(his[spritesData[j].name]);

}

通过上述构建待加载对象的实现代码实现对素材数据的遍历，以批量生成待加载对象，每个待加载对象是页面的DOM结构中的一个元素，通过批量方式实现预加载，使得每个待加载对象就是图片本身。

在这里需要说明的一点是：在导出每个图层的素材数据之后，每个图层的素材数据以JOSN（JavaScript Object Notation，JS 对象简谱）格式存储在JOSN文件中，而JOSN格式中位置数据是以字符串形式存在，与浏览器的语言不匹配，因此在构建待加载对象之前需要基于构建待加载对象的语言对JSON文件中的各个素材数据进行格式转换，而构建待加载对象的语言能够被浏览器理解，所以在经过格式转换之后浏览器在加载待加载对象时无需再次编译，提高页面生成效率。并且本实施例通过Canvas 的 Createjs 库来构建待加载对象之后，可以通过Canvas加载各个待加载对象，即通过Canvas方式渲染各个待加载对象，而Canvas方式能够保证各个待加载对象在各个浏览器中渲染时视觉还原的一致性。

若待加载对象是div元素，其对应的实现过程包括：将每个图层的素材数据作为待处理序列的一个元素存储在待处理序列中（如数组中），构建与待处理序列中的元素数量相同的div元素，基于每个素材数据设置每个div元素的样式（此处是一一对应的），并将设置好样式的div元素添加到页面的根节点中，以完成页面构建。

106：加载各个待加载对象，从而生成与页面设计文件对应的页面。

从上述技术方案可知，在获得每个图层的素材数据之后，可以自动构建与每个素材数据各自对应的待加载对象，利用每个素材数据对各自对应的待加载对象进行描述，加载各个待加载对象，从而生成与页面设计文件对应的页面，由此省去手动输入素材数据到页面对应的脚本文件的环节，提高页面生成效率。并且相对于手动输入素材数据来说，能够在自动构建待加载对象之后利用素材数据进行描述，降低素材数据的丢失率，从而提高页面的准确度。

下面以一个示例来说明本发明实施例提供的页面数据处理方法从自动导出每个图层的素材数据到自动生成页面展示的过程，如图5所示，页面设计人员设计的页面对应的数据存储在PSD文件，在电子设备打开PSD文件之后，监测是否获得触发特定快捷键的操作，如果获得触发特定快捷键的操作，电子设备从目录/Applications/Adobe Photoshop CC2017/Presets/Scripts/中调用与该特定快捷键绑定的脚本文件，该脚本文件具有自动导出素材数据的功能，这样电子设备就可以借助脚本文件从PSD文件中导出每个图层的素材数据。

电子设备在导出每个图层的素材数据之后，利用上述实现代码基于Canvas 的Createjs 库构建待加载对象并设置待加载对象的属性数据，加载各个待加载对象，则电子设备会展示图5所示的页面。

对于前述的各方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本发明并不受所描述的动作顺序的限制，因为依据本发明，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作和模块并不一定是本发明所必须的。

又一方面，本发明实施例还提供一种页面数据处理装置，其结构如图6所示，可以包括：获得单元10、确定单元20和导出单元30。

获得单元10，用于从页面设计文件中获得每个图层的属性数据。

确定单元20，用于基于每个图层的属性数据，确定每个图层各自对应的图层导出规则。

一种可能的实现方式中，确定单元20从每个图层的属性数据中，获得每个图层的图层颜色；基于每个图层的图层颜色，确定每个图层各自对应的图层导出规则，其中，不同图层颜色的图层对应的图层导出规则导出的素材数据不同。另一种可能的实现方式中，确定单元20从每个图层的属性数据中，获得每个图层所在图层组的标识；基于每个图层所在图层组的标识，确定每个图层各自对应的图层导出规则，其中，不同标识的图层组的图层对应的图层导出规则导出的素材数据不同。

导出单元30，用于基于每个图层各自对应的图层导出规则，从所述页面设计文件中导出每个图层的素材数据。

一种可能的实现方式中，导出单元30执行如下操作来导出每个图层的素材数据：

如果当前待处理图层的图层颜色为空，从所述页面设计文件中导出所述当前待处理图层对应的各个第一图片、所述各个第一图片的位置数据和所述各个第一图片的名称；

如果当前待处理图层的图层颜色为红色，从所述页面设计文件中导出所述当前待处理图层对应的各个第二图片、所述各个第二图片的位置数据和所述各个第二图片的名称，所述第二图片的图片格式与所述第一图片的图片格式不同；

如果当前待处理图层的图层颜色为绿色，从所述页面设计文件中导出所述当前待处理图层对应的各个第三图片的位置数据和所述各个第三图片的名称；

如果当前待处理图层的图层颜色为蓝色，从所述页面设计文件中导出所述当前待处理图层对应的各个第四图片和所述各个第四图片的名称；

如果当前待处理图层的图层颜色为灰色，禁止从所述页面设计文件中导出所述当前待处理图层的素材数据。

在另一种可能的实现方式中，导出单元30执行如下操作来导出每个图层的素材数据：

如果当前待处理图层所在图层组的标识为空，禁止从所述页面设计文件中导出所述当前待处理图层的素材数据；

如果当前待处理图层所在图层组的标识为图片，从所述页面设计文件中导出所述当前待处理图层对应的各个第一图片和所述各个第一图片的名称；

如果当前待处理图层所在图层组的标识为数据，从所述页面设计文件中导出所述当前待处理图层对应的各个第二图片、所述各个第二图片的位置数据和所述各个第二图片的名称，所述第二图片的图片格式与所述第一图片的图片格式不同；

如果当前待处理图层所在图层组的标识非空且所述标识不是图片和数据，从所述页面设计文件中导出所述当前待处理图层对应的第三图片的位置数据和所述第三图片的名称。

在一种可能的情况中，导出单元30将导出的第一图片的高度和第一图片的宽度设置为偶数，以及将导出的第二图片的高度和所述第二图片的宽度为偶数。

可选的，本实施例提供的页面数据处理装置还可以包括：构建单元、描述单元和加载单元。

构建单元，用于构建与每个素材数据各自对应的待加载对象。

描述单元，用于利用每个素材数据对各自对应的待加载对象进行描述。一种可能的实现方式中，描述单元具体用于基于每个素材数据中的图片的名称和图片的位置数据，获得每个素材数据各自对应的待加载对象的属性数据；将所述每个素材数据中的图片与各自对应的待加载对象建立对应关系。

加载单元，用于加载各个所述待加载对象，从而生成与所述页面设计文件对应的页面。

另一方面，本申请还提供了一种终端，如参见图7，其示出了本申请的终端的一种结构示意图，本实施例的终端100可以包括：处理器110和存储器120。

可选的，该终端还可以包括通信接口130、输入单元140、显示器150和通信总线160。

处理器110、存储器120、通信接口130、输入单元140、显示器150都通过通信总线160完成相互间的通信。

在本实施例中，处理器110可以为中央处理器（Central Processing Unit，CPU），特定应用集成电路，数字信号处理器、现成可编程门阵列或者其他可编程逻辑器件等。

该处理器可以调用存储器120中存储的程序。具体的，处理器可以执行上述页面数据处理方法的实施例中所阐述的操作。

存储器120中用于存放一个或者一个以上程序，程序可以包括程序代码，所述程序代码包括计算机操作指令，在本申请实施例中，该存储器中至少存储有用于实现以下功能的程序：

从页面设计文件中获得每个图层的属性数据；

基于每个图层的属性数据，确定每个图层各自对应的图层导出规则。

基于每个图层各自对应的图层导出规则，从所述页面设计文件中导出每个图层的素材数据。

在一种可能的实现方式中，该存储器120可包括存储程序区和存储数据区，其中，存储程序区可存储操作***以及至少一个功能（比如素材数据导出以及对象加载）所需的应用程序等；存储数据区可存储根据计算机的使用过程中所创建的数据，比如，素材数据以及待加载对象等等。

此外，存储器120可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件或其他易失性固态存储器件。

该通信接口130可以为通信模块的接口，如GSM模块的接口。

本实施例还可以包括显示器150和输入单元140等等。

当然，图7所示的终端的结构并不构成对本实施例中终端的限定，在实际应用中终端可以包括比图7所示的更多或更少的部件，或者组合某些部件。

另一方面，本申请实施例还提供了一种存储介质，所述存储介质中存储有计算机可执行指令，所述计算机可执行指令被处理器加载并执行时，如上述任一实施例所示的页面数据处理方法。

需要说明的是，本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。对于装置类实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

对所公开的实施例的上述说明，使本领域技术人员能够实现或使用本发明。对这些实施例的多种修改对本领域技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本发明的精神或范围的情况下，在其它实施例中实现。因此，本发明将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。

以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。

Claims (16)

1.一种页面数据处理方法，其特征在于，所述方法包括：

从页面设计文件中获得每个图层的属性数据；所述属性数据包括图层颜色和图层组的标识；

基于每个图层的图层颜色或者图层组的标识，确定每个图层各自对应的图层导出规则；不同图层对应的图层导出规则不同；

基于每个图层各自对应的图层导出规则，从所述页面设计文件中自动导出每个图层的素材数据；所述图层导出规则用于指示对对应的图层进行自动导出操作；基于不同图层导出规则导出的素材数据不同；

当基于每个图层的图层颜色，确定每个图层各自对应的图层导出规则时，基于每个图层各自对应的图层导出规则，从所述页面设计文件中导出每个图层的素材数据包括：

如果当前待处理图层的图层颜色为空，从所述页面设计文件中导出所述当前待处理图层对应的各个第一图片、所述各个第一图片的位置数据和所述各个第一图片的名称；

如果当前待处理图层的图层颜色为红色，从所述页面设计文件中导出所述当前待处理图层对应的各个第二图片、所述各个第二图片的位置数据和所述各个第二图片的名称，所述第二图片的图片格式与所述第一图片的图片格式不同；

如果当前待处理图层的图层颜色为绿色，从所述页面设计文件中导出所述当前待处理图层对应的各个第三图片的位置数据和所述各个第三图片的名称；

如果当前待处理图层的图层颜色为蓝色，从所述页面设计文件中导出所述当前待处理图层对应的各个第四图片和所述各个第四图片的名称；

如果当前待处理图层的图层颜色为灰色，禁止从所述页面设计文件中导出所述当前待处理图层的素材数据。

2.根据权利要求1所述的方法，其特征在于，所述基于每个图层的图层颜色，确定每个图层各自对应的图层导出规则包括：

从所述每个图层的属性数据中，获得每个图层的图层颜色；

基于每个图层的图层颜色，确定每个图层各自对应的图层导出规则，其中，不同图层颜色的图层对应的图层导出规则导出的素材数据不同。

3.根据权利要求1所述的方法，其特征在于，所述基于每个图层的图层组的标识，确定每个图层各自对应的图层导出规则包括：

从所述每个图层的属性数据中，获得每个图层所在图层组的标识；

基于每个图层所在图层组的标识，确定每个图层各自对应的图层导出规则，其中，不同标识的图层组的图层对应的图层导出规则导出的素材数据不同。

4.根据权利要求3所述的方法，其特征在于，所述基于每个图层各自对应的图层导出规则，从所述页面设计文件中导出每个图层的素材数据包括：

如果当前待处理图层所在图层组的标识为空，禁止从所述页面设计文件中导出所述当前待处理图层的素材数据；

如果当前待处理图层所在图层组的标识为图片，从所述页面设计文件中导出所述当前待处理图层对应的各个第一图片和所述各个第一图片的名称；

如果当前待处理图层所在图层组的标识为数据，从所述页面设计文件中导出所述当前待处理图层对应的各个第二图片、所述各个第二图片的位置数据和所述各个第二图片的名称，所述第二图片的图片格式与所述第一图片的图片格式不同；

如果当前待处理图层所在图层组的标识非空且所述标识不是图片和数据，从所述页面设计文件中导出所述当前待处理图层对应的第三图片的位置数据和所述第三图片的名称。

5.根据权利要求1或4所述的方法，其特征在于，所述第一图片的高度和所述第一图片的宽度为偶数；

所述第二图片的高度和所述第二图片的宽度为偶数。

6.根据权利要求1所述的方法，其特征在于，所述方法还包括：

构建与每个素材数据各自对应的待加载对象；

利用每个素材数据对各自对应的待加载对象进行描述；

加载各个所述待加载对象，从而生成与所述页面设计文件对应的页面。

7.根据权利要求6所述的方法，其特征在于，所述利用每个素材数据对各自对应的待加载对象进行描述包括：

基于每个素材数据中的图片的名称和图片的位置数据，获得每个素材数据各自对应的待加载对象的属性数据；

将所述每个素材数据中的图片与各自对应的待加载对象建立对应关系。

8.一种页面数据处理装置，其特征在于，所述装置包括：

获得单元，用于从页面设计文件中获得每个图层的属性数据；所述属性数据包括图层颜色和图层组的标识；

确定单元，用于基于每个图层的图层颜色或者图层组的标识，确定每个图层各自对应的图层导出规则；不同图层对应的图层导出规则不同；

导出单元，用于基于每个图层各自对应的图层导出规则，从所述页面设计文件中自动导出每个图层的素材数据；所述图层导出规则用于指示对对应的图层进行自动导出操作；基于不同图层导出规则导出的素材数据不同；

当基于每个图层的图层颜色，确定每个图层各自对应的图层导出规则时，所述导出单元执行如下操作来导出每个图层的素材数据：

如果当前待处理图层的图层颜色为空，从所述页面设计文件中导出所述当前待处理图层对应的各个第一图片、所述各个第一图片的位置数据和所述各个第一图片的名称；

如果当前待处理图层的图层颜色为红色，从所述页面设计文件中导出所述当前待处理图层对应的各个第二图片、所述各个第二图片的位置数据和所述各个第二图片的名称，所述第二图片的图片格式与所述第一图片的图片格式不同；

如果当前待处理图层的图层颜色为绿色，从所述页面设计文件中导出所述当前待处理图层对应的各个第三图片的位置数据和所述各个第三图片的名称；

如果当前待处理图层的图层颜色为蓝色，从所述页面设计文件中导出所述当前待处理图层对应的各个第四图片和所述各个第四图片的名称；

如果当前待处理图层的图层颜色为灰色，禁止从所述页面设计文件中导出所述当前待处理图层的素材数据。

9.根据权利要求8所述的装置，其特征在于，所述确定单元还具体用于从每个图层的属性数据中，获得每个图层的图层颜色；基于每个图层的图层颜色，确定每个图层各自对应的图层导出规则，其中，不同图层颜色的图层对应的图层导出规则导出的素材数据不同。

10.根据权利要求8所述的装置，其特征在于，所述确定单元还具体用于从每个图层的属性数据中，获得每个图层所在图层组的标识；基于每个图层所在图层组的标识，确定每个图层各自对应的图层导出规则，其中，不同标识的图层组的图层对应的图层导出规则导出的素材数据不同。

11.根据权利要求10所述的装置，其特征在于，所述导出单元执行如下操作来导出每个图层的素材数据：

如果当前待处理图层所在图层组的标识为空，禁止从所述页面设计文件中导出所述当前待处理图层的素材数据；

如果当前待处理图层所在图层组的标识为图片，从所述页面设计文件中导出所述当前待处理图层对应的各个第一图片和所述各个第一图片的名称；

如果当前待处理图层所在图层组的标识为数据，从所述页面设计文件中导出所述当前待处理图层对应的各个第二图片、所述各个第二图片的位置数据和所述各个第二图片的名称，所述第二图片的图片格式与所述第一图片的图片格式不同；

如果当前待处理图层所在图层组的标识非空且所述标识不是图片和数据，从所述页面设计文件中导出所述当前待处理图层对应的第三图片的位置数据和所述第三图片的名称。

12.根据权利要求8或11所述的装置，其特征在于，所述导出单元将导出的第一图片的高度和第一图片的宽度设置为偶数，以及将导出的第二图片的高度和所述第二图片的宽度为偶数。

13.根据权利要求8所述的装置，其特征在于，所述装置还包括：构建单元、描述单元和加载单元；

所述构建单元，用于构建与每个素材数据各自对应的待加载对象；

所述描述单元，用于利用每个素材数据对各自对应的待加载对象进行描述；

加载单元，用于加载各个所述待加载对象，从而生成与所述页面设计文件对应的页面。

14.根据权利要求13所述的装置，其特征在于，所述描述单元具体用于：

基于每个素材数据中的图片的名称和图片的位置数据，获得每个素材数据各自对应的待加载对象的属性数据；

将所述每个素材数据中的图片与各自对应的待加载对象建立对应关系。

15.一种终端，其特征在于，所述终端包括：

处理器和存储器；

其中，所述处理器用于执行所述存储器中存储的程序；

所述存储器用于存储程序，所述程序至少用于：

从页面设计文件中获得每个图层的属性数据；所述属性数据包括图层颜色和图层组的标识；

基于每个图层的图层颜色或者图层组的标识，确定每个图层各自对应的图层导出规则；不同图层对应的图层导出规则不同；

基于每个图层各自对应的图层导出规则，从所述页面设计文件中自动导出每个图层的素材数据；所述图层导出规则用于指示对对应的图层进行自动导出操作；基于不同图层导出规则导出的素材数据不同；

当基于每个图层的图层颜色，确定每个图层各自对应的图层导出规则时，基于每个图层各自对应的图层导出规则，从所述页面设计文件中导出每个图层的素材数据包括：

如果当前待处理图层的图层颜色为空，从所述页面设计文件中导出所述当前待处理图层对应的各个第一图片、所述各个第一图片的位置数据和所述各个第一图片的名称；

如果当前待处理图层的图层颜色为红色，从所述页面设计文件中导出所述当前待处理图层对应的各个第二图片、所述各个第二图片的位置数据和所述各个第二图片的名称，所述第二图片的图片格式与所述第一图片的图片格式不同；

如果当前待处理图层的图层颜色为绿色，从所述页面设计文件中导出所述当前待处理图层对应的各个第三图片的位置数据和所述各个第三图片的名称；

如果当前待处理图层的图层颜色为蓝色，从所述页面设计文件中导出所述当前待处理图层对应的各个第四图片和所述各个第四图片的名称；

如果当前待处理图层的图层颜色为灰色，禁止从所述页面设计文件中导出所述当前待处理图层的素材数据。

16.一种存储介质，其特征在于，所述存储介质中存储有计算机可执行指令，所述计算机可执行指令被处理器加载并执行时，实现如上权利要求1至7任一项所述的页面数据处理方法。