CN113722010B - 骨架屏生成方法、装置、设备及存储介质 - Google Patents

Abstract

本发明涉及骨架屏技术领域，公开了一种骨架屏生成方法、装置、设备及存储介质。本方法包括：获取骨架屏标签，将需要展示骨架屏的页面包裹在骨架屏标签中，得到骨架屏标签对应的配置信息；基于配置信息确定骨架屏标签的生成参数；根据生成参数，为骨架屏标签配置插件；通过插件对骨架屏标签进行解析，得到骨架屏标签对应的目标页面；对页面元素进行分析，得到目标页面对应骨架屏的页面结构；根据骨架屏的页面结构，生成与目标页面相匹配的骨架屏。本发明通过遍历记录整个数据树层级与结构所对应骨架屏标签，生成与当前结构相匹配的骨架屏结构，提升开发效率。

Description

骨架屏生成方法、装置、设备及存储介质

技术领域

本发明涉及计算机技术领域，尤其涉及一种骨架屏生成方法、装置、设备及存储介质。

背景技术

骨架屏英文叫Skeleton Screen，也被称为加载占位图。它是在页面数据尚未加载前先给用户展示出页面的大致结构，进而等到数据请求返回后再显示页面的数据内容，从而替换它。这种交互方式相比普通的loading图标展示的交互方式，能在不干扰用户的操作下，极大的强化了用户对该页面的一个框架有一个大体的概念。现在有越来越多的应用采用这样子的加载方式。

但是在传统骨架屏的开发中，都是静态对骨架屏的样式进行开发。也就是说假如一个应用中有需要n种不同的骨架屏的加载样式，就需要手动去对这n套骨架屏的结构样式进行开发。那么假设有m个应用需要开发，并且都需要使用骨架屏的加载方式，那最糟糕的情况就是需要开发m*n套骨架屏，十分的耗时耗力。

发明内容

本发明的主要目的在于通过遍历记录整个数据树层级与结构所对应骨架屏标签，生成与当前结构相匹配的骨架屏结构，提升开发效率。

本发明第一方面提供了一种骨架屏生成方法，包括：获取骨架屏标签，将需要展示骨架屏的页面包裹在所述骨架屏标签中，得到所述骨架屏标签对应的配置信息；基于所述配置信息确定所述骨架屏标签的生成参数；根据所述生成参数，为所述骨架屏标签配置插件；通过所述插件对所述骨架屏标签进行解析，得到所述骨架屏标签对应的目标页面，其中，所述目标页面包括页面元素，所述页面元素包括关键元素和非关键元素；对所述页面元素进行分析，得到所述目标页面对应骨架屏的页面结构；根据所述骨架屏的页面结构，生成与所述目标页面相匹配的骨架屏。

可选地，在本发明第一方面的第一种实现方式中，所述根据所述生成参数，为所述骨架屏标签配置插件包括：获取所述骨架屏标签对应的对应的属性信息，其中，所述属性信息包括所述骨架屏标签对应的插件的版本信息和所述骨架屏标签中排除所述插件的安装包配置文件的信息；根据所述插件的插件标识获取所述插件的第一安装包配置文件；根据所述安装包配置文件的信息获取所述骨架屏标签中的第二安装包配置文件；将对应的代码分别注入所述第一安装包配置文件以及所述第二安装包配置文件，完成所述骨架屏标签的插件配置。

可选地，在本发明第一方面的第二种实现方式中，所述根据所述插件的插件标识获取所述插件的第一安装包配置文件包括：当所述插件中每个插件的版本号与第一插件中插件的版本号均匹配成功时，将所述第一插件中与所述插件中所有插件的版本号进行匹配，并将匹配成功的插件标记为第二插件；获取所述第二插件对应的安装包配置文件，并将所述安装包配置文件标记为第一安装包配置文件，其中，所述第一插件为所述本地数据库中与所述插件的插件标识相匹配的插件。

可选地，在本发明第一方面的第三种实现方式中，所述对所述页面元素进行分析，得到所述目标页面对应骨架屏的页面结构包括：对所述目标页面中的元素进行清洗，得到目标元素，其中，所述目标元素为关键元素；将所述目标页面中的关键元素替换为占位元素，得到所述目标页面对应的骨架屏的页面结构。

可选地，在本发明第一方面的第四种实现方式中，所述对所述目标页面中的元素进行清洗，得到目标元素，其中，所述目标元素为关键元素包括：解析所述目标页面的逻辑文件，以将所述目标页面的逻辑文件转换为文档对象模型树，其中，所述文档对象模型树包括多个节点，每个节点对应所述目标页面中的一个页面元素；根据所述目标页面的配置信息对所述文档对象模型树进行裁剪，得到目标文档对象模型树，并去除所述目标文档对象模型树中与所述目标页面中的非关键元素相对应的节点。

可选地，在本发明第一方面的第五种实现方式中，所述将所述目标页面中的关键元素替换为占位元素，得到所述目标页面对应的骨架屏的页面结构包括：从所述目标文档对象模型树中获取各节点的属性，其中，所述属性包括位置属性和样式属性；将所述各节点的位置属性确定为所述占位元素的位置属性，并将所述各节点的样式属性替换为所述占位元素的样式属性；将属性处理后的目标文档对象模型树转换为所述骨架屏的逻辑文件；为所述骨架屏设置参数信息，根据所述参数信息得到所述目标页面对应的骨架屏的页面结构，其中，所述骨架屏的参数信息用于控制所述骨架屏的显示效果。

可选地，在本发明第一方面的第六种实现方式中，所述根据所述骨架屏的页面结构，生成与所述目标页面相匹配的骨架屏包括：获取所述目标页面的页面布局样式；对所述页面布局样式进行划分，生成一个或多个块区域；分别对所述块区域进行处理，使所述块区域与所述目标页面中的显示对象的轮廓一致；对处理后的块区域进行灰度填充，生成与所述目标页面相匹配的骨架屏。

本发明第二方面提供了一种骨架屏生成装置，包括：获取模块，用于获取骨架屏标签，将需要展示骨架屏的页面包裹在所述骨架屏标签中，得到所述骨架屏标签对应的配置信息；确定模块，用于基于所述配置信息确定所述骨架屏标签的生成参数；配置模块，用于根据所述生成参数，为所述骨架屏标签配置插件；解析模块，用于通过所述插件对所述骨架屏标签进行解析，得到所述骨架屏标签对应的目标页面，其中，所述目标页面包括页面元素，所述页面元素包括关键元素和非关键元素；分析模块，用于对所述页面元素进行分析，得到所述目标页面对应骨架屏的页面结构；生成模块，用于根据所述骨架屏的页面结构，生成与所述目标页面相匹配的骨架屏。

可选地，在本发明第二方面的第一种实现方式中，所述配置模块包括：获取单元，用于获取所述骨架屏标签对应的对应的属性信息，其中，所述属性信息包括所述骨架屏标签对应的插件的版本信息和所述骨架屏标签中排除所述插件的安装包配置文件的信息；根据所述插件的插件标识获取所述插件的第一安装包配置文件；根据所述安装包配置文件的信息获取所述骨架屏标签中的第二安装包配置文件；注入单元，用于将对应的代码分别注入所述第一安装包配置文件以及所述第二安装包配置文件，完成所述骨架屏标签的插件配置。

可选地，在本发明第二方面的第二种实现方式中，所述获取单元具体用于：当所述插件中每个插件的版本号与第一插件中插件的版本号均匹配成功时，将所述第一插件中与所述插件中所有插件的版本号进行匹配，并将匹配成功的插件标记为第二插件；获取所述第二插件对应的安装包配置文件，并将所述安装包配置文件标记为第一安装包配置文件，其中，所述第一插件为所述本地数据库中与所述插件的插件标识相匹配的插件。

可选地，在本发明第二方面的第三种实现方式中，所述分析模块具体用于：清洗单元，用于对所述目标页面中的元素进行清洗，得到目标元素，其中，所述目标元素为关键元素；替换单元，用于将所述目标页面中的关键元素替换为占位元素，得到所述目标页面对应的骨架屏的页面结构。

可选地，在本发明第二方面的第四种实现方式中，所述清洗单元具体用于：解析所述目标页面的逻辑文件，以将所述目标页面的逻辑文件转换为文档对象模型树，其中，所述文档对象模型树包括多个节点，每个节点对应所述目标页面中的一个页面元素；根据所述目标页面的配置信息对所述文档对象模型树进行裁剪，得到目标文档对象模型树，并去除所述目标文档对象模型树中与所述目标页面中的非关键元素相对应的节点。

可选地，在本发明第二方面的第五种实现方式中，所述替换单元具体用于：从所述目标文档对象模型树中获取各节点的属性，其中，所述属性包括位置属性和样式属性；将所述各节点的位置属性确定为所述占位元素的位置属性，并将所述各节点的样式属性替换为所述占位元素的样式属性；将属性处理后的目标文档对象模型树转换为所述骨架屏的逻辑文件；为所述骨架屏设置参数信息，根据所述参数信息得到所述目标页面对应的骨架屏的页面结构，其中，所述骨架屏的参数信息用于控制所述骨架屏的显示效果。

可选地，在本发明第二方面的第六种实现方式中，所述生成模块具体用于：获取所述目标页面的页面布局样式；对所述页面布局样式进行划分，生成一个或多个块区域；分别对所述块区域进行处理，使所述块区域与所述目标页面中的显示对象的轮廓一致；对处理后的块区域进行灰度填充，生成与所述目标页面相匹配的骨架屏。

本发明第三方面提供了一种骨架屏生成设备，包括：存储器和至少一个处理器，所述存储器中存储有指令，所述存储器和所述至少一个处理器通过线路互连；

所述至少一个处理器调用所述存储器中的所述指令，以使得所述骨架屏生成设备执行上述的骨架屏生成方法的步骤。

本发明的第四方面提供了一种计算机可读存储介质，所述计算机可读存储介质中存储有指令，当其在计算机上运行时，使得计算机执行上述的骨架屏生成方法的步骤。

本发明提供的技术方案中，通过获取骨架屏标签，将需要展示骨架屏的页面包裹在骨架屏标签中，得到骨架屏标签对应的配置信息；基于配置信息确定骨架屏标签的生成参数；根据生成参数，为骨架屏标签配置插件；通过插件对骨架屏标签进行解析，得到骨架屏标签对应的目标页面；对页面元素进行分析，得到目标页面对应骨架屏的页面结构；根据骨架屏的页面结构，生成与目标页面相匹配的骨架屏。本发明通过遍历记录整个数据树层级与结构所拥有的样式，生成与当前结构相匹配的骨架屏结构，提升开发效率。

附图说明

图1为本发明骨架屏生成方法的第一个实施例示意图；

图2为本发明骨架屏生成方法的第二个实施例示意图；

图3为本发明骨架屏生成方法的第三个实施例示意图；

图4为本发明骨架屏生成方法的第四个实施例示意图；

图5为本发明骨架屏生成方法的第五个实施例示意图；

图6为本发明骨架屏生成装置的第一个实施例示意图；

图7为本发明骨架屏生成装置的第二个实施例示意图；

图8为本发明骨架屏生成设备的一个实施例示意图。

具体实施方式

本发明实施例提供了一种骨架屏生成方法、装置、设备及存储介质，先获取骨架屏标签，将需要展示骨架屏的页面包裹在骨架屏标签中，得到骨架屏标签对应的配置信息；基于配置信息确定骨架屏标签的生成参数；根据生成参数，为骨架屏标签配置插件；通过插件对骨架屏标签进行解析，得到骨架屏标签对应的目标页面；对页面元素进行分析，得到目标页面对应骨架屏的页面结构；根据骨架屏的页面结构，生成与目标页面相匹配的骨架屏。本发明通过遍历记录整个数据树层级与结构所拥有的样式，生成与当前结构相匹配的骨架屏结构，提升开发效率。

本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”、“第三”、“第四”等(如果存在)是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的实施例能够以除了在这里图示或描述的内容以外的顺序实施。此外，术语“包括”或“具有”及其任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

为便于理解，下面对本发明实施例的具体流程进行描述，请参阅图1，本发明实施例中骨架屏生成方法的第一个实施例包括：

101、获取骨架屏标签，将需要展示骨架屏的页面包裹在骨架屏标签中，得到骨架屏标签对应的配置信息；

本实施例中，骨架屏(Skeleton Screen)是指在页面数据加载完成前，先给用户展示出页面的大致结构(灰色占位图)，在拿到接口数据后渲染出实际页面内容然后替换掉。骨架屏是近两年开始流行的加载控件，本质上是界面加载过程中的过渡效果。在加载前把网页的大概轮廓预先显示，接着再逐渐加载真正内容，这样既降低了用户的焦灼情绪，又能使界面加载过程变得自然通畅，不会造成网页长时间白屏或者闪烁。骨架屏能给人一种页面内容已经渲染出一部分的感觉，相较于传统的加载效果，在一定程度上可提升用户体验。

102、基于配置信息确定骨架屏标签的生成参数；

本实施例中，配置信息可以为一个配置文件，在生产骨架屏时，通过加载在对应的程序项目中，实现对骨架屏页面的配置。配置信息中的内容包括多种，例如为：要生成骨架屏页面的地址、页面的名称、生成在何种设备上的骨架屏页面、骨架屏页面的输出路径，开发者自定义节点递归结束选项、骨架屏节点内容插入的根节点、背景色、动画、初始化页面时需要做的操作、是否显示交互控件等中的一种或多种。配置信息可以通过一张配置表实现上述配置信息的所有内容，也可以通过多个配置表实现上述配置信息中的内容，可以根据具体需求进行设置，此处不做具体限定。

103、根据生成参数，为骨架屏标签配置插件；

本实施例中，当需要对骨架屏标签中的插件进行配置时，终端设备可以根据骨架屏标签的版本号判断当前的骨架屏标签是否为具有插件分离功能的骨架屏标签，当该骨架屏标签为具有插件分离功能的骨架屏标签时，获取骨架屏标签对应的属性信息，其中，该属性信息包括骨架屏标签对应的N个插件的版本信息以及骨架屏标签中排除N个插件的安装包配置文件的信息，其中，N为大于或等于1的正整数，该骨架屏标签为骨架屏标签中的子骨架屏标签。

104、通过插件对骨架屏标签进行解析，得到骨架屏标签对应的目标页面，其中，目标页面包括页面元素，页面元素包括关键元素和非关键元素；

本实施例中，目标页面还包括配置信息，配置信息是用于描述目标页面中各个页面元素的展示效果的配置项；目标页面的配置信息中包括页面元素的显示配置字段，显示配置字段用于指示页面元素在目标页面中被显示或者被隐藏，例如：显示配置字段可是指hidden(隐藏)配置字段，若该hidden配置字段被配置成需要隐藏的css选择器，表示被隐藏；否则表示被显示。目标页面的页面结构是由目标页面的逻辑文件和配置信息共同确定的，也就是根据目标页面的逻辑文件和配置信息可得到目标页面的页面结构，目标页面的页面结构展示了目标页面中各个页面元素的在目标页面中的布局。

105、对页面元素进行分析，得到目标页面对应骨架屏的页面结构；

本实施例中，本申请实施例中，在目标页面的页面结构的基础上，通过对关键元素和非关键元素进行不同的处理来得到目标页面对应的骨架屏的页面结构。

目标页面的页面元素包括关键元素和非关键元素，其中，关键元素是指目标页面中位于首屏中，且显示配置字段用于指示被显示的页面元素，即关键元素是指首屏可见元素。非关键元素是指目标页面中除关键页面元素之外的其他页面元素，即非关键元素包括首屏隐藏元素和非首屏元素。关键元素的类型包括以下至少一种：文本元素、图片元素、按钮元素、表单元素、伪类元素和原生组件。

106、根据骨架屏的页面结构，生成与目标页面相匹配的骨架屏。

本实施例中，在新跳转的目标页面内，由于无法提取确定是否需要对应生成骨架屏页面，因此，如果直接对跳转后的目标页面进行骨架屏页面生成，可能造成骨架屏页面生成错误的问题。因此，在目标页面内，生成一个交互空间，例如为按钮、滑块等，当用户需要生成骨架屏时，可以通过对该交互控件进行操作，实现生成指令的输入。交互控件在接收到用户输入的指令后，会对应产生触发事件，通过触发事件执行相应的骨架屏生成程序，可以实现对该骨架屏页面的生成。

本发明实施例中，通过获取骨架屏标签，将需要展示骨架屏的页面包裹在骨架屏标签中，得到骨架屏标签对应的配置信息；基于配置信息确定骨架屏标签的生成参数；根据生成参数，为骨架屏标签配置插件；通过插件对骨架屏标签进行解析，得到骨架屏标签对应的目标页面；对页面元素进行分析，得到目标页面对应骨架屏的页面结构；根据骨架屏的页面结构，生成与目标页面相匹配的骨架屏。本发明通过遍历记录整个数据树层级与结构所拥有的样式，生成与当前结构相匹配的骨架屏结构，提升开发效率。

请参阅图2，本发明实施例中骨架屏生成方法的第二个实施例包括：

201、获取骨架屏标签，将需要展示骨架屏的页面包裹在骨架屏标签中，得到骨架屏标签对应的配置信息；

202、基于配置信息确定骨架屏标签的生成参数；

203、获取骨架屏标签对应的对应的属性信息，其中，属性信息包括骨架屏标签对应的插件的版本信息和骨架屏标签中排除插件的安装包配置文件的信息；

本实施例中，当需要对骨架屏标签中的插件进行配置时，终端设备可以根据骨架屏标签的版本号判断当前的骨架屏标签是否为具有插件分离功能的骨架屏标签，当该骨架屏标签为具有插件分离功能的骨架屏标签时，获取骨架屏标签对应的属性信息。其中，该属性信息包括骨架屏标签对应的N个插件的版本信息以及骨架屏标签中排除N个插件的安装包配置文件的信息，其中，N为大于或等于1的正整数，该骨架屏标签为骨架屏标签中的子骨架屏标签。

也就是说，首先可以通过骨架屏标签的版本号判断该骨架屏标签是否具有插件分离功能，当该骨架屏标签具有插件分离功能时，可以获取运行请求对应的骨架屏标签的属性信息，该属性信息中包括小游戏或小程序的插件的版本信息以及排除插件的安装包配置文件pkg信息，其中，属性信息包括小游戏或小程序的app id、版本号、使用插件的app id、插件的版本号、校验信息、排除了插件的pkg的校验信息等信息。插件使用和版本的信息在game.json中配置，终端设备的后台解析并存储。

204、当插件中每个插件的版本号与第一插件中插件的版本号均匹配成功时，将第一插件中与插件中所有插件的版本号进行匹配，并将匹配成功的插件标记为第二插件；

本实施例中，当当前插件中包括与第一目标插件中插件的版本号相匹配的第一插件以及与第一目标插件中插件的版本号不相匹配的第二插件时，将第一目标插件中与第一插件的版本号相匹配的插件的安装包配置文件确定为第一插件的第一安装包配置文件；根据第二插件的版本号获取第二插件的增量包配置文件；根据第二插件的增量包配置文件以及第一目标插件中与第二插件的版本号不匹配的插件的安装包配置文件生成第二插件的第一安装包配置文件。

也就是说，若N个插件中既存在于第一目标插件中的插件的版本号相同的第一插件，又存在与第一目标插件中的插件的版本号不同的第二插件时，对于版本号不同的第二插件，则直接从应用程序公众平台的数据库中下载对应的增量包配置文件，并根据增量包配置文件与版本号不同的插件生成完整的安装包配置文件，对于第一插件，直接用第一目标插件中与第一插件的版本号相同的插件的安装包配置文件即可，无须重新下载。这样就可以起到提高下载速度，减少网络成本的目的。

205、获取第二插件对应的安装包配置文件，并将安装包配置文件标记为第一安装包配置文件，其中，第一插件为本地数据库中与插件的插件标识相匹配的插件；

本实施例中，当N个插件中包括与第一目标插件中插件的版本号相匹配的第一插件以及与第一目标插件中插件的版本号不相匹配的第二插件时，将第一目标插件中与第一插件的版本号相匹配的插件的安装包配置文件确定为第一插件的第一安装包配置文件；根据第二插件的版本号获取第二插件的增量包配置文件；

根据第二插件的增量包配置文件以及第一目标插件中与第二插件的版本号不匹配的插件的安装包配置文件生成第二插件的第一安装包配置文件。也就是说，若N个插件中既存在于第一目标插件中的插件的版本号相同的第一插件，又存在与第一目标插件中的插件的版本号不同的第二插件时，对于版本号不同的第二插件，则直接从应用程序公众平台的数据库中下载对应的增量包配置文件，并根据增量包配置文件与版本号不同的插件生成完整的安装包配置文件，对于第一插件，直接用第一目标插件中与第一插件的版本号相同的插件的安装包配置文件即可，无须重新下载。这样就可以起到提高下载速度，减少网络成本的目的。

需要说明的是，当N＝1时，判断该插件的版本号与本地数据库中对应的插件的版本号是否匹配，若匹配，则直接复用本地插件的安装包配置文件，若不匹配，在下载该插件对应的增量包配置文件，之后生成对应的第一安装包配置文件。

206、根据安装包配置文件的信息获取骨架屏标签中的第二安装包配置文件；

本实施例中，可以从骨架屏标签对应的属性信息中提取排除N个插件的安装包配置信息，并根据骨架屏标签中排除N个插件的安装包配置文件的信息获取骨架屏标签中排除N个插件的第二安装包配置文件。也就是说，可以直接从应用程序公众平台下载小游戏或小程序的排除了插件的pkg。

本实施例中，获取第一安装包配置文件和获取第二安装包配置文件之间并没有执行顺序的限制，可以先获取第一安装包配置文件至获取第二安装包配置文件，也可以先获取第二安装包配置文件，或者同时执行，具体不做限定。

207、将对应的代码分别注入第一安装包配置文件以及第二安装包配置文件，完成骨架屏标签的插件配置；

本实施例中，在得到N个插件的第一安装包配置文件以及骨架屏标签中排除N个插件的第二安装包配置文件之后，分别注入对应的JS代码，以完成骨架屏标签的插件的配置，并展示骨架屏标签的界面。

需要说明的是，骨架屏标签的插件的配置也即是对骨架屏标签的插件进行打包，根据插件是否配置了path可以确定两种不同的方式进行打包，当小游戏或小程序的插件陪了本地插件的path路径，则直接打包成呈包含path插件的pkg以及打包排除了path插件的pkg，当小游戏或小程序的插件未配置本地插件的path路径，则直接下载插件代码打包成完成的pkg以及打包排除了插件的本地代码。

208、通过插件对骨架屏标签进行解析，得到骨架屏标签对应的目标页面，其中，目标页面包括页面元素，页面元素包括关键元素和非关键元素；

209、对页面元素进行分析，得到目标页面对应骨架屏的页面结构；

210、根据骨架屏的页面结构，生成与目标页面相匹配的骨架屏。

本实施例中步骤201-202、208-210与第一实施例中的步骤101-102、104-106类似，此处不再赘述。

本发明实施例中，通过获取骨架屏标签，将需要展示骨架屏的页面包裹在骨架屏标签中，得到骨架屏标签对应的配置信息；基于配置信息确定骨架屏标签的生成参数；根据生成参数，为骨架屏标签配置插件；通过插件对骨架屏标签进行解析，得到骨架屏标签对应的目标页面；对页面元素进行分析，得到目标页面对应骨架屏的页面结构；根据骨架屏的页面结构，生成与目标页面相匹配的骨架屏。本发明通过遍历记录整个数据树层级与结构所拥有的样式，生成与当前结构相匹配的骨架屏结构，提升开发效率。

请参阅图3，本发明实施例中骨架屏生成方法的第三个实施例包括：

301、获取骨架屏标签，将需要展示骨架屏的页面包裹在骨架屏标签中，得到骨架屏标签对应的配置信息；

302、基于配置信息确定骨架屏标签的生成参数；

303、根据生成参数，为骨架屏标签配置插件；

304、通过插件对骨架屏标签进行解析，得到骨架屏标签对应的目标页面，其中，目标页面包括页面元素，页面元素包括关键元素和非关键元素；

305、解析目标页面的逻辑文件，以将目标页面的逻辑文件转换为文档对象模型树，其中，文档对象模型树包括多个节点，每个节点对应目标页面中的一个页面元素；

本实施例中，文档对象模型(Document Object Model，DOM)树，DOM树包括多个节点，每个节点对应目标页面中的一个页面元素。其中，DOM树包括多个节点，每个节点与逻辑文件中描述的一个页面元素相对应；比如，逻辑文件中的文本元素对应DOM树中的文本节点，又如，逻辑文件中的属性元素对应DOM树中的属性节点。

306、根据目标页面的配置信息对文档对象模型树进行裁剪，得到目标文档对象模型树，并去除目标文档对象模型树中与目标页面中的非关键元素相对应的节点；

本实施例中，DOM树中的每个节点携带各自对应的页面元素的属性，包括位置属性和样式属性；位置属性用于描述页面元素在目标页面中的布局位置(如宽高、距离页面顶端的距离、距离页面左端的距离)，样式属性用于描述页面元素在目标页面中呈现的显示效果(如字体颜色、背景色、前景色等)。依据各节点的属性来对DOM树进行裁剪，以去除非关键元素相对应的节点，而仅保留首屏可见元素对应的节点。

307、将目标页面中的关键元素替换为占位元素，得到目标页面对应的骨架屏的页面结构；

本实施例中，目标页面的页面元素包括关键元素和非关键元素，其中，关键元素是指目标页面中位于首屏中，且显示配置字段用于指示被显示的页面元素，即关键元素是指首屏可见元素。非关键元素是指目标页面中除关键页面元素之外的其他页面元素，即非关键元素包括首屏隐藏元素和非首屏元素。

具体地，关键元素的类型包括以下至少一种：文本元素、图片元素、按钮元素、表单元素、伪类元素和原生组件。本申请实施例中，在目标页面的页面结构的基础上，通过对关键元素和非关键元素进行不同的处理来得到目标页面对应的骨架屏的页面结构。

308、根据骨架屏的页面结构，生成与目标页面相匹配的骨架屏。

本实施例中步骤301-304、308与第一实施例中的步骤101-104、106类似，此处不再赘述。

本发明实施例中，通过获取骨架屏标签，将需要展示骨架屏的页面包裹在骨架屏标签中，得到骨架屏标签对应的配置信息；基于配置信息确定骨架屏标签的生成参数；根据生成参数，为骨架屏标签配置插件；通过插件对骨架屏标签进行解析，得到骨架屏标签对应的目标页面；对页面元素进行分析，得到目标页面对应骨架屏的页面结构；根据骨架屏的页面结构，生成与目标页面相匹配的骨架屏。本发明通过遍历记录整个数据树层级与结构所拥有的样式，生成与当前结构相匹配的骨架屏结构，提升开发效率。

请参阅图4，本发明实施例中骨架屏生成方法的第四个实施例包括：

401、获取骨架屏标签，将需要展示骨架屏的页面包裹在骨架屏标签中，得到骨架屏标签对应的配置信息；

402、基于配置信息确定骨架屏标签的生成参数；

43、根据生成参数，为骨架屏标签配置插件；

404、通过插件对骨架屏标签进行解析，得到骨架屏标签对应的目标页面，其中，目标页面包括页面元素，页面元素包括关键元素和非关键元素；

405、对目标页面中的元素进行清洗，得到目标元素，其中，目标元素为关键元素；

本实施例中，目标页面包括页面元素，页面元素包括静态资源数据和动态资源数据，目标页面的视图文件是根据目标页面中页面元素的静态资源数据生成的。

文档对象模型(Document Object Model，DOM)树，DOM树包括多个节点，每个节点对应目标页面中的一个页面元素。DOM树包括多个节点，每个节点与逻辑文件中描述的一个页面元素相对应；其中，需要清洗过滤掉数据树中一些无用的元素，得到目标元素。如被隐藏的元素、没有大小的元素、配置项中设置的被忽略的元素、node Type类型为非Element元素、没有意义的元素等。

406、从目标文档对象模型树中获取各节点的属性，其中，属性包括位置属性和样式属性；

本实施例中，不同类型的页面元素对应的占位元素的展示效果也不同。小程序的页面在视图层可以理解为是由组件树构成的，该组件树中的组件可以是小程序所在的客户端的官方内置组件，也可以是开发者自定义组件。在使用开发者工具对编译的目标页面进行预览时，使用的是目标页面的逻辑文件，该逻辑文件是html代码文件，对应DOM树；各页面元素的内容是以html标签的方式被存储的。在骨架屏标签中显示目标页面时使用的是目标页面的视图文件，各页面元素的内容是以组件标签的方式被存储的，对应组件树，在骨架屏标签中显示目标页面时组件的内部结构均被展开，每个组件是组件树上的一个节点。这就需要针对不同类型的页面元素进行有针对性的分析处理。

407、将各节点的位置属性确定为占位元素的位置属性，并将各节点的样式属性替换为占位元素的样式属性；

本实施例中，配置文件中包括骨架屏的配置信息，骨架屏的配置信息包括骨架屏中的占位元素的显示配置字段，占位元素的显示配置字段用于指示占位元素在骨架屏中被显示或被隐藏。另外，页面元素包括关键元素，关键元素与骨架屏中的占位元素具有对应的关系，所谓对应关系是指每一个关键元素都有与之对应的占位元素，当关键元素被替换时，采用与关键元素对应的占位元素替换该关键元素。

具体地，目标页面中的各个关键元素可分别向服务器发送请求来获取各个关键元素对应的动态资源数据；根据响应请求的响应时间不同，各个关键元素对应的动态资源数据加载时间有时间顺序；根据目标页面的视图文件和各个关键元素对应的动态资源数据依次渲染和显示目标页面中的各个关键元素。

408、将属性处理后的目标文档对象模型树转换为骨架屏的逻辑文件；

本实施例中，逻辑层包括逻辑文件，该逻辑文件可以是指JS文件；逻辑层采用JsCore线程运行JS文件，即逻辑层的任务均在逻辑线程(即JsCore线程)中被执行。

409、为骨架屏设置参数信息，根据参数信息得到目标页面对应的骨架屏的页面结构，其中，骨架屏的参数信息用于控制骨架屏的显示效果；

本实施例中，图片元素对应的占位元素、文本元素对应的占位元素和按钮元素对应的占位元素在骨架屏中是需要被呈现的重要元素，而其他的部分则是相对应不重要的，或是无需关心内部细节的，因此重要元素与非重要元素的呈现效果也可能不同。可以通过骨架屏的配置信息来优化骨架屏的显示效果，该骨架屏的配置信息可包括多个配置项。在处理配置项列表的时候，为了尽可能美观，可对配置项列表进行了同化处理，后面的子项都是第一个子项的克隆。比如，骨架屏标签的配置项列表不是通过ul/ol标签来声明的，因此借助data-*属性进行标示。

410、根据骨架屏的页面结构，生成与目标页面相匹配的骨架屏。

本实施例中步骤401-402、408-410与第一实施例中的步骤101-102、104-106类似，此处不再赘述。

在本发明实施例中，通过获取骨架屏标签，将需要展示骨架屏的页面包裹在骨架屏标签中，得到骨架屏标签对应的配置信息；基于配置信息确定骨架屏标签的生成参数；根据生成参数，为骨架屏标签配置插件；通过插件对骨架屏标签进行解析，得到骨架屏标签对应的目标页面；对页面元素进行分析，得到目标页面对应骨架屏的页面结构；根据骨架屏的页面结构，生成与目标页面相匹配的骨架屏。本发明通过遍历记录整个数据树层级与结构所拥有的样式，生成与当前结构相匹配的骨架屏结构，提升开发效率。

请参阅图5，本发明实施例中骨架屏生成方法的第五个实施例包括：

501、获取骨架屏标签，将需要展示骨架屏的页面包裹在骨架屏标签中，得到骨架屏标签对应的配置信息；

502、基于配置信息确定骨架屏标签的生成参数；

503、根据生成参数，为骨架屏标签配置插件；

504、通过插件对骨架屏标签进行解析，得到骨架屏标签对应的目标页面，其中，目标页面包括页面元素，页面元素包括关键元素和非关键元素；

505、对页面元素进行分析，得到目标页面对应骨架屏的页面结构；

506、获取目标页面的页面布局样式；

本实施例中，执行配置信息中的初始化函数，获得根节点递归根节点下面所有子节点，在递归过程中匹配开发者在配置信息的开发者自定义节点递归结束选项当做当前节点递归的结束条件。递归结束后，可以获得页面中所有的节点信息，进而通过对节点信息进行区分和定位，可以获得页面布局样式。

507、对页面布局样式进行划分，生成一个或多个块区域；

本实施例中，页面布局样式对应页面中不同的具体显示对象，例如文字区域，图像区域等，或者比如背景图、元素、文字、视频框、音频框等。对于不同的区域，进行划分，可以形成多个块区域，用于更好的对页面中的显示对象进行表示。

508、分别对块区域进行处理，使块区域与目标页面中的显示对象的轮廓一致；

本实施例中，页面中的显示对象会有重叠排布的现象，因此，需要对各个块区域进行处理和修整，例如对会使用户产生视觉障碍的块区域进行删除或重新划分，使各块区域与显示对象的轮廓基本一致，使款区域能够更清楚的表示页面中的显示对象的位置。

509、对处理后的块区域进行灰度填充，生成与目标页面相匹配的骨架屏。

本实施例中，填充节点可以为灰度块，也可以为其他形状或者颜色的形状、图形，可以根据具体的需要进行配置，提高骨架屏页面的表现力和适用性，通过不同的填充节点进行填充后，生成与目标页面相匹配的骨架屏页面，其中，具体地执行方法，为本领域现有的技术手段，此处不再进行赘述。

本实施例中步骤501-503、506-507与第一实施例中的步骤101-103、105-106类似，此处不再赘述。

本发明实施例中，通过获取骨架屏标签，将需要展示骨架屏的页面包裹在骨架屏标签中，得到骨架屏标签对应的配置信息；基于配置信息确定骨架屏标签的生成参数；根据生成参数，为骨架屏标签配置插件；通过插件对骨架屏标签进行解析，得到骨架屏标签对应的目标页面；对页面元素进行分析，得到目标页面对应骨架屏的页面结构；根据骨架屏的页面结构，生成与目标页面相匹配的骨架屏。本发明通过遍历记录整个数据树层级与结构所拥有的样式，生成与当前结构相匹配的骨架屏结构，提升开发效率。

上面对本发明实施例中骨架屏生成方法进行了描述，下面对本发明实施例中骨架屏生成装置进行描述，请参阅图6，本发明实施例中骨架屏生成装置的第一个实施例包括：

获取模块601，用于获取骨架屏标签，将需要展示骨架屏的页面包裹在所述骨架屏标签中，得到所述骨架屏标签对应的配置信息；

确定模块602，用于基于所述配置信息确定所述骨架屏标签的生成参数；

配置模块603，用于根据所述生成参数，为所述骨架屏标签配置插件；

解析模块604，用于通过所述插件对所述骨架屏标签进行解析，得到所述骨架屏标签对应的目标页面，其中，所述目标页面包括页面元素，所述页面元素包括关键元素和非关键元素；

分析模块605，用于对所述页面元素进行分析，得到所述目标页面对应骨架屏的页面结构；

生成模块606，用于根据所述骨架屏的页面结构，生成与所述目标页面相匹配的骨架屏。

本发明实施例中，通过获取骨架屏标签，将需要展示骨架屏的页面包裹在骨架屏标签中，得到骨架屏标签对应的配置信息；基于配置信息确定骨架屏标签的生成参数；根据生成参数，为骨架屏标签配置插件；通过插件对骨架屏标签进行解析，得到骨架屏标签对应的目标页面；对页面元素进行分析，得到目标页面对应骨架屏的页面结构；根据骨架屏的页面结构，生成与目标页面相匹配的骨架屏。本发明通过遍历记录整个数据树层级与结构所拥有的样式，生成与当前结构相匹配的骨架屏结构，提升开发效率。

请参阅图7，本发明实施例中骨架屏生成装置的第二个实施例，该骨架屏生成装置具体包括：

获取模块601，用于获取骨架屏标签，将需要展示骨架屏的页面包裹在所述骨架屏标签中，得到所述骨架屏标签对应的配置信息；

确定模块602，用于基于所述配置信息确定所述骨架屏标签的生成参数；

配置模块603，用于根据所述生成参数，为所述骨架屏标签配置插件；

解析模块604，用于通过所述插件对所述骨架屏标签进行解析，得到所述骨架屏标签对应的目标页面，其中，所述目标页面包括页面元素，所述页面元素包括关键元素和非关键元素；

分析模块605，用于对所述页面元素进行分析，得到所述目标页面对应骨架屏的页面结构；

生成模块606，用于根据所述骨架屏的页面结构，生成与所述目标页面相匹配的骨架屏。

在本实施例中，所述配置模块603包括：

获取单元6031，用于获取所述骨架屏标签对应的对应的属性信息，其中，所述属性信息包括所述骨架屏标签对应的插件的版本信息和所述骨架屏标签中排除所述插件的安装包配置文件的信息；根据所述插件的插件标识获取所述插件的第一安装包配置文件；根据所述安装包配置文件的信息获取所述骨架屏标签中的第二安装包配置文件；

注入单元6032，用于将对应的代码分别注入所述第一安装包配置文件以及所述第二安装包配置文件，完成所述骨架屏标签的插件配置。

在本实施例中，所述获取单元6032具体用于：

当所述插件中每个插件的版本号与第一插件中插件的版本号均匹配成功时，将所述第一插件中与所述插件中所有插件的版本号进行匹配，并将匹配成功的插件标记为第二插件；

获取所述第二插件对应的安装包配置文件，并将所述安装包配置文件标记为第一安装包配置文件，其中，所述第一插件为所述本地数据库中与所述插件的插件标识相匹配的插件。

在本实施例中，所述分析模块605具体用于：

清洗单元6051，用于对所述目标页面中的元素进行清洗，得到目标元素，其中，所述目标元素为关键元素；

替换单元6052，用于将所述目标页面中的关键元素替换为占位元素，得到所述目标页面对应的骨架屏的页面结构。

在本实施例中，所述清洗单元6051具体用于：

解析所述目标页面的逻辑文件，以将所述目标页面的逻辑文件转换为文档对象模型树，其中，所述文档对象模型树包括多个节点，每个节点对应所述目标页面中的一个页面元素；

根据所述目标页面的配置信息对所述文档对象模型树进行裁剪，得到目标文档对象模型树，并去除所述目标文档对象模型树中与所述目标页面中的非关键元素相对应的节点。

本实施例中，所述替换单元6052具体用于：

从所述目标文档对象模型树中获取各节点的属性，其中，所述属性包括位置属性和样式属性；

将所述各节点的位置属性确定为所述占位元素的位置属性，并将所述各节点的样式属性替换为所述占位元素的样式属性；

将属性处理后的目标文档对象模型树转换为所述骨架屏的逻辑文件；

为所述骨架屏设置参数信息，根据所述参数信息得到所述目标页面对应的骨架屏的页面结构，其中，所述骨架屏的参数信息用于控制所述骨架屏的显示效果。

本实施例中，所述生成模块606具体用于：

获取所述目标页面的页面布局样式；

对所述页面布局样式进行划分，生成一个或多个块区域；

分别对所述块区域进行处理，使所述块区域与所述目标页面中的显示对象的轮廓一致；

对处理后的块区域进行灰度填充，生成与所述目标页面相匹配的骨架屏。

本发明实施例中，通过获取骨架屏标签，将需要展示骨架屏的页面包裹在骨架屏标签中，得到骨架屏标签对应的配置信息；基于配置信息确定骨架屏标签的生成参数；根据生成参数，为骨架屏标签配置插件；通过插件对骨架屏标签进行解析，得到骨架屏标签对应的目标页面；对页面元素进行分析，得到目标页面对应骨架屏的页面结构；根据骨架屏的页面结构，生成与目标页面相匹配的骨架屏。本发明通过遍历记录整个数据树层级与结构所拥有的样式，生成与当前结构相匹配的骨架屏结构，提升开发效率。

上面图6和图7从模块化功能实体的角度对本发明实施例中的骨架屏生成装置进行详细描述，下面从硬件处理的角度对本发明实施例中骨架屏生成设备进行详细描述。

图8是本发明实施例提供的一种骨架屏生成设备的结构示意图，该骨架屏生成设备800可因配置或性能不同而产生比较大的差异，可以包括一个或一个以上处理器(central processing units，CPU)810(例如，一个或一个以上处理器)和存储器820，一个或一个以上存储应用程序833或数据832的存储介质830(例如一个或一个以上海量存储设备)。其中，存储器820和存储介质830可以是短暂存储或持久存储。存储在存储介质830的程序可以包括一个或一个以上模块(图示没标出)，每个模块可以包括对骨架屏生成设备800中的一系列指令操作。更进一步地，处理器810可以设置为与存储介质830通信，在骨架屏生成设备800上执行存储介质830中的一系列指令操作，以实现上述各方法实施例提供的骨架屏生成方法的步骤。

骨架屏生成设备800还可以包括一个或一个以上电源840，一个或一个以上有线或无线网络接口850，一个或一个以上输入输出接口860，和/或，一个或一个以上操作系统831，例如Windows Serve，Mac OS X，Unix，Linux，FreeBSD等等。本领域技术人员可以理解，图8示出的骨架屏生成设备结构并不构成对本申请提供的骨架屏生成设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

本发明还提供一种计算机可读存储介质，该计算机可读存储介质可以为非易失性计算机可读存储介质，该计算机可读存储介质也可以为易失性计算机可读存储介质，所述计算机可读存储介质中存储有指令，当所述指令在计算机上运行时，使得计算机执行上述骨架屏生成方法的步骤。

所述领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统，装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(read-only memory，ROM)、随机存取存储器(random access memory，RAM)、磁碟或者光盘等各种可以存储程序代码的介质。

以上所述，以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。

Claims (6)

1.一种骨架屏生成方法，其特征在于，所述骨架屏生成方法包括：

获取骨架屏标签，将需要展示骨架屏的页面包裹在所述骨架屏标签中，得到所述骨架屏标签对应的配置信息；

基于所述配置信息确定所述骨架屏标签的生成参数；

根据所述生成参数，为所述骨架屏标签配置插件；

通过所述插件对所述骨架屏标签进行解析，得到所述骨架屏标签对应的目标页面，其中，所述目标页面包括页面元素，所述页面元素包括关键元素和非关键元素；

对所述页面元素进行分析，得到所述目标页面对应骨架屏的页面结构；

根据所述骨架屏的页面结构，生成与所述目标页面相匹配的骨架屏；

所述根据所述生成参数，为所述骨架屏标签配置插件包括：获取所述骨架屏标签对应的属性信息，其中，所述属性信息包括所述骨架屏标签对应的插件的版本信息和所述骨架屏标签中排除所述插件的安装包配置文件的信息；根据所述插件的插件标识获取所述插件的第一安装包配置文件；根据所述安装包配置文件的信息获取所述骨架屏标签中的第二安装包配置文件；将对应的代码分别注入所述第一安装包配置文件以及所述第二安装包配置文件，完成所述骨架屏标签的插件配置；

所述对所述页面元素进行分析，得到所述目标页面对应骨架屏的页面结构包括：对所述目标页面中的元素进行清洗，得到目标元素，其中，所述目标元素为关键元素；将所述目标页面中的关键元素替换为占位元素，得到所述目标页面对应的骨架屏的页面结构；

所述根据所述骨架屏的页面结构，生成与所述目标页面相匹配的骨架屏包括：获取所述目标页面的页面布局样式；对所述页面布局样式进行划分，生成一个或多个块区域；分别对所述块区域进行处理，使所述块区域与所述目标页面中的显示对象的轮廓一致；对处理后的块区域进行灰度填充，生成与所述目标页面相匹配的骨架屏；

所述对所述目标页面中的元素进行清洗，得到目标元素，其中，所述目标元素为关键元素包括：解析所述目标页面的逻辑文件，以将所述目标页面的逻辑文件转换为文档对象模型树，其中，所述文档对象模型树包括多个节点，每个节点对应所述目标页面中的一个页面元素；根据所述目标页面的配置信息对所述文档对象模型树进行裁剪，得到目标文档对象模型树，并去除所述目标文档对象模型树中与所述目标页面中的非关键元素相对应的节点。

2.根据权利要求1所述的骨架屏生成方法，其特征在于，所述根据所述插件的插件标识获取所述插件的第一安装包配置文件包括：

当所述插件中每个插件的版本号与第一插件中插件的版本号均匹配成功时，将所述第一插件中与所述插件中所有插件的版本号进行匹配，并将匹配成功的插件标记为第二插件；

获取所述第二插件对应的安装包配置文件，并将所述安装包配置文件标记为第一安装包配置文件，其中，所述第一插件为本地数据库中与所述插件的插件标识相匹配的插件。

3.根据权利要求1所述的骨架屏生成方法，其特征在于，所述将所述目标页面中的关键元素替换为占位元素，得到所述目标页面对应的骨架屏的页面结构包括：

从所述目标文档对象模型树中获取各节点的属性，其中，所述属性包括位置属性和样式属性；

将所述各节点的位置属性确定为所述占位元素的位置属性，并将所述各节点的样式属性替换为所述占位元素的样式属性；

将属性处理后的目标文档对象模型树转换为所述骨架屏的逻辑文件；

为所述骨架屏设置参数信息，根据所述参数信息得到所述目标页面对应的骨架屏的页面结构，其中，所述骨架屏的参数信息用于控制所述骨架屏的显示效果。

4.一种骨架屏生成装置，其特征在于，所述骨架屏生成装置包括：

获取模块，用于获取骨架屏标签，将需要展示骨架屏的页面包裹在所述骨架屏标签中，得到所述骨架屏标签对应的配置信息；

确定模块，用于基于所述配置信息确定所述骨架屏标签的生成参数；

配置模块，用于根据所述生成参数，为所述骨架屏标签配置插件；

解析模块，用于通过所述插件对所述骨架屏标签进行解析，得到所述骨架屏标签对应的目标页面，其中，所述目标页面包括页面元素，所述页面元素包括关键元素和非关键元素；

分析模块，用于对所述页面元素进行分析，得到所述目标页面对应骨架屏的页面结构；

生成模块，用于根据所述骨架屏的页面结构，生成与所述目标页面相匹配的骨架屏；

所述配置模块包括：获取单元，用于获取所述骨架屏标签对应的属性信息，其中，所述属性信息包括所述骨架屏标签对应的插件的版本信息和所述骨架屏标签中排除所述插件的安装包配置文件的信息；根据所述插件的插件标识获取所述插件的第一安装包配置文件；根据所述安装包配置文件的信息获取所述骨架屏标签中的第二安装包配置文件；注入单元，用于将对应的代码分别注入所述第一安装包配置文件以及所述第二安装包配置文件，完成所述骨架屏标签的插件配置；

所述分析模块具体用于：清洗单元，用于对所述目标页面中的元素进行清洗，得到目标元素，其中，所述目标元素为关键元素；替换单元，用于将所述目标页面中的关键元素替换为占位元素，得到所述目标页面对应的骨架屏的页面结构；

所述生成模块具体用于：获取所述目标页面的页面布局样式；对所述页面布局样式进行划分，生成一个或多个块区域；分别对所述块区域进行处理，使所述块区域与所述目标页面中的显示对象的轮廓一致；对处理后的块区域进行灰度填充，生成与所述目标页面相匹配的骨架屏；

所述清洗单元具体用于：解析所述目标页面的逻辑文件，以将所述目标页面的逻辑文件转换为文档对象模型树，其中，所述文档对象模型树包括多个节点，每个节点对应所述目标页面中的一个页面元素；根据所述目标页面的配置信息对所述文档对象模型树进行裁剪，得到目标文档对象模型树，并去除所述目标文档对象模型树中与所述目标页面中的非关键元素相对应的节点。

5.一种骨架屏生成设备，其特征在于，所述骨架屏生成设备包括：存储器和至少一个处理器，所述存储器中存储有指令，所述存储器和所述至少一个处理器通过线路互连；

所述至少一个处理器调用所述存储器中的所述指令，以使得所述骨架屏生成设备执行如权利要求1-3中任一项所述的骨架屏生成方法的步骤。

6.一种计算机可读存储介质，所述计算机可读存储介质上存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1-3中任一项所述的骨架屏生成方法的步骤。