CN114237589A - 一种骨架屏生成方法、装置、终端设备及存储介质 - Google Patents

Abstract

本申请适用于计算机应用技术领域，提供了一种骨架屏生成方法、装置及终端设备，方法包括：获取待渲染页面的骨架屏的布局文件；根据布局文件获取待渲染页面的骨架屏中各个组件的类型信息和属性信息；根据各个组件的类型信息确定并加载待加载的网页资源；根据各个组件的属性信息确定待加载的网页资源的分布属性；根据待加载的网页资源分布属性对加载后的网页资源的属性进行渲染，得到待渲染页面的骨架屏，在需要对页面的骨架屏进行调整的情况下，只需要调整布局文件中的组件的类型和属性，无需重新编写骨架屏代码，有效地降低了维护和开发成本，解决了目前的骨架屏生成方法存在维护和开发成本高的问题。

Description

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

技术领域

本申请属于计算机应用技术领域，尤其涉及一种骨架屏生成方法、装置、终端设备及计算机可读存储介质。

背景技术

骨架屏是指在浏览器的页面数据尚未返回之前，先给用户展示出页面的大致结构的页面框架。在页面数据返回后，浏览器会根据返回的页面数据对页面进行渲染，即在骨架屏中补充需要显示的内容，通过骨架屏能够提前给用户感知页面布局和内容，提升用户体验，保证用户存留率。

目前骨架屏的生成方式主要是通过开发人员根据项目中的页面去编写对应的骨架屏代码，而在项目中的页面更新的时候，就需要开发人员重新编写骨架屏代码并重新发版。由此可见，目前的骨架屏生成方法存在维护和开发成本高的问题。

发明内容

本申请实施例提供了一种骨架屏生成方法、装置、终端设备及计算机可读存储介质，可以解决目前的骨架屏生成方法存在维护和开发成本高的问题。

第一方面，本申请实施例提供了一种骨架屏生成方法，包括：

获取待渲染页面的骨架屏的布局文件；其中，所述骨架屏的布局文件包括所述待渲染页面的骨架屏中包含的组件的类型信息和属性信息；

根据所述布局文件获取所述待渲染页面的骨架屏中各个组件的类型信息和属性信息；

根据所述各个组件的类型信息确定并加载待加载的网页资源；

根据所述各个组件的属性信息确定所述待加载的网页资源的分布属性；

根据所述待加载的网页资源的分布属性对加载后的网页资源的属性进行渲染，得到所述待渲染页面的骨架屏。

可选地，在获取待渲染页面的骨架屏的布局文件之前，还包括：

获取用户在可操作界面对骨架屏组件的设置信息，并根据所述设置信息生成与所述设置信息对应的布局文件。

可选的，所述获取用户在可操作界面对骨架屏组件的设置信息，并所述设置信息生成与所述设置信息对应的布局文件，包括：

获取用户在可操作界面对骨架屏组件的设置信息，并生成与所述设置信息对应的骨架屏预览效果；

根据用户对骨架屏预览效果的调整信息，生成与所述调整信息对应的骨架屏的布局文件。

可选的，在根据用户对骨架屏预览效果的调整信息，生成与所述调整信息对应的骨架屏的布局文件之后，还包括：

保存同一个待渲染页面不同版本的布局文件。

可选的，在所述获取待渲染页面的骨架屏的布局文件之后，还包括：

判断获取到的所述布局文件与原布局文件是否存在差异；

若所述布局文件与所述原布局文件存在差异，则确定所述布局文件与所述原布局文件的差异组件；

根据所述差异组件更新待渲染页面的骨架屏。

可选的，所述判断所述布局文件与原布局文件是否存在差异，包括：

比较所述布局文件的文件大小与所述原布局文件的文件大小是否存在差异；

若所述布局文件的文件大小与所述原布局文件的文件大小存在差异，则确定所述布局文件与所述原布局文件存在差异；

若所述布局文件的文件大小与所述原布局文件的文件大小相等，则分别解析所述布局文件和所述原布局文件，得到所述布局文件中各组件的类型信息和属性信息以及所述原布局文件中对应组件的类型信息和属性信息；

若所述布局文件中各组件的类型信息与所述原布局文件中对应组件的类型信息存在不一致，或者所述布局文件中各组件的属性信息与所述原布局文件中对应组件的属性信息存在不一致，则确定所述布局文件与所述原布局文件存在差异；

若所述布局文件中各组件的类型信息与所述原布局文件中对应组件的类型信息一致，并且所述布局文件中各组件的属性信息与所述原布局文件中对应组件的属性信息一致，则确定所述布局文件与所述原布局文件不存在差异所述判断所述布局文件与原布局文件是否存在差异，包括：

比较所述布局文件的文件大小与所述原布局文件的文件大小是否存在差异；

若所述布局文件的文件大小与所述原布局文件的文件大小存在差异，则确定所述布局文件与所述原布局文件存在差异；

若所述布局文件的文件大小与所述原布局文件的文件大小相等，则分别解析所述布局文件和所述原布局文件，得到所述布局文件中各组件的类型信息和属性信息以及所述原布局文件中对应组件的类型信息和属性信息；

若所述布局文件中各组件的类型信息与所述原布局文件中对应组件的类型信息存在不一致，或者所述布局文件中各组件的属性信息与所述原布局文件中对应组件的属性信息存在不一致，则确定所述布局文件与所述原布局文件存在差异；

若所述布局文件中各组件的类型信息与所述原布局文件中对应组件的类型信息一致，并且所述布局文件中各组件的属性信息与所述原布局文件中对应组件的属性信息一致，则确定所述布局文件与所述原布局文件不存在差异。

可选的，所述根据所述差异组件更新待渲染页面的骨架屏，包括：

判断差异组件的类型与所述原布局文件中的组件的类型相比是否发生变化；

若所述差异组件的类型与所述原布局文件中的组件的类型相比发生变化，则根据所述差异组件的类型重新加载网页资源，并根据所述差异组件的属性对重新加载的网页资源进行调整，生成更新后的骨架屏；

若所述差异组件的类型与所述原布局文件中的组件的类型相比未发生变化，则根据所述差异组件的属性信息对原有网页资源进行调整，生成更新后的骨架屏。

第二方面，本申请实施例提供了一种骨架屏生成装置，包括：

文件获取单元，用于获取待渲染页面的骨架屏的布局文件；其中，所述骨架屏的布局文件包括所述待渲染页面的骨架屏中包含的组件的类型信息和属性信息；

信息获取单元，用于根据所述布局文件获取所述待渲染页面的骨架屏中各个组件的类型信息和属性信息；

加载单元，用于根据所述各个组件的类型信息确定并加载待加载的网页资源；

分布属性确定单元，用于根据所述各个组件的属性信息确定待加载的网页资源的分布属性；

渲染单元，用于根据所述待加载的网页资源的分布属性对加载后的网页资源的属性进行渲染，得到所述待渲染页面的骨架屏。

第三方面，本申请实施例提供了一种终端设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，上述处理器执行所述计算机程序时实现如上述第一方面中任一项所述的骨架屏生成方法的步骤。

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

第五方面，本申请实施例提供了一种计算机程序产品，当计算机程序产品在终端设备上运行时，使得终端设备可执行上述第一方面中任一项所述的骨架屏生成方法。

本申请实施例与现有技术相比存在的有益效果是：

本申请实施例提供的一种骨架屏生成方法，通过布局文件确定出待渲染页面的骨架屏中各个组件的类型和属性，然后加载出组件的网络资源并进行渲染，就可以生成对应的骨架屏，在需要对页面的骨架屏进行调整的情况下，只需要调整布局文件中的组件的类型和属性，无需重新编写骨架屏代码，有效地降低了维护和开发成本，解决了目前的骨架屏生成方法存在维护和开发成本高的问题。

附图说明

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

图1是本申请一实施例提供的骨架屏生成方法的实现流程示意图；

图2是本申请一实施例提供的页面的骨架屏的布局示意图；

图3是本申请一实施例提供的另一种骨架屏生成方法的实现流程示意图；

图4是本申请一实施例提供的一种可操作界面的界面示意图；

图5是本申请一实施例提供的又一种骨架屏生成方法的实现流程图；

图6是本申请一实施例提供的骨架屏生成装置的结构示意图；

图7是本申请一实施例提供的终端设备的结构示意图。

具体实施方式

以下描述中，为了说明而不是为了限定，提出了诸如特定系统结构、技术之类的具体细节，以便透彻理解本申请实施例。然而，本领域的技术人员应当清楚，在没有这些具体细节的其它实施例中也可以实现本申请。在其它情况中，省略对众所周知的系统、装置、电路以及方法的详细说明，以免不必要的细节妨碍本申请的描述。

应当理解，当在本申请说明书和所附权利要求书中使用时，术语“包括”指示所描述特征、整体、步骤、操作、元素和/或组件的存在，但并不排除一个或多个其它特征、整体、步骤、操作、元素、组件和/或其集合的存在或添加。

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

如在本申请说明书和所附权利要求书中所使用的那样，术语“如果”可以依据上下文被解释为“当...时”或“一旦”或“响应于确定”或“响应于检测到”。类似地，短语“如果确定”或“如果检测到[所描述条件或事件]”可以依据上下文被解释为意指“一旦确定”或“响应于确定”或“一旦检测到[所描述条件或事件]”或“响应于检测到[所描述条件或事件]”。

另外，在本申请说明书和所附权利要求书的描述中，术语“第一”、“第二”、“第三”等仅用于区分描述，而不能理解为指示或暗示相对重要性。

在本申请说明书中描述的参考“一个实施例”或“一些实施例”等意味着在本申请的一个或多个实施例中包括结合该实施例描述的特定特征、结构或特点。由此，在本说明书中的不同之处出现的语句“在一个实施例中”、“在一些实施例中”、“在其他一些实施例中”、“在另外一些实施例中”等不是必然都参考相同的实施例，而是意味着“一个或多个但不是所有的实施例”，除非是以其他方式另外特别强调。术语“包括”、“包含”、“具有”及它们的变形都意味着“包括但不限于”，除非是以其他方式另外特别强调。

请参阅图1，图1是本申请一实施例提供的骨架屏生成方法的实现流程图。在本申请实施例中，上述骨架屏生成方法的执行主体可以是终端设备或服务器等具备数据处理能力的设备。其中，上述终端设备可以是智能手机、平板电脑、台式电脑、智能可穿戴设备等具备数据处理能力的电子设备。

如图1所示，本申请一实施例提供的骨架屏生成方法可以包括S11～S15，详述如下：

在S11中，获取待渲染页面的骨架屏的布局文件。

本申请实施例中，上述骨架屏的布局文件包括待渲染页面的骨架屏中包含的组件的类型信息和属性信息。

在实际应用中，上述组件的类型信息用于描述组件的类型，亦即通过类型信息能够表示该组件是哪一类的组件。上述组件的类型包括但不限于头像(circle)、文本(text)、内容(bar)、卡片(card)、图标(icon)、按钮(button)等。

在具体应用中，上述组件的类型信息可以是“circle”、“text”、“bar”、“card”、“icon”、“button”。

在具体应用中，上述组件的类型信息还可以是“该组件的类型为头像”、“该组件的类型为文本”、“该组件的类型为内容”、“该组件的类型为卡片”、“该组件的类型为图标”、“该组件的类型为按钮”等文字描述信息。

在具体应用中，还可以为各个组件的类型进行编号，例如设置类型编号为001的组件类型为头像、类型编号为002的组件类型为文本、类型编号为003的组件类型为内容、类型编号为004的组件类型为卡片、类型编号为005的组件类型为图标、类型编号为006的组件类型为按钮，相应地，上述组件的类型信息可以对应于上述类型编号，即上述组件的类型信息可以是“该组件的类型编号为001”、“该组件的类型编号为002”、“该组件的类型编号为003”、“该组件的类型编号为004”、“该组件的类型编号为005”、“该组件的类型编号为006”等描述信息。

需要说明的是，上述类型编号仅为示例，在实际应用中，类型编号的设置可以根据实际需求进行选择，例如可以是字符与数字的结合等，对于不同组件类型，其对应的类型编号不同。

在实际应用中，上述组件的属性信息用于描述组件的属性，组件的属性包括但不限于位置(即在页面中的分布情况)、大小(长度、宽度、直径、对角线长度、边长等)、颜色、文本、动画效果等。

其中，组件的位置可以通过组件的中心点与页面各个边界(例如上边界、下边界、左边界和右边界)的距离来表示。上述距离页面各个边界的距离、组件的长度和宽度可以通过占用像素点的个数来表示，需要说明的是组件的长度和宽度可以基于。

示例性的，请参阅图2，图2示出了一种页面的骨架屏的布局示意图。如图2所示，该页面的骨架屏可以包括第一组件21、第二组件22以及第三组件23。其中，第一组件21的类型信息是“circle”，属性信息是“组件的中心点距离页面上边界距离为12像素点，中心点距离页面左边界距离为10像素点；组件的直径为10像素点；组件的颜色为白色；文本无；动画效果无”；第二组件22的类型信息是“text”，属性信息是“组件的中心点距离页面上边界距离为30像素点，组件的中心点距离页面左边界距离为20像素点；组件的长度为25像素点，宽度为15像素点；颜色为白色；文本为“aaaaaaaaaaaaaaaaaaaaa”；动画效果为“旋转显示””；第三组件23的类型信息是“button”，属性信息是“组件的中心点距离页面上边界距离为45像素点，组件的中心点距离页面左边界距离为12像素点；组件的长度为10像素点，宽度为5像素点；颜色为白色；文本为“下一页”；动画效果无”。

在本申请实施例中，上述骨架屏的布局文件可以是根据用户(这里可以是开发人员，也可以是页面设计人员，还可以是其他对页面的骨架屏有调整需求的其他人员)对页面的骨架屏的设置结果生成的对应的特定格式的文件(例如可以是JSON格式的文件)。

在终端设备根据用户对页面的骨架屏的设置生成对应的布局文件后，可以将生成的布局文件保存在指定的目录下，在终端设备启动浏览器应用程序(当然还可以是其他需要加载显示页面的应用程序，此处仅以浏览器应用程序为例进行说明)时，浏览器应用程序就可以到指定的目录下读取到该布局文件。

在具体应用中，对于不同的待渲染页面终端设备可以生成不同的骨架屏布局文件，并且在保存布局文件时，可以以页面编号或页面名称区分布局文件，即生成布局文件时以页面编号或页面名称对生成的布局文件进行命名。

在具体应用中，终端设备在获取待渲染页面的骨架屏的布局文件时，可以基于待渲染页面的页面编号或页面名称从指定的目录下读取出对应的布局文件，这样能够保证在对待渲染页面进行骨架屏渲染的时候不会出错。当然，不同的待渲染页面的骨架屏的布局文件可以保存在不同的静态路径中，本申请对此不加以限制。

在本申请一实施例中，可以保存同一个待渲染页面不同版本的布局文件，在需要回溯的时候，就可以通过选择上一版本的布局文件来进行回溯。

在本申请一实施例中，上述布局文件可以通过JSON文件的形式进行保存，通过JSON文件的形式进行保存可以有效地减少存储空间，且在文件加载和渲染的对终端设备的性能影响也比较小。

请参阅图3，在本申请一实施例中，在S11之前还可以包括以下步骤：

S16：获取用户在可操作界面对骨架屏组件的设置信息，并根据设置信息生成与设置信息对应的布局文件。

在本申请实施例中，可以通过设置可操作界面供用户对页面的骨架屏进行设置操作，然后获取用户在可操作界面对骨架屏组件的设置信息，并该设置信息生成与该设置信息对应的布局文件。例如，用户可以拖拽可操作界面中的组件来对骨架屏进行设置操作，方便用户操作。

具体的，在该可操作界面中设置可被选中和操作的各种组件(被选中的组件可以根据用户的操作来确定对应的设置信息)，响应于用户的操作(例如选中操作、拖拽操作等)，用户通过上述可操作界面将其选中的组件放置在用户需要的位置，并且用户可以对该组件的属性信息进行设置，当用户完成了整个页面的骨架屏的搭建后，可操作界面就获取到与用户操作对应的设置信息，并根据设置信息就可以输出该页面的骨架屏的布局文件(即在该页面中骨架屏包括的所有组件的类型信息和属性信息均已确定)。

在确定组件位置的时候，用户也可以直接在属性信息中的位置选项中进行设置，例如设置其距离页面上边界的距离、距离页面左边界的距离，以此来确定组件的位置。

在一种实现方式中，该可操作界面还可以生成用户操作后的骨架屏的预览效果，使得用户可以针对该预览效果再次对骨架屏中的组件进行调整，得到用户对骨架屏预览效果的调整信息，当用户再次对骨架屏中的组件进行调整时，可操作界面就能够实时根据调整信息显示与调整信息对应的预览效果。

在本申请一实施例中，上述S16具体可以包括：

获取用户在可操作界面对骨架屏组件的设置信息，并生成与所述设置信息对应的骨架屏预览效果；

根据用户对骨架屏预览效果的调整信息，生成与所述调整信息对应的骨架屏的布局文件。

在本申请一实施例中，还可以通过检测用户是否输入确认操作，来确定是否要生成对应的骨架屏的布局文件，当用户通过可操作界面对骨架屏的组件进行设置并生成对应的预览效果时，若用户满意该预览效果，则可以在可操作界面中输入确认操作，此时可操作界面就可以生成并保存与该预览效果对应的骨架屏的布局文件；若用户不满意该预览效果，则可以再次对可操作界面中的组件进行设置，重新生成对应的预览效果。

需要说明的是，上述确认操作可以是用户点击确认按钮的点击操作，具体地，在可操作界面中设置一确认按钮，但用户点击该确认按钮时，可操作界面就会响应该点击操作，生成与当前预览效果对应的布局文件。当然，在用户点击确认按钮时，还可以弹出对话框，该对话框用于显示如“是否保存当前预览效果对应的布局文件”的提示信息，并提供“是”与“否”两个按钮，当用户选择“是”这个按钮时，可操作界面就会生成并保存与当前预览效果对应的布局文件，若用户选择“否”这个按钮时，可操作界面就不会生成与当前预览效果对应的布局文件。可以理解的是，以上关于确认操作的描述仅为示例而非限制，上述确认操作还可以是其他操作，例如用户关闭可操作界面的操作、例如用户输入预设确认操作(这个预设确认操作可以是在可操作界面的某个预设区域进行双击、按压滑动等不同类型的操作)、用户点击保存选项的操作等。

示例性的，请参阅图4，图4示出了本申请实施例提供的一种可操作界面的界面示意图。如图4所示，上述可操作界面可以包括组件选择区41、预览区42以及属性调整区域43。

上述组件选择区41中设置有多个可供用户选择的不同类型的组件，如组件1、组件2、组件3...组件N，用户可以在组件选择区41中拖拽出想要选择的组件，并将选择的组件放置在预览区42，此时预览区42就会根据用户选择的组件和放置的位置生成对应的预览效果，并在属性调整区域43显示该组件的各项属性，用户可以在属性调整区43输入属性值，从而调整组件的属性(位置、大小、颜色、动画效果等)，此时预览区42中的预览效果也会随着用户的调整而调整。在用户调整完成后就可以生成与预览效果对应的骨架屏的布局文件。

在S12中，根据布局文件获取待渲染页面的骨架屏中各个组件的类型信息和属性信息。

在本申请实施例中，上述布局文件中包含了待渲染页面的骨架屏中包含的所有组件的类型信息和属性信息，因此，终端设备基于各个组件的类型信息和属性信息就能够生成并渲染出与布局文件对应的骨架屏。

在具体应用中，终端设备可以根据布局文件确定出要加载的组件的类型和属性，然后将这些组件加载到浏览器等页面显示应用程序的首屏中，实现骨架屏的加载。

在具体实现中，每个组件都有其对应的网页资源，因此终端设备在获取到该布局文件后就可以确认出待渲染页面的骨架屏需要包括哪些网页资源，然后在对应的位置渲染出该对应属性的网页资源，当骨架屏中包含的所有组件都渲染完成时，就得到了待渲染页面的骨架屏。

S13：根据各个组件的类型信息确定并加载待加载的网页资源；

S14：根据各个组件的属性信息确定待加载的网页资源的分布属性；

S15：根据待加载的网页资源的分布属性对加载后的网页资源的属性进行渲染，得到待渲染页面的骨架屏。

在具体应用中，上述待加载的网页资源与组件的类型信息是对应的。示例性的，当组件的类型为文本时，浏览器就会加载与文本对应的网页资源，与文本对应的网页资源可以包括文本标签和文本信息等内容；当组件的类型为图片时，浏览器会加载与图片对应的网页资源，与图片对应的网页资源可以包括图片标签和图片信息等内容。

在具体应用中，由于属性信息中已经包含了各个组件的位置、大小、颜色、动画效果等多种信息，因此可以确定要加载的网络资源的分布属性，上述分布属性包括位置、大小、颜色以及动画效果，因此可以在浏览器页面中加载与组件对应的网络资源后，就可以根据该网络资源的位置、大小以及颜色对已加载的网络资源进行调整，在调整完成后再运行网络资源的动画效果，就能够自动生成与布局文件对应的骨架屏了。

基于此，在本申请一实施例中，上述S15可以包括：

根据网络资源的位置、大小以及颜色对已加载的网络资源进行调整；

在调整完成后运行动画效果。

以上可以看出，本申请实施例提供的一种骨架屏生成方法，通过布局文件确定出待渲染页面的骨架屏中各个组件的类型和属性，然后加载出对应的组件就可以生成对应的骨架屏，在需要对页面的骨架屏进行调整的情况下，只需要调整布局文件中的组件的类型和属性，无需重新编写骨架屏代码，有效地降低了维护和开发成本，解决了目前的骨架屏生成方法存在维护和开发成本高的问题。

请参阅图5，图5示出了本申请实施例提供的另一种骨架屏生成方法的实现流程示意图，如图5所示，区别于图1所示的实施例，本申请实施例提供的骨架屏生成方法在S11之后还包括：

S17：判断获取到的布局文件与原布局文件是否存在差异；

S18：若布局文件与原布局文件存在差异，则确定布局文件与原布局文件的差异组件；

S19：根据所述差异组件更新待渲染页面的骨架屏。

在本申请实施例中，将获取到的布局文件与原布局文件进行比较，判断布局文件是否存在差异，如果布局文件存在差异，则可以根据发生变化的组件更新原有的骨架屏，这样能够减少骨架屏生成过程中加载的网页资源，提高生成骨架屏的效率，并减少系统资源的消耗。

在本申请实施例中，通过判断本次获取到的布局文件与原布局文件是否存在差异，以此来确定页面的骨架屏布局是否发生变化，如果布局文件与原布局文件存在差异，则可以确定页面的骨架屏布局已经发生变化了，如果布局文件与原布局文件不存在差异，则可以确定页面的骨架屏布局没有发生变化。

在具体应用中，可以根据获取到的布局文件的文件大小和原布局文件的文件大小来初步判断获取到的布局文件与原布局文件是否存在差异。

在本申请一实施例中，上述S17可以包括以下步骤：

比较所述布局文件的文件大小与所述原布局文件的文件大小是否存在差异；

若所述布局文件的文件大小与所述原布局文件的文件大小存在差异，则确定所述布局文件与所述原布局文件存在差异；

若所述布局文件的文件大小与所述原布局文件的文件大小相等，则解析所述布局文件和所述原布局文件，得到所述布局文件中各组件的类型信息和属性信息以及所述原布局文件中对应组件的类型信息和属性信息；

比较所述布局文件中各组件的类型信息与所述原布局文件中对应组件的类型信息是否一致；

若所述布局文件中各组件的类型信息与所述原布局文件中对应组件的类型信息一致，则比较所述布局文件中各组件的属性信息与所述原布局文件中对应组件的属性信息是否一致；

若所述布局文件中各组件的类型信息与所述原布局文件中对应组件的类型信息存在不一致或所述布局文件中各组件的属性信息与所述原布局文件中对应组件的属性信息存在不一致，则确定所述布局文件与所述原布局文件存在差异；

若所述布局文件中各组件的属性信息与所述原布局文件中对应组件的属性信息一致，则确定获取到的布局文件与原布局文件不存在差异。

具体应用中，可以通过比较本次获取到的布局文件的文件大小与原布局文件的大小是否存在差异，若布局文件的文件大小(本申请实施例提到的文件大小可以是指文件占用的内存空间大小)与原布局文件的文件大小存在差异，则表明布局文件与原布局文件存在差异，若布局文件的文件大小与原布局文件的文件大小不存在差异，则解析两份文件，然后对比两份文件中的每个组件的类型信息和属性信息是否一致，若均一致，则表明本次获取到的布局文件与原布局文件不存在差异，否则表明本次获取到的布局文件与原布局文件存在差异。解析文件的过程可以参见已有的解析方案，本申请在此不加以赘述。

在本申请一实施例中，上述S19可以包括以下步骤：

判断差异组件的类型与原布局文件中的组件的类型相比是否发生变化；

若差异组件的类型与原布局文件中的组件的类型相比发生变化，则根据差异组件的类型重新加载网页资源，并根据差异组件的属性对重新加载的网页资源进行调整，生成更新后的骨架屏；

若差异组件的类型与原布局文件中的组件的类型相比未发生变化，则根据差异组件的属性信息对原有网页资源进行调整，生成更新后的骨架屏。

在本申请实施例中，可以根据差异组件确定重新加载的网页资源的位置、大小、颜色以及动画效果，根据重新加载的网页资源的位置、大小、颜色对加载的网页资源进行调整，然后运行对应的动画效果；或者是确定原有网页资源资源的位置、大小、颜色以及动画效果的变化情况，然后根据位置、大小、颜色的变化情况对原有网页资源进行调整，最后运行对应的动画效果，就能够根据差异组件更新待渲染页面的骨架屏。

以上可以看出，本申请实施例提供的骨架屏生成方法，能够基于新获取的布局文件和原布局文件的差异点来更新待渲染页面的骨架屏，能够减少骨架屏生成过程中加载的网页资源，提高生成骨架屏的效率，并减少系统资源的消耗。

应理解，上述实施例中各步骤的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本申请实施例的实施过程构成任何限定。

对应于上文实施例所述的一种骨架屏生成方法，图6示出了本申请一实施例提供的骨架屏生成装置的结构框图，为了便于说明，仅示出了与本申请实施例相关的部分。参照图6，该骨架屏生成装置60包括：文件获取单元61、信息获取单元62、加载单元63、分布属性确定单元64以及渲染单元65。其中：

文件获取单元61用于获取待渲染页面的骨架屏的布局文件；其中，所述骨架屏的布局文件包括所述待渲染页面的骨架屏中包含的组件的类型信息和属性信息。

信息获取单元62用于根据所述布局文件获取所述待渲染页面的骨架屏中各个组件的类型信息和属性信息；

加载单元63用于所述根据各个组件的类型信息确定并加载待加载的网页资源；

分布属性确定单元64用于根据所述各个组件的属性信息确定所述待加载的网页资源的分布属性；

渲染单元65用于根据所述待加载的网页资源的分布属性对加载后的网页资源的属性进行渲染，得到所述待渲染页面的骨架屏。

在本申请的一个实施例中，上述骨架屏生成装置60还包括可操作单元。

可操作单元用于获取用户在可操作界面对骨架屏组件的设置信息，并所述设置信息生成与所述设置信息对应的布局文件。

在本申请的一个实施例中，可操作模块具体包括：预览单元和调整单元。

其中：

预览单元用于获取用户在可操作界面对骨架屏组件的设置信息，并生成与所述设置信息对应的骨架屏预览效果。

调整单元用于根据用户对骨架屏预览效果的调整信息，生成与所述调整信息对应的骨架屏的布局文件。

在本申请一个实施例中，上述骨架屏生成装置60还包括保存单元，保存单元用于保存同一个待渲染页面不同版本的布局文件。

在本申请的一个实施例中，上述骨架屏生成装置60还包括：第一判断单元、差异确定单元和更新单元。其中：

第一判断单元用于判断获取到的所述布局文件与原布局文件是否存在差异；

差异确定单元用于若所述布局文件与所述原布局文件存在差异，则确定所述布局文件与所述原布局文件的差异组件；

更新单元用于根据所述差异组件更新待渲染页面的骨架屏。

在本申请的一个实施例中，第一判断单元包括：第一比较单元、解析单元、第二比较单元、第三比较单元。其中：

第一比较单元用于比较所述布局文件的文件大小与所述原布局文件的文件大小是否存在差异；若所述布局文件的文件大小与所述原布局文件的文件大小存在差异，则确定所述布局文件与所述原布局文件存在差异；

解析单元用于若所述布局文件的文件大小与所述原布局文件的文件大小相等，则解析所述布局文件和所述原布局文件，得到所述布局文件中各组件的类型信息和属性信息以及所述原布局文件中对应组件的类型信息和属性信息；

第二比较单元用于比较所述布局文件中各组件的类型信息与所述原布局文件中对应组件的类型信息是否一致；

第三比较单元用于若所述布局文件中各组件的类型信息与所述原布局文件中对应组件的类型信息一致，则比较所述布局文件中各组件的属性信息与所述原布局文件中对应组件的属性信息是否一致；若所述布局文件中各组件的类型信息与所述原布局文件中对应组件的类型信息存在不一致或所述布局文件中各组件的属性信息与原布局文件中对应组件的属性信息存在不一致，则确定所述布局文件与所述原布局文件存在差异；若所述布局文件中各组件的类型信息与所述原布局文件中对应组件的类型信息一致，并且所述布局文件中各组件的属性信息与所述原布局文件中对应组件的属性信息一致，则确定所述布局文件与所述原布局文件不存在差异。

在本申请的一个实施例中，上述更新单元包括：第二判断单元和重新调整单元。其中：

第二判断单元用于判断差异组件的类型与所述原布局文件中的组件的类型相比是否发生变化；

重新调整单元用于若差异组件的类型与所述原布局文件中的组件的类型相比发生变化，则根据差异组件的类型重新加载网页资源，并根据差异组件的属性对重新加载的网页资源进行调整，生成更新后的骨架屏；

若差异组件的类型与所述原布局文件中的组件的类型相比未发生变化，则根据差异组件的属性信息对原有网页资源进行调整，生成更新后的骨架屏。

以上可以看出，本申请实施例提供的一种骨架屏生成装置，通过布局文件确定出待渲染页面的骨架屏中各个组件的类型和属性，然后加载出对应的组件就可以生成对应的骨架屏，在需要对页面的骨架屏进行调整的情况下，只需要调整布局文件中的组件的类型和属性，无需重新编写骨架屏代码，有效地降低了维护和开发成本，解决了目前的骨架屏生成方法存在维护和开发成本高的问题。

图7为本申请一实施例提供的终端设备的结构示意图。如图7所示，该实施例的终端设备7包括：至少一个处理器70(图7中仅示出一个)处理器、存储器71以及存储在所述存储器71中并可在所述至少一个处理器70上运行的计算机程序72，所述处理器70执行所述计算机程序72时实现上述任意一种骨架屏生成方法实施例中的步骤。

本领域技术人员可以理解，图7仅仅是终端设备7的举例，并不构成对终端设备7的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件，例如还可以包括输入输出设备、网络接入设备等。

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

所述存储器71在一些实施例中可以是所述终端设备7的内部存储单元，例如终端设备7的硬盘或内存。所述存储器71在另一些实施例中也可以是所述终端设备7的外部存储设备，例如所述终端设备7上配备的插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(Flash Card)等。进一步地，所述存储器71还可以既包括所述终端设备7的内部存储单元也包括外部存储设备。所述存储器71用于存储操作系统、应用程序、引导装载程序(BootLoader)、数据以及其他程序等，例如所述计算机程序的程序代码等。所述存储器71还可以用于暂时地存储已经输出或者将要输出的数据。

本申请实施例还提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时可实现上述任意一种骨架屏生成方法实施例中的步骤。

本申请实施例提供了一种计算机程序产品，当计算机程序产品在终端设备上运行时，使得终端设备执行时可实现上述任意一种骨架屏生成方法实施例中的步骤。

需要说明的是，上述装置/单元之间的信息交互、执行过程等内容，由于与本申请方法实施例基于同一构思，其具体功能及带来的技术效果，具体可参见方法实施例部分，此处不再赘述。

本申请实施例还提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时可实现上述任意一种骨架屏生成方法实施例中的步骤。

本申请实施例提供了一种计算机程序产品，当计算机程序产品在终端设备上运行时，使得终端设备执行时实现可实现上述任意一种骨架屏生成方法实施例中的步骤。

所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，仅以上述各功能单元、模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能单元、模块完成，即将所述装置的内部结构划分成不同的功能单元或模块，以完成以上描述的全部或者部分功能。实施例中的各功能单元、模块可以集成在一个第一处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中，上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。另外，各功能单元、模块的具体名称也只是为了便于相互区分，并不用于限制本申请的保护范围。上述系统中单元、模块的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

在上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述或记载的部分，可以参见其它实施例的相关描述。

本领域普通技术人员可以意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本申请的范围。

在本申请所提供的实施例中，应该理解到，所揭露的骨架屏生成装置和方法，可以通过其它的方式实现。例如，以上所描述的装置/终端设备实施例仅仅是示意性的，例如，所述模块或单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通讯连接可以是通过一些接口，装置或单元的间接耦合或通讯连接，可以是电性，机械或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

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

Claims (10)

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

获取待渲染页面的骨架屏的布局文件；其中，所述骨架屏的布局文件包括所述待渲染页面的骨架屏中包含的组件的类型信息和属性信息；

根据所述布局文件获取所述待渲染页面的骨架屏中各个组件的类型信息和属性信息；

根据所述各个组件的类型信息确定并加载待加载的网页资源；

根据所述各个组件的属性信息确定所述待加载的网页资源的分布属性；

根据所述待加载的网页资源的分布属性对加载后的网页资源的属性进行渲染，得到所述待渲染页面的骨架屏。

2.如权利要求1所述的骨架屏生成方法，其特征在于，在获取待渲染页面的骨架屏的布局文件之前，还包括：

获取用户在可操作界面对骨架屏组件的设置信息，并根据所述设置信息生成与所述设置信息对应的布局文件。

3.如权利要求2所述的骨架屏生成方法，其特征在于，所述获取用户在可操作界面对骨架屏组件的设置信息，并所述设置信息生成与所述设置信息对应的布局文件，包括：

获取用户在可操作界面对骨架屏组件的设置信息，并生成与所述设置信息对应的骨架屏预览效果；

根据用户对骨架屏预览效果的调整信息，生成与所述调整信息对应的骨架屏的布局文件。

4.如权利要求3所述的骨架屏生成方法，其特征在于，在根据用户对骨架屏预览效果的调整信息，生成与所述调整信息对应的骨架屏的布局文件之后，还包括：

保存同一个待渲染页面不同版本的布局文件。

5.如权利要求1至4任一项所述的骨架屏生成方法，其特征在于，在所述获取待渲染页面的骨架屏的布局文件之后，还包括：

判断获取到的所述布局文件与原布局文件是否存在差异；

若所述布局文件与所述原布局文件存在差异，则确定所述布局文件与所述原布局文件的差异组件；

根据所述差异组件更新待渲染页面的骨架屏。

6.如权利要求5所述的骨架屏生成方法，其特征在于，所述判断所述布局文件与原布局文件是否存在差异，包括：

比较所述布局文件的文件大小与所述原布局文件的文件大小是否存在差异；

若所述布局文件的文件大小与所述原布局文件的文件大小存在差异，则确定所述布局文件与所述原布局文件存在差异；

若所述布局文件的文件大小与所述原布局文件的文件大小相等，则分别解析所述布局文件和所述原布局文件，得到所述布局文件中各组件的类型信息和属性信息以及所述原布局文件中对应组件的类型信息和属性信息；

若所述布局文件中各组件的类型信息与所述原布局文件中对应组件的类型信息存在不一致，或者所述布局文件中各组件的属性信息与所述原布局文件中对应组件的属性信息存在不一致，则确定所述布局文件与所述原布局文件存在差异；

若所述布局文件中各组件的类型信息与所述原布局文件中对应组件的类型信息一致，并且所述布局文件中各组件的属性信息与所述原布局文件中对应组件的属性信息一致，则确定所述布局文件与所述原布局文件不存在差异。

7.如权利要求5所述的骨架屏生成方法，其特征在于，所述根据所述差异组件更新待渲染页面的骨架屏，包括：

判断差异组件的类型与所述原布局文件中的组件的类型相比是否发生变化；

若所述差异组件的类型与所述原布局文件中的组件的类型相比发生变化，则根据所述差异组件的类型重新加载网页资源，并根据所述差异组件的属性对重新加载的网页资源进行调整，生成更新后的骨架屏；

若所述差异组件的类型与所述原布局文件中的组件的类型相比未发生变化，则根据所述差异组件的属性信息对原有网页资源进行调整，生成更新后的骨架屏。

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

文件获取单元，用于获取待渲染页面的骨架屏的布局文件；所述骨架屏的布局文件包括所述待渲染页面的骨架屏中包含的所有组件的类型信息和属性信息；

信息获取单元，用于根据所述布局文件获取所述待渲染页面的骨架屏中各个组件的类型信息和属性信息；

加载单元，用于根据所述各个组件的类型信息确定并加载待加载的网页资源；

分布属性确定单元，用于根据所述各个组件的属性信息确定所述待加载的网页资源的分布属性；

渲染单元，用于根据所述待加载的网页资源的分布属性对加载后的网页资源的属性进行渲染，得到所述待渲染页面的骨架屏。

9.一种终端设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如权利要求1至7任一项所述的骨架屏生成方法的步骤。

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

Images