CN115857932A - 骨架屏文件生成方法及装置、骨架屏显示方法及装置 - Google Patents

Abstract

本公开实施例公开了一种骨架屏文件生成方法及装置、骨架屏显示方法及装置、计算机可读存储介质、计算机程序产品及电子设备，其中，该骨架屏显示方法包括：响应于目标应用程序执行页面更新操作，从服务端获取目标页面对应的骨架屏文件和目标页面的地址；将骨架屏文件和目标页面的地址对应存储到目标存储区；响应于目标应用程序执行访问目标页面的操作，基于目标页面的地址，从目标存储区提取骨架屏文件，并利用骨架屏文件，显示目标页面的骨架屏；响应于从服务端加载目标页面的页面数据完毕，关闭骨架屏，并显示目标页面。本公开实施例实现了在访问目标页面时，直接提取存储的骨架屏文件并显示骨架屏，完全消除了等待资源下载时显示白屏的时间。

Description

骨架屏文件生成方法及装置、骨架屏显示方法及装置

技术领域

本公开涉及计算机技术领域，尤其是一种骨架屏文件生成方法及装置、骨架屏显示方法及装置、计算机可读存储介质、计算机程序产品及电子设备。

背景技术

在网页应用中，在新打开一个页面时，通常会新建一个页面视图控件(webview)负责打开一个页面(例如H5页面)，此时，即便页面渲染由服务端执行，在新打开一个页面时，仍然会有一段加载时间的存在，如果该页面在服务端的请求较多，会导致数据加载时间变长，最终呈现给用户的是一个很长时间的白屏页面。

为缩短白屏页面显示的时间，目前可以采用骨架屏技术。骨架屏指的是当打开一个网页时，在页面解析和数据加载之前，首先给用户展示页面的大概样式。在骨架屏页面中，图片、文字、图标都将通过诸如灰色矩形块等样式来展示，在真实页面展示之前，用户能够感知到即将加载页面的基本CSS(层叠样式表，Cascading Style Sheets))样式和页面布局。

目前的骨架屏文件生成方法，当应用程序打开一个页面时，客户端会打开一个webview，该webview直接请求远程地址，进行资源下载解析并渲染，渲染过程会存在白屏时间，渲染完成后，进行数据请求，并同时控制展示出一个骨架屏的蒙层，数据请求完成后，再取消骨架屏蒙层。因此，目前的骨架屏文件生成方法无法完全解决加载页面数据时的白屏问题。

发明内容

为了解决上述技术问题，提出了本公开。本公开的实施例提供了一种骨架屏文件生成方法及装置、骨架屏显示方法及装置、计算机可读存储介质、计算机程序产品及电子设备。

本公开的实施例提供了一种骨架屏文件生成方法，该方法包括：基于输入的骨架屏配置信息，调整预设的初始配置文件，得到更新后的配置文件；获取配置文件针对的目标页面的页面数据；基于更新后的配置文件和页面数据，生成目标页面的骨架屏文件；响应于接收到目标用户终端发送的页面更新请求，且确定目标用户终端符合页面更新条件，将骨架屏文件和目标页面的地址发送至目标用户终端，其中，页面更新请求是目标用户终端上的目标应用程序进行页面更新操作时发送的请求。

在一些实施例中，获取配置文件针对的目标页面的页面数据，包括：响应于确定配置文件包括模拟登陆数据，基于模拟登录数据，登录访问配置文件针对的处于登录态的目标页面；获取目标页面的页面数据。

根据本公开实施例的另一个方面，本公开的实施例提供了一种骨架屏显示方法，该方法包括：响应于目标应用程序执行页面更新操作，从服务端获取目标页面对应的骨架屏文件和目标页面的地址，其中，目标页面是待通过目标应用程序显示的页面；将骨架屏文件和目标页面的地址对应存储到目标存储区；响应于目标应用程序执行访问目标页面的操作，基于目标页面的地址，从目标存储区提取骨架屏文件，并利用骨架屏文件，显示目标页面的骨架屏；响应于从服务端加载目标页面的页面数据完毕，关闭骨架屏，并显示目标页面。

在一些实施例中，页面更新操作的触发方式包括以下至少一项：在目标应用程序启动后自动触发执行页面更新操作；用户按照预设的操作方式手动触发页面更新操作。

在一些实施例中，利用骨架屏文件，显示目标页面的骨架屏，包括：生成第一页面视图控件和第二页面视图控件；在第一页面视图控件中渲染骨架屏文件以显示目标页面的骨架屏；响应于从服务端加载目标页面的页面数据完毕，关闭骨架屏，并显示目标页面，包括：响应于从服务端加载目标页面的页面数据完毕，在第二页面视图控件中渲染加载页面数据完毕的目标页面，以显示目标页面；通过关闭第一页面视图控件关闭骨架屏。

根据本公开实施例的另一个方面，提供了一种骨架屏文件生成装置，该装置包括：调整模块，用于基于输入的骨架屏配置信息，调整预设的初始配置文件，得到更新后的配置文件；第一获取模块，用于获取配置文件针对的目标页面的页面数据；生成模块，用于基于更新后的配置文件和页面数据，生成目标页面的骨架屏文件；发送模块，用于响应于接收到目标用户终端发送的页面更新请求，且确定目标用户终端符合页面更新条件，将骨架屏文件和目标页面的地址发送至目标用户终端，其中，页面更新请求是目标用户终端上的目标应用程序进行页面更新操作时发送的请求。

在一些实施例中，第一获取模块包括：登录单元，用于响应于确定配置文件包括模拟登陆数据，基于模拟登录数据，登录访问配置文件针对的处于登录态的目标页面；获取单元，用于获取目标页面的页面数据。

根据本公开实施例的另一个方面，提供了一种骨架屏显示装置，该装置包括：第二获取模块，用于响应于目标应用程序执行页面更新操作，从服务端获取目标页面对应的骨架屏文件和目标页面的地址，其中，目标页面是待通过目标应用程序显示的页面；存储模块，用于将骨架屏文件和目标页面的地址对应存储到目标存储区；第一显示模块，用于响应于目标应用程序执行访问目标页面的操作，基于目标页面的地址，从目标存储区提取骨架屏文件，并利用骨架屏文件，显示目标页面的骨架屏；第二显示模块，用于响应于从服务端加载目标页面的页面数据完毕，关闭骨架屏，并显示目标页面。

在一些实施例中，页面更新操作的触发方式包括以下至少一项：在目标应用程序启动后自动触发执行页面更新操作；用户按照预设的操作方式手动触发页面更新操作。

在一些实施例中，第一显示模块包括：第一生成单元，用于生成第一页面视图控件和第二页面视图控件；第一渲染单元，用于在第一页面视图控件中渲染骨架屏文件以显示目标页面的骨架屏；第二显示模块包括：第二渲染单元，用于响应于从服务端加载目标页面的页面数据完毕，在所述第二页面视图控件中渲染加载所述页面数据完毕的所述目标页面，以显示所述目标页面；关闭单元，用于通过关闭所述第一页面视图控件关闭所述骨架屏。

根据本公开实施例的另一个方面，提供了一种计算机可读存储介质，其上存储有计算机程序指令，该计算机程序指令被处理器执行时，实现上述骨架屏文件生成方法或骨架屏显示方法的步骤。

根据本公开实施例的另一个方面，提供了一种电子设备，电子设备包括：处理器；用于存储处理器可执行指令的存储器；处理器，用于从存储器中读取可执行指令，并执行指令以实现上述骨架屏文件生成方法或骨架屏显示方法。

根据本公开实施例的另一个方面，提供了一种计算机程序产品，包括计算机程序指令，计算机程序指令被处理器执行时实现上述骨架屏文件生成方法或骨架屏显示方法的步骤。

基于本公开上述实施例提供的骨架屏文件生成方法及装置、骨架屏显示方法及装置、计算机可读存储介质、电子设备及计算机程序产品，通过在服务端预先设置初始配置文件，并基于输入的骨架屏配置信息，调整预设的初始配置文件，得到更新后的配置文件，基于更新后的配置文件和目标页面的页面数据，生成目标页面的骨架屏文件，最后响应于接收到目标用户终端发送的页面更新请求，将骨架屏文件和目标页面的地址发送至目标用户终端，实现了灵活地根据配置文件调整待生成的骨架屏的样式等特性，无需对用于生成骨架屏的程序进行修改，大大降低了生成骨架屏的操作难度，且可以在服务端自动、快速生成目标页面的骨架屏，用户端无需执行生成骨架屏的操作，从而有效降低了用户端显示骨架屏耗费的时间。

此外，通过在用户端的目标应用程序执行页面更新操作时，从服务端获取目标页面对应的骨架屏文件和目标页面的地址，将骨架屏文件和目标页面的地址对应存储到目标存储区，在目标应用程序访问目标页面时，基于目标页面的地址，从目标存储区提取骨架屏文件，并显示目标页面的骨架屏，最后响应于加载目标页面的页面数据完毕，关闭骨架屏，并显示目标页面，从而实现了在访问目标页面时，直接提取存储的骨架屏文件并显示骨架屏，完全消除了等待资源下载时显示白屏的时间，便于用户对目标应用程序进行操作。

下面通过附图和实施例，对本公开的技术方案做进一步的详细描述。

附图说明

通过结合附图对本公开实施例进行更详细的描述，本公开的上述以及其他目的、特征和优势将变得更加明显。附图用来提供对本公开实施例的进一步理解，并且构成说明书的一部分，与本公开实施例一起用于解释本公开，并不构成对本公开的限制。在附图中，相同的参考标号通常代表相同部件或步骤。

图1是本公开所适用的系统图。

图2是本公开一示例性实施例提供的骨架屏文件生成方法的流程示意图。

图3是本公开另一示例性实施例提供的骨架屏文件生成方法的流程示意图。

图4A是本公开的实施例的一个登录态的目标页面的示意图。

图4B是本公开的实施例的一个登录态的目标页面的骨架屏的示意图。

图5是本公开一示例性实施例提供的骨架屏显示方法的流程示意图。

图6是本公开另一示例性实施例提供的骨架屏显示方法的流程示意图。

图7是本公开一示例性实施例提供的骨架屏文件生成装置的结构示意图。

图8是本公开另一示例性实施例提供的骨架屏文件生成装置的结构示意图。

图9是本公开一示例性实施例提供的骨架屏显示装置的结构示意图。

图10是本公开另一示例性实施例提供的骨架屏显示装置的结构示意图。

图11是本公开一示例性实施例提供的电子设备的结构图。

具体实施方式

下面，将参考附图详细地描述根据本公开的示例实施例。显然，所描述的实施例仅仅是本公开的一部分实施例，而不是本公开的全部实施例，应理解，本公开不受这里描述的示例实施例的限制。

应注意到：除非另外具体说明，否则在这些实施例中阐述的部件和步骤的相对布置、数字表达式和数值不限制本公开的范围。

本领域技术人员可以理解，本公开实施例中的“第一”、“第二”等术语仅用于区别不同步骤、设备或模块等，既不代表任何特定技术含义，也不表示它们之间的必然逻辑顺序。

还应理解，在本公开实施例中，“多个”可以指两个或两个以上，“至少一个”可以指一个、两个或两个以上。

还应理解，对于本公开实施例中提及的任一部件、数据或结构，在没有明确限定或者在前后文给出相反启示的情况下，一般可以理解为一个或多个。

另外，本公开中术语“和/或”，仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，本公开中字符“/”，一般表示前后关联对象是一种“或”的关系。

还应理解，本公开对各个实施例的描述着重强调各个实施例之间的不同之处，其相同或相似之处可以相互参考，为了简洁，不再一一赘述。

同时，应当明白，为了便于描述，附图中所示出的各个部分的尺寸并不是按照实际的比例关系绘制的。

以下对至少一个示例性实施例的描述实际上仅仅是说明性的，决不作为对本公开及其应用或使用的任何限制。

对于相关领域普通技术人员已知的技术、方法和设备可能不作详细讨论，但在适当情况下，所述技术、方法和设备应当被视为说明书的一部分。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步讨论。

本公开实施例可以应用于终端设备、计算机系统、服务器等电子设备，其可与众多其它通用或专用计算系统环境或配置一起操作。适于与终端设备、计算机系统、服务器等电子设备一起使用的众所周知的终端设备、计算系统、环境和/或配置的例子包括但不限于：个人计算机系统、服务器计算机系统、瘦客户机、厚客户机、手持或膝上设备、基于微处理器的系统、机顶盒、可编程消费电子产品、网络个人电脑、小型计算机系统、大型计算机系统和包括上述任何系统的分布式云计算技术环境，等等。

终端设备、计算机系统、服务器等电子设备可以在由计算机系统执行的计算机系统可执行指令(诸如程序模块)的一般语境下描述。通常，程序模块可以包括例程、程序、目标程序、组件、逻辑、数据结构等等，它们执行特定的任务或者实现特定的抽象数据类型。计算机系统/服务器可以在分布式云计算环境中实施，分布式云计算环境中，任务是由通过通信网络链接的远程处理设备执行的。在分布式云计算环境中，程序模块可以位于包括存储设备的本地或远程计算系统存储介质上。

申请概述

目前的骨架屏文件生成方法，当应用程序打开一个页面时，客户端会打开一个webview，该webview直接请求远程地址，进行资源下载解析并渲染，渲染过程会存在白屏时间，渲染完成后，进行数据请求，并同时控制展示出一个骨架屏的蒙层，数据请求完成后，再取消骨架屏蒙层，展示出页面内容。该方案虽然可以用骨架屏蒙层遮挡在请求数据过程中出现的页面数据或内容空白，但是因为webview加载远程静态资源(例如CSS、图片等)仍然需要一定的时间，在此过程中，前端代码无法执行，无法解决在访问页面的过程中出现的页面白屏，如果请求时间过长，或者网络环境出异常，就会导致过长的白屏时间，使用户关闭应用程序的可能性极大提高，进而影响用户的操作。

为解决上述问题，本公开实施例提出了一种快速、自动生成页面骨架屏的方法，以及一种快速显示骨架屏的方法，开发人员只需简单配置即可生成骨架屏，用户端预先存储生成的骨架屏，在访问页面时，直接显示存储的骨架屏，即可完全消除白屏显示的时间。

示例性系统

图1示出了可以应用本公开的实施例的骨架屏文件生成方法或骨架屏文件生成装置，以及骨架屏显示方法或骨架屏显示装置的示例性系统架构100。

如图1所示，系统架构100可以包括终端设备101，网络102和服务器103。网络102用于在终端设备101和服务器103之间提供通信链路的介质。网络102可以包括各种连接类型，例如有线、无线通信链路或者光纤电缆等等。

用户可以使用终端设备101通过网络102与服务器103交互，以接收或发送消息等。终端设备101上可以安装有各种通讯客户端应用，例如网页浏览器应用、搜索类应用、购物类应用、即时通信工具等。

终端设备101可以是各种电子设备，包括但不限于诸如移动电话、笔记本电脑、数字广播接收器、PDA(个人数字助理)、PAD(平板电脑)、PMP(便携式多媒体播放器)、车载终端等等的移动终端以及诸如数字TV、台式计算机等等的固定终端。

服务器103可以是提供各种服务的服务器，例如对终端设备101上显示的页面提供支持的后台页面资源服务器。后台页面资源服务器可以根据配置文件自动生成骨架屏文件，并将骨架屏文件发送给终端设备101，同时还可以将终端设备101请求的页面数据反馈给终端设备101。终端设备101可以存储骨架屏文件，当终端设备上的应用请求显示页面时，直接提取存储的骨架屏文件并显示骨架屏，待页面数据加载完成后显示完整的页面。

需要说明的是，本公开的实施例所提供的骨架屏文件生成方法可以通常由服务器103执行，相应地，骨架屏文件生成装置通常设置于服务器103中。本公开的实施例所提供的骨架屏显示方法通常由终端设备101执行，相应地，骨架屏显示装置通常设置于终端设备101中。

应该理解，图1中的终端设备、网络和服务器的数目仅仅是示意性的。根据实现需要，可以具有任意数目的终端设备、网络和服务器。

示例性方法

图2是本公开一示例性实施例提供的骨架屏文件生成方法的流程示意图。本实施例可应用在服务端(如图1所示的服务器103)上，如图2所示，该方法包括如下步骤：

步骤201，基于输入的骨架屏配置信息，调整预设的初始配置文件，得到更新后的配置文件。

在本实施例中，服务端可以基于输入的骨架屏配置信息，调整预设的初始配置文件，得到更新后的配置文件。其中，骨架屏配置信息可以是技术人员输入初始配置文件中的，初始配置文件可以是预先生成的。通常，针对某个或某一组页面，可以预先生成一个初始配置文件，初始配置文件可以是在执行本实施例的各步骤之前自动生成的。通过调整初始配置文件，技术人员可以对某个或某一组页面对应的骨架屏的样式进行调整。

需要说明的是，初始配置文件可以不是初次生成的配置文件，由于配置文件可以被随时更新，因此，对于本次更新后的配置文件，可以作为下次更新配置文件时的初始配置文件。

可选的，本实施例可以通过执行Node.js(运行在服务端的JavaScript)脚本实现，Node.js脚本具有输入输出功能，可以向其中输入各种命令，输出相应的数据。例如，可以向Node.js脚本输入初始化命令，生成并输出初始配置文件。也可以在调整初始配置文件并保存更新后的配置文件后，输入骨架屏生成命令，自动基于配置文件执行生成骨架屏的步骤。通常，可以将Node.js脚本的执行命令封装到NPM(Node包管理器，Node Package Manager)包中，将NPM包设置到用于支持某个或某一组页面显示的服务项目(例如支持某个应用程序内的所有H5页面的集合的服务项目)中，在该服务项目中运行该NPM包，即可执行本实施例的各步骤。

步骤202，获取配置文件针对的目标页面的页面数据。

在本实施例中，服务端可以获取配置文件针对的目标页面的页面数据。其中，配置文件针对的目标页面可以是一个页面，也可以是多个页面。可选的，配置文件中可以包括一个或多个页面的地址，这些地址分别对应的页面即目标页面。

可选的，服务端可以利用无头浏览器(例如puppeteer)，去模拟访问待生成骨架屏的目标页面，从而获取该目标页面包括的各种数据、DOM(文档对象模型，Document ObjectModel)节点信息，CSS信息等组成的页面数据。

步骤203，基于更新后的配置文件和页面数据，生成目标页面的骨架屏文件。

在本实施例中，服务端可以基于更新后的配置文件和页面数据，生成目标页面的骨架屏文件。

具体地，服务端可以对目标页面的页面数据中的DOM节点做递归分析，分析每个节点的DOM类型，然后按照固定的类型去添加class(类)，根据不同的class，会生成不同的骨架屏样式，最终得到骨架屏代码。骨架屏代码通常保存在骨架屏文件中，骨架屏文件通常为网页文件，例如HTML(超文本标记语言，HyperText Mark-up Language)文件。

步骤204，响应于接收到目标用户终端发送的页面更新请求，且确定目标用户终端符合页面更新条件，将骨架屏文件和目标页面的地址发送至目标用户终端。

在本实施例中，服务端可以响应于接收到目标用户终端发送的页面更新请求，且确定目标用户终端符合页面更新条件，将骨架屏文件和目标页面的地址发送至目标用户终端。

其中，页面更新请求是目标用户终端上的目标应用程序进行页面更新操作时发送的请求。目标用户终端可以是如图1所示的终端设备101。目标用户终端上可以安装有目标应用程序，用户可以通过目标应用程序浏览目标页面。

可选的，在目标应用程序启动时，或用户手动进行页面更新操作(例如向下滑动、点击更新按钮等)时，可以向服务端发送页面更新请求，服务端在收到页面更新请求后，向目标用户终端发送上述生成的骨架屏文件和对应的目标页面的地址。

当目标用户终端符合页面更新条件时，表示使用目标用户终端的用户可能会浏览目标页面，需要将目标页面对应的骨架屏文件预先存储到目标用户终端。可选的，页面更新条件可以包括但不限于以下至少一项：未向目标用户终端发送过上述骨架屏文件；向目标用户终端发送上述骨架屏文件的时刻距当前时刻超过预设时长。

本公开的上述实施例提供的方法，通过在服务端预先设置初始配置文件，并基于输入的骨架屏配置信息，调整预设的初始配置文件，得到更新后的配置文件，基于更新后的配置文件和目标页面的页面数据，生成目标页面的骨架屏文件，最后响应于接收到目标用户终端发送的页面更新请求，将骨架屏文件和目标页面的地址发送至目标用户终端，实现了灵活地根据配置文件调整待生成的骨架屏的样式等特性，无需对用于生成骨架屏的程序进行修改，大大降低了生成骨架屏的操作难度，且可以在服务端自动、快速生成目标页面的骨架屏，用户端无需执行生成骨架屏的操作，从而有效降低了用户端显示骨架屏耗费的时间。

在一些可选的实现方式中，如图3所示，步骤202包括：

步骤2021，响应于确定配置文件包括模拟登陆数据，基于模拟登录数据，登录访问配置文件针对的处于登录态的目标页面。

其中，模拟登陆数据用于提供登录进入目标系统所需的数据。作为示例，模拟登录数据可以为小型文本数据Cookie，技术人员可以将Cookie预先输入配置文件。服务端检测到配置文件中存在Cookie时，可以利用Cookie登录进入目标系统，获取处于登录态的目标页面。

如图4A所示，其示出了一个处于登录态的目标页面的示意图。

步骤2022，获取目标页面的页面数据。

该步骤与上述步骤202中描述的获取页面数据的方法相同，这里不再赘述。

在获取到处于登录态的目标页面的页面数据后，可以继续执行上述步骤203，生成处于登录态的目标页面的骨架屏。当用户登录进入目标系统时，目标用户终端首先获取存储在本地的骨架屏文件并显示骨架屏，当目标页面的页面数据加载完毕后，显示目标页面。

如图4B所示，其示出了一个处于登录态的目标页面的骨架屏的示意图。

本实施例通过在配置文件中设置模拟登陆数据，获取处于登录态的目标页面的页面数据，从而可以自动生成处于登录态的目标页面的骨架屏，在用户进行登录操作时，可以立即显示登录态的目标页面的骨架屏，从而进一步扩展了显示骨架屏的应用范围。

图5是本公开一示例性实施例提供的骨架屏显示方法的流程示意图。本实施例可应用在用户终端(如图1所示的终端设备101)上，如图5所示，该方法包括如下步骤：

步骤501，响应于目标应用程序执行页面更新操作，从服务端获取目标页面对应的骨架屏文件和目标页面的地址。

在本实施例中，用户终端可以响应于目标应用程序执行页面更新操作，从服务端获取目标页面对应的骨架屏文件和目标页面的地址(例如URL地址)。

其中，目标页面是待通过目标应用程序显示的页面。目标应用程序可以是各种类型的应用程序，例如网页浏览器、购物应用等。页面更新操作可以是用于更新待显示的骨架屏的操作。通常，当执行页面更新操作时，可以向服务端(如图1所示的服务器103)发送页面更新请求，服务端接收到页面更新请求后，向用户终端发送已生成的上述骨架屏和目标页面的地址。

可选的，页面更新操作的触发方式包括以下至少一项：

方式一，在目标应用程序启动后自动触发执行页面更新操作。

方式二，用户按照预设的操作方式手动触发页面更新操作。作为示例，预设的操作方式可以包括但不限于，滑动屏幕、点击按钮等。

步骤502，将骨架屏文件和目标页面的地址对应存储到目标存储区。

在本实施例中，用户终端可以将骨架屏文件和目标页面的地址对应存储到目标存储区。

其中，目标存储区可以是上述用户终端本地的存储区。可选的，可以按照键值对的方式存储骨架屏文件和目标页面的地址。例如，将目标页面的URL地址作为键(key)，将骨架屏的HTML文件的标识作为值(value)，对应存储骨架屏文件和目标页面的地址。

步骤503，响应于目标应用程序执行访问目标页面的操作，基于目标页面的地址，从目标存储区提取骨架屏文件，并利用骨架屏文件，显示目标页面的骨架屏。

在本实施例中，用户终端可以响应于目标应用程序执行访问目标页面的操作，基于目标页面的地址，从目标存储区提取骨架屏文件，并利用骨架屏文件，显示目标页面的骨架屏。

作为示例，访问目标页面的操作可以包括但不限于：点击链接、滑动屏幕、输入语音等。

通常，当执行访问目标页面的操作时，可以获取到目标页面的地址，根据地址提取存储在本地的骨架屏文件，并渲染骨架屏文件，从而显示骨架屏。同时，还可以继续加载目标页面的页面数据，在加载页面数据期间，持续显示骨架屏。

步骤504，响应于从服务端加载目标页面的页面数据完毕，关闭骨架屏，并显示目标页面。

在本实施例中，用户终端可以响应于从服务端加载目标页面的页面数据完毕，关闭骨架屏，并显示目标页面。当加载页面数据完毕时，可以触发加载完毕事件，用户终端对此事件做出响应，关闭骨架屏，显示目标页面，此时显示的目标页面是包含了完整数据的页面。

本公开的上述实施例提供的方法，通过在用户端的目标应用程序执行页面更新操作时，从服务端获取目标页面对应的骨架屏文件和目标页面的地址，将骨架屏文件和目标页面的地址对应存储到目标存储区，在目标应用程序访问目标页面时，基于目标页面的地址，从目标存储区提取骨架屏文件，并显示目标页面的骨架屏，最后响应于加载目标页面的页面数据完毕，关闭骨架屏，并显示目标页面，从而实现了在访问目标页面时，直接提取存储的骨架屏文件并显示骨架屏，完全消除了等待资源下载时显示白屏的时间，便于用户对目标应用程序进行操作。

在一些可选的实现方式中，如图6所示，步骤503包括：

步骤5031，生成第一页面视图控件和第二页面视图控件。

其中，第一页面视图控件是用于在用户终端的屏幕上显示骨架屏的控件。例如，第一页面视图控件可以是WebView控件。WebView是一个用来显示网页的控件，相当于一个微型的浏览器，利用它可以加载本地的HTML文件、加载远程的页面数据等。第二页面视图控件的类型可以与第一页面视图控件相同，例如均为WebView控件。

步骤5032，在第一页面视图控件中渲染骨架屏文件以显示目标页面的骨架屏。

步骤504包括：

步骤5041，响应于从服务端加载目标页面的页面数据完毕，在第二页面视图控件中渲染加载页面数据完毕的目标页面，以显示目标页面。

应当理解，在页面视图控件中渲染数据的方法是本领域的常规手段，这里不再赘述。

步骤5042，通过关闭所述第一页面视图控件关闭所述骨架屏。

作为示例，上述WebView可以被关闭，从而不再显示骨架屏。

本实施例通过生成第一页面视图控件和第二页面视图控件，在第一页面视图控件渲染本地的骨架屏文件，在第二页面视图中渲染远程加载的页面数据，实现了灵活高效地、地在骨架屏和目标页面之间切换显示，提高了显示骨架屏的效率。

示例性装置

图7是本公开一示例性实施例提供的骨架屏文件生成装置的结构示意图。本实施例可应用在服务端上，如图7所示，骨架屏文件生成装置包括：调整模块701，用于基于输入的骨架屏配置信息，调整预设的初始配置文件，得到更新后的配置文件；第一获取模块702，用于获取配置文件针对的目标页面的页面数据；生成模块703，用于基于更新后的配置文件和页面数据，生成目标页面的骨架屏文件；发送模块704，用于响应于接收到目标用户终端发送的页面更新请求，且确定目标用户终端符合页面更新条件，将骨架屏文件和目标页面的地址发送至目标用户终端，其中，页面更新请求是目标用户终端上的目标应用程序进行页面更新操作时发送的请求。

在本实施例中，调整模块701基于输入的骨架屏配置信息，调整预设的初始配置文件，得到更新后的配置文件。其中，骨架屏配置信息可以是技术人员输入初始配置文件中的，初始配置文件可以是预先生成的。通常，针对某个或某一组页面，可以预先生成一个初始配置文件，初始配置文件可以是在执行本实施例的各步骤之前自动生成的。通过调整初始配置文件，技术人员可以对某个或某一组页面对应的骨架屏的样式进行调整。

需要说明的是，初始配置文件可以不是初次生成的配置文件，由于配置文件可以被随时更新，因此，对于本次更新后的配置文件，可以作为下次更新配置文件时的初始配置文件。

在本实施例中，第一获取模块702可以获取配置文件针对的目标页面的页面数据。其中，配置文件针对的目标页面可以是一个页面，也可以是多个页面。可选的，配置文件中可以包括一个或多个页面的地址，这些地址分别对应的页面即目标页面。

可选的，第一获取模块702可以利用无头浏览器(例如puppeteer)，去模拟访问待生成骨架屏的目标页面，从而获取该目标页面包括的各种数据、DOM(文档对象模型，Document Object Model)节点信息，CSS信息等组成的页面数据。

在本实施例中，生成模块703可以基于更新后的配置文件和页面数据，生成目标页面的骨架屏文件。

具体地，生成模块703可以对目标页面的页面数据中的DOM节点做递归分析，分析每个节点的DOM类型，然后按照固定的类型去添加class(类)，根据不同的class，会生成不同的骨架屏样式，最终得到骨架屏代码。骨架屏代码通常保存在骨架屏文件中，骨架屏文件通常为网页文件，例如HTML(超文本标记语言，HyperText Mark-up Language)文件。

在本实施例中，发送模块704可以响应于接收到目标用户终端发送的页面更新请求，且确定目标用户终端符合页面更新条件，将骨架屏文件和目标页面的地址发送至目标用户终端。

其中，页面更新请求是目标用户终端上的目标应用程序进行页面更新操作时发送的请求。目标用户终端可以是如图1所示的终端设备101。目标用户终端上可以安装有目标应用程序，用户可以通过目标应用程序浏览目标页面。

可选的，在目标应用程序启动时，或用户手动进行页面更新操作(例如向下滑动、点击更新按钮等)时，可以向服务端发送页面更新请求，服务端在收到页面更新请求后，向目标用户终端发送上述生成的骨架屏文件和对应的目标页面的地址。

当目标用户终端符合页面更新条件时，表示使用目标用户终端的用户可能会浏览目标页面，需要将目标页面对应的骨架屏文件预先存储到目标用户终端。可选的，页面更新条件可以包括但不限于以下至少一项：未向目标用户终端发送过上述骨架屏文件；向目标用户终端发送上述骨架屏文件的时刻距当前时刻超过预设时长。

参照图8，图8是本公开另一示例性实施例提供的骨架屏文件生成装置的结构示意图。

在一些可选的实现方式中，第一获取模块702包括：登录单元7021，用于响应于确定配置文件包括模拟登陆数据，基于模拟登录数据，登录访问配置文件针对的处于登录态的目标页面；获取单元7022，用于获取目标页面的页面数据。

本公开上述实施例提供的骨架屏文件生成装置，通过在服务端预先设置初始配置文件，并基于输入的骨架屏配置信息，调整预设的初始配置文件，得到更新后的配置文件，基于更新后的配置文件和目标页面的页面数据，生成目标页面的骨架屏文件，最后响应于接收到目标用户终端发送的页面更新请求，将骨架屏文件和目标页面的地址发送至目标用户终端，实现了灵活地根据配置文件调整待生成的骨架屏的样式等特性，无需对用于生成骨架屏的程序进行修改，大大降低了生成骨架屏的操作难度，且可以在服务端自动、快速生成目标页面的骨架屏，用户端无需执行生成骨架屏的操作，从而有效降低了用户端显示骨架屏耗费的时间。

图9是本公开一示例性实施例提供的骨架屏显示装置的结构示意图。本实施例可应用在用户终端上，如图9所示，骨架屏显示装置包括：第二获取模块901，用于响应于目标应用程序执行页面更新操作，从服务端获取目标页面对应的骨架屏文件和目标页面的地址，其中，目标页面是待通过目标应用程序显示的页面；存储模块902，用于将骨架屏文件和目标页面的地址对应存储到目标存储区；第一显示模块903，用于响应于目标应用程序执行访问目标页面的操作，基于目标页面的地址，从目标存储区提取骨架屏文件，并利用骨架屏文件，显示目标页面的骨架屏；第二显示模块904，用于响应于从服务端加载目标页面的页面数据完毕，关闭骨架屏，并显示目标页面。

在本实施例中，第二获取模块901可以响应于目标应用程序执行页面更新操作，从服务端获取目标页面对应的骨架屏文件和目标页面的地址(例如URL地址)。

其中，目标页面是待通过目标应用程序显示的页面。目标应用程序可以是各种类型的应用程序，例如网页浏览器、购物应用等。页面更新操作可以是用于更新待显示的骨架屏的操作。通常，当执行页面更新操作时，可以向服务端(如图1所示的服务器103)发送页面更新请求，服务端接收到页面更新请求后，向用户终端发送已生成的上述骨架屏和目标页面的地址。

在本实施例中，存储模块902可以将骨架屏文件和目标页面的地址对应存储到目标存储区。

其中，目标存储区可以是上述用户终端本地的存储区。可选的，可以按照键值对的方式存储骨架屏文件和目标页面的地址。例如，将目标页面的URL地址作为键(key)，将骨架屏的HTML文件的标识作为值(value)，对应存储骨架屏文件和目标页面的地址。

在本实施例中，第一显示模块903可以响应于目标应用程序执行访问目标页面的操作，基于目标页面的地址，从目标存储区提取骨架屏文件，并利用骨架屏文件，显示目标页面的骨架屏。

作为示例，访问目标页面的操作可以包括但不限于：点击链接、滑动屏幕、输入语音等。

通常，当执行访问目标页面的操作时，可以获取到目标页面的地址，根据地址提取存储在本地的骨架屏文件，并渲染骨架屏文件，从而显示骨架屏。同时，还可以继续加载目标页面的页面数据，在加载页面数据期间，持续显示骨架屏。

在本实施例中，第二显示模块904可以响应于从服务端加载目标页面的页面数据完毕，关闭骨架屏，并显示目标页面。当加载页面数据完毕时，可以触发加载完毕事件，第二显示模块904对此事件做出响应，关闭骨架屏，显示目标页面，此时显示的目标页面是包含了完整数据的页面。

参照图10，图10是本公开另一示例性实施例提供的骨架屏显示装置的结构示意图。

在一些可选的实现方式中，页面更新操作的触发方式包括以下至少一项：在目标应用程序启动后自动触发执行页面更新操作；用户按照预设的操作方式手动触发页面更新操作。

在一些可选的实现方式中，第一显示模块903包括：生成单元9031，用于生成第一页面视图控件和第二页面视图控件；第一渲染单元9032，用于在第一页面视图控件中渲染骨架屏文件以显示目标页面的骨架屏；第二显示模块904包括：第二渲染单元9041，用于响应于从服务端加载目标页面的页面数据完毕，在第二页面视图控件中渲染加载页面数据完毕的目标页面，以显示目标页面；关闭单元9042，用于通过关闭第一页面视图控件关闭骨架屏。

本公开上述实施例提供的骨架屏文件生成装置，通过在用户端的目标应用程序执行页面更新操作时，从服务端获取目标页面对应的骨架屏文件和目标页面的地址，将骨架屏文件和目标页面的地址对应存储到目标存储区，在目标应用程序访问目标页面时，基于目标页面的地址，从目标存储区提取骨架屏文件，并显示目标页面的骨架屏，最后响应于加载目标页面的页面数据完毕，关闭骨架屏，并显示目标页面，从而实现了在访问目标页面时，直接提取存储的骨架屏文件并显示骨架屏，完全消除了等待资源下载时显示白屏的时间，便于用户对目标应用程序进行操作。

示例性电子设备

下面，参考图11来描述根据本公开实施例的电子设备。该电子设备可以是如图1所示的终端设备101和服务器103中的任一个或两者、或与它们独立的单机设备，该单机设备可以与终端设备101和服务器103进行通信，以从它们接收所采集到的输入信号。

图11图示了根据本公开实施例的电子设备的框图。

如图11所示，电子设备1100包括一个或多个处理器1101和存储器1102。

处理器1101可以是中央处理单元(CPU)或者具有数据处理能力和/或指令执行能力的其他形式的处理单元，并且可以控制电子设备1100中的其他组件以执行期望的功能。

存储器1102可以包括一个或多个计算机程序产品，计算机程序产品可以包括各种形式的计算机可读存储介质，例如易失性存储器和/或非易失性存储器。易失性存储器例如可以包括随机存取存储器(RAM)和/或高速缓冲存储器(cache)等。非易失性存储器例如可以包括只读存储器(ROM)、硬盘、闪存等。在计算机可读存储介质上可以存储一个或多个计算机程序指令，处理器1101可以运行程序指令，以实现上文的本公开的各个实施例的骨架屏文件生成方法或骨架屏显示方法以及/或者其他期望的功能。在计算机可读存储介质中还可以存储诸如骨架屏文件等各种内容。

在一个示例中，电子设备1100还可以包括：输入装置1103和输出装置1104，这些组件通过总线系统和/或其他形式的连接机构(未示出)互连。

例如，在该电子设备是终端设备101或服务器103时，该输入装置1103可以是鼠标、键盘等设备，用于输入配置信息或各种指令等。在该电子设备是单机设备时，该输入装置1103可以是通信网络连接器，用于从终端设备101和服务器103接收所输入的配置信息或各种指令。

该输出装置1104可以向外部输出各种信息，包括骨架屏、目标页面等。该输出装置1104可以包括例如显示器、扬声器、打印机、以及通信网络及其所连接的远程输出装置等等。

当然，为了简化，图11中仅示出了该电子设备1100中与本公开有关的组件中的一些，省略了诸如总线、输入/输出接口等等的组件。除此之外，根据具体应用情况，电子设备1100还可以包括任何其他适当的组件。

示例性计算机程序产品和计算机可读存储介质

除了上述方法和设备以外，本公开的实施例还可以是计算机程序产品，其包括计算机程序指令，所述计算机程序指令在被处理器运行时使得所述处理器执行本说明书上述部分中描述的根据本公开各种实施例的骨架屏文件生成方法或骨架屏显示方法中的步骤。

所述计算机程序产品可以以一种或多种程序设计语言的任意组合来编写用于执行本公开实施例操作的程序代码，所述程序设计语言包括面向对象的程序设计语言，诸如Java、C++等，还包括常规的过程式程序设计语言，诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户计算设备上部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。

此外，本公开的实施例还可以是计算机可读存储介质，其上存储有计算机程序指令，所述计算机程序指令在被处理器运行时使得所述处理器执行本说明书上述“示例性方法”部分中描述的根据本公开各种实施例的骨架屏文件生成方法或骨架屏显示方法中的步骤。

所述计算机可读存储介质可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以包括但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。

以上结合具体实施例描述了本公开的基本原理，但是，需要指出的是，在本公开中提及的优点、优势、效果等仅是示例而非限制，不能认为这些优点、优势、效果等是本公开的各个实施例必须具备的。另外，上述公开的具体细节仅是为了示例的作用和便于理解的作用，而非限制，上述细节并不限制本公开为必须采用上述具体的细节来实现。

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

本公开中涉及的器件、装置、设备、系统的方框图仅作为例示性的例子并且不意图要求或暗示必须按照方框图示出的方式进行连接、布置、配置。如本领域技术人员将认识到的，可以按任意方式连接、布置、配置这些器件、装置、设备、系统。诸如“包括”、“包含”、“具有”等等的词语是开放性词汇，指“包括但不限于”，且可与其互换使用。这里所使用的词汇“或”和“和”指词汇“和/或”，且可与其互换使用，除非上下文明确指示不是如此。这里所使用的词汇“诸如”指词组“诸如但不限于”，且可与其互换使用。

可能以许多方式来实现本公开的方法和装置。例如，可通过软件、硬件、固件或者软件、硬件、固件的任何组合来实现本公开的方法和装置。用于所述方法的步骤的上述顺序仅是为了进行说明，本公开的方法的步骤不限于以上具体描述的顺序，除非以其它方式特别说明。此外，在一些实施例中，还可将本公开实施为记录在记录介质中的程序，这些程序包括用于实现根据本公开的方法的机器可读指令。因而，本公开还覆盖存储用于执行根据本公开的方法的程序的记录介质。

还需要指出的是，在本公开的装置、设备和方法中，各部件或各步骤是可以分解和/或重新组合的。这些分解和/或重新组合应视为本公开的等效方案。

提供所公开的方面的以上描述以使本领域的任何技术人员能够做出或者使用本公开。对这些方面的各种修改对于本领域技术人员而言是非常显而易见的，并且在此定义的一般原理可以应用于其他方面而不脱离本公开的范围。因此，本公开不意图被限制到在此示出的方面，而是按照与在此公开的原理和新颖的特征一致的最宽范围。

为了例示和描述的目的已经给出了以上描述。此外，此描述不意图将本公开的实施例限制到在此公开的形式。尽管以上已经讨论了多个示例方面和实施例，但是本领域技术人员将认识到其某些变型、修改、改变、添加和子组合。

Claims (10)

1.一种骨架屏文件生成方法，包括：

基于输入的骨架屏配置信息，调整预设的初始配置文件，得到更新后的配置文件；

获取所述配置文件针对的目标页面的页面数据；

基于所述更新后的配置文件和所述页面数据，生成所述目标页面的骨架屏文件；

响应于接收到目标用户终端发送的页面更新请求，且确定所述目标用户终端符合页面更新条件，将所述骨架屏文件和所述目标页面的地址发送至所述目标用户终端，其中，所述页面更新请求是目标用户终端上的目标应用程序进行页面更新操作时发送的请求。

2.根据权利要求1所述的方法，其中，所述获取所述配置文件针对的目标页面的页面数据，包括：

响应于确定所述配置文件包括模拟登陆数据，基于所述模拟登录数据，登录访问所述配置文件针对的处于登录态的目标页面；

获取所述目标页面的页面数据。

3.一种骨架屏显示方法，包括：

响应于目标应用程序执行页面更新操作，从服务端获取目标页面对应的骨架屏文件和所述目标页面的地址，其中，所述目标页面是待通过所述目标应用程序显示的页面；

将所述骨架屏文件和所述目标页面的地址对应存储到目标存储区；

响应于所述目标应用程序执行访问所述目标页面的操作，基于所述目标页面的地址，从所述目标存储区提取所述骨架屏文件，并利用所述骨架屏文件，显示所述目标页面的骨架屏；

响应于从所述服务端加载所述目标页面的页面数据完毕，关闭所述骨架屏，并显示所述目标页面。

4.根据权利要求3所述的方法，其中，所述页面更新操作的触发方式包括以下至少一项：

在所述目标应用程序启动后自动触发执行所述页面更新操作；

用户按照预设的操作方式手动触发所述页面更新操作。

5.根据权利要求3所述的方法，其中，所述利用所述骨架屏文件，显示所述目标页面的骨架屏，包括：

生成第一页面视图控件和第二页面视图控件；

在所述第一页面视图控件中渲染所述骨架屏文件以显示所述目标页面的骨架屏；

所述响应于从所述服务端加载所述目标页面的页面数据完毕，关闭所述骨架屏，并显示所述目标页面，包括：

响应于从所述服务端加载所述目标页面的页面数据完毕，在所述第二页面视图控件中渲染加载所述页面数据完毕的所述目标页面，以显示所述目标页面；

通过关闭所述第一页面视图控件关闭所述骨架屏。

6.一种骨架屏文件生成装置，包括：

调整模块，用于基于输入的骨架屏配置信息，调整预设的初始配置文件，得到更新后的配置文件；

第一获取模块，用于获取所述配置文件针对的目标页面的页面数据；

生成模块，用于基于所述更新后的配置文件和所述页面数据，生成所述目标页面的骨架屏文件；

发送模块，用于响应于接收到目标用户终端发送的页面更新请求，且确定所述目标用户终端符合页面更新条件，将所述骨架屏文件和所述目标页面的地址发送至所述目标用户终端，其中，所述页面更新请求是目标用户终端上的目标应用程序进行页面更新操作时发送的请求。

7.一种骨架屏显示装置，包括：

第二获取模块，用于响应于目标应用程序执行页面更新操作，从服务端获取目标页面对应的骨架屏文件和所述目标页面的地址，其中，所述目标页面是待通过所述目标应用程序显示的页面；

存储模块，用于将所述骨架屏文件和所述目标页面的地址对应存储到目标存储区；

第一显示模块，用于响应于所述目标应用程序执行访问所述目标页面的操作，基于所述目标页面的地址，从所述目标存储区提取所述骨架屏文件，并利用所述骨架屏文件，显示所述目标页面的骨架屏；

第二显示模块，用于响应于从所述服务端加载所述目标页面的页面数据完毕，关闭所述骨架屏，并显示所述目标页面。

8.一种电子设备，其特征在于，包括：

存储器，用于存储计算机程序产品；

处理器，用于执行所述存储器中存储的计算机程序产品，且所述计算机程序产品被执行时，实现上述权利要求1-5任一所述的方法。

9.一种计算机可读存储介质，其上存储有计算机程序指令，其特征在于，该计算机程序指令被处理器执行时，实现上述权利要求1-5任一所述的方法。

10.一种计算机程序产品，包括计算机程序指令，其特征在于，该计算机程序指令被处理器执行时实现上述权利要求1-5任一所述的方法。

Images