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

Abstract

本公开提供了一种骨架屏生成方法、装置、电子设备及存储介质。该方法包括：与客户端建立网络套接字连接；从客户端接收骨架屏生成请求，骨架屏生成请求携带骨架屏的配置元素和目标网址；控制启动无头浏览器，并向无头浏览器发送所述目标网址，以使无头浏览器打开所述目标网址，渲染目标页面，获取目标页面的页面元素及其位置信息；根据骨架屏的配置元素向无头浏览器***生成骨架屏的脚本，以便控制无头浏览器根据目标页面的页面元素及其位置信息执行脚本，生成骨架屏和骨架屏的关联信息；接收骨架屏的关联信息；将骨架屏的关联信息返回至客户端。该方法可以快速、自动地生成骨架屏，提高了骨架屏的生成效率。

Description

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

技术领域

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

背景技术

在访问页面的过程中，由于页面数据加载需要一段时间，为了避免影响用户体验，通常会在页面数据加载时先给用户展示出显示页面的大致结构的骨架屏。

相关技术中，骨架屏可以由设计人员根据页面设计出来，这种方法复用性较差，当页面发生迭代时，需要设计人员重新设计，费事费力；骨架屏也可以由开发人员单独开发骨架屏页面，这种方法需要借助一些工具，需要耗费学习和调试的时间成本。

需要说明的是，在上述背景技术部分公开的信息仅用于加强对本公开的背景的理解，因此可以包括不构成对本领域普通技术人员已知的现有技术的信息。

发明内容

本公开的目的在于提供一种骨架屏生成方法、装置、电子设备及存储介质，该方法无需设计人员设计出骨架屏图片，也无需开发人员单独开发骨架屏页面，避免了大量的重复性工作，可以快速、自动地生成骨架屏，提高了骨架屏的生成效率。

本公开的其他特性和优点将通过下面的详细描述变得显然，或部分地通过本公开的实践而习得。

本公开实施例提供一种骨架屏生成方法，包括：与客户端建立网络套接字连接；从客户端接收骨架屏生成请求，骨架屏生成请求携带骨架屏的配置元素和目标网址；控制启动无头浏览器，并向无头浏览器发送目标网址，以使无头浏览器打开目标网址，渲染目标网址的目标页面，获取目标页面的页面元素及其位置信息；根据骨架屏的配置元素向无头浏览器***生成骨架屏的脚本，以便控制无头浏览器根据目标页面的页面元素及其位置信息执行脚本，生成骨架屏，并生成骨架屏的关联信息；接收无头浏览器返回的骨架屏的关联信息；将骨架屏的关联信息返回至客户端。

在本公开一些示例性实施例中，骨架屏的配置元素包括预设颜色和预设形状，其中，根据目标页面的页面元素及其位置信息执行脚本，包括：根据目标页面的页面元素的位置信息，使用预设颜色的预设形状的色块覆盖目标页面的页面元素。

在本公开一些示例性实施例中，骨架屏的关联信息包括骨架屏的页面截图、目标页面的骨架屏生成代码，其中骨架屏生成代码是无头浏览器根据骨架屏中预设颜色的预设形状及其所在的位置生成的。

在本公开一些示例性实施例中，页面元素包括文字元素、图片元素和按钮元素，骨架屏的配置元素包括预设文字颜色、预设文字形状、预设图片颜色、预设图片形状、预设按钮颜色、预设按钮形状和隐藏元素标识；其中，根据目标页面的页面元素及其位置信息执行脚本，生成骨架屏，包括：根据目标页面的文字元素的位置信息，使用预设文字颜色的预设文字形状的色块覆盖目标页面的文字元素；根据目标页面的图片元素的位置信息，使用预设图片颜色的预设图片形状的色块覆盖目标页面的图片元素；根据目标页面的按钮元素的位置信息，使用预设按钮颜色的预设按钮形状的色块覆盖目标页面的按钮元素；根据隐藏元素标识，隐藏目标页面中与隐藏元素标识对应的页面元素。

在本公开一些示例性实施例中，在与客户端建立网络套接字连接之前，方法还包括：与客户端建立网络传输协议连接；向客户端返回操作页面，以便在客户端展示操作页面，操作页面包括骨架屏的配置元素的输入框和目标网址的输入框，通过骨架屏的配置元素的输入框输入骨架屏的配置元素，并通过目标网址的输入框输入目标网址。

本公开实施例提供一种骨架屏生成方法，包括：与服务器建立网络套接字连接；获取骨架屏的配置元素和目标网址；根据骨架屏的配置元素和目标网址，生成骨架屏生成请求；将骨架屏生成请求发送至服务器，以根据骨架屏的配置元素和目标网址生成骨架屏，并生成骨架屏的关联信息；接收服务器返回的骨架屏的关联信息；显示骨架屏的关联信息。

在本公开一些示例性实施例中，接收服务器返回的骨架屏的关联信息，包括：通过预设邮箱接收服务器返回的骨架屏的关联信息。

在本公开一些示例性实施例中，上述方法还包括：接收拷贝骨架屏关联信息请求；根据所述拷贝骨架屏关联信息请求，对所述骨架屏的关联信息进行拷贝。

本公开实施例提供一种骨架屏生成装置，包括：第一连接建立模块，用于与客户端建立网络套接字连接；请求接收模块，用于从客户端接收骨架屏生成请求，骨架屏生成请求携带骨架屏的配置元素和目标网址；目标网址发送模块，用于控制启动无头浏览器，并向无头浏览器发送目标网址，以使无头浏览器打开目标网址，渲染目标网址的目标页面，获取目标页面的页面元素及其位置信息；脚本***模块，用于根据骨架屏的配置元素向无头浏览器***生成骨架屏的脚本，以便控制无头浏览器根据目标页面的页面元素及其位置信息执行脚本，生成骨架屏，并生成骨架屏的关联信息；关联信息接收模块，用于接收无头浏览器返回的骨架屏的关联信息；关联信息返回模块，用于将骨架屏的关联信息返回至客户端。

本公开实施例提供一种骨架屏生成装置，其特征在于，包括：第二连接建立模块，用于与服务器建立网络套接字连接；配置元素获取模块，用于获取骨架屏的配置元素和目标网址；请求生成模块，用于根据所述骨架屏的配置元素和目标网址，生成骨架屏生成请求；请求发送模块，用于将所述骨架屏生成请求发送至所述服务器，以根据所述骨架屏的配置元素和所述目标网址生成所述骨架屏，并生成所述骨架屏的关联信息；关联信息接收模块，用于接收所述服务器返回的所述骨架屏的关联信息；关联信息展示模块，用于显示所述骨架屏的关联信息。

本公开实施例提供一种电子设备，包括：至少一个处理器；存储装置，用于存储至少一个程序，当所述至少一个程序被所述至少一个处理器执行时，使得所述至少一个处理器实现如上述任一种骨架屏生成方法。

本公开实施例提供一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现如上述任一种骨架屏生成方法。

本公开一些实施例提供的骨架屏生成方法，通过与客户端建立网络套接字连接，可以主动向客户端返回骨架屏的关联信息；根据骨架屏的配置元素和目标网址，可以控制无头浏览器自动打开目标网址，渲染目标页面，并获取目标页面的页面元素及其位置信息，可以控制无头浏览器根据目标页面的页面元素及其位置信息执行脚本，自动生成骨架屏和骨架屏的关联信息；该方法无需设计人员设计出骨架屏图片，也无需开发人员单独开发骨架屏页面，避免了大量的重复性工作，可以快速、自动地生成骨架屏，提高了骨架屏的生成效率。此外，该方法的使用门槛较低，对技术人员的要求较低。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理。显而易见地，下面描述中的附图仅仅是本公开的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1示出了可以应用本公开实施例的骨架屏生成方法的示例性***架构的示意图。

图2是根据一示例性实施方式示出的一种骨架屏生成方法的流程图。

图3是根据一示例性实施方式示出的另一种骨架屏生成方法的流程图。

图4是根据一示例性实施方式示出的另一种骨架屏生成方法的流程图。

图5是根据一示例性实施方式示出的一种操作页面的示意图。

图6是根据一示例性实施方式示出的另一种骨架屏生成方法的流程图。

图7是根据一示例性实施方式示出的一种骨架屏生成页面的示意图。

图8是根据一示例性实施方式示出的一种骨架屏生成装置的框图。

图9是根据一示例性实施方式示出的另一种骨架屏生成装置的框图。

图10是根据一示例性实施方式示出的一种电子设备的结构示意图。

具体实施方式

现在将参考附图更全面地描述示例实施方式。然而，示例实施方式能够以多种形式实施，且不应被理解为限于在此阐述的范例；相反，提供这些实施方式使得本公开将更加全面和完整，并将示例实施方式的构思全面地传达给本领域的技术人员。所描述的特征、结构或特性可以以任何合适的方式结合在一个或更多实施方式中。

此外，附图仅为本公开的示意性图解，并非一定是按比例绘制。图中相同的附图标记表示相同或类似的部分，因而将省略对它们的重复描述。附图中所示的一些方框图是功能实体，不一定必须与物理或逻辑上独立的实体相对应。可以采用软件形式来实现这些功能实体，或在一个或多个硬件模块或集成电路中实现这些功能实体，或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。

图1示出了可以应用本公开实施例的骨架屏生成方法的示例性***架构的示意图。

如图1所示，该***架构可以包括客户端110、服务器120和无头浏览器130。

客户端110可以是智能手机、平板电脑、便携式计算机、台式计算机、智能音箱、可穿戴智能设备、虚拟现实设备、增强现实设备等，但并不局限于此。

服务器120可以是独立的服务器，也可以是多个服务器构成的服务器集群或者分布式***，还可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、CDN(Content Delivery Network，内容分发网络)、以及大数据和人工智能平台等基础云计算服务的云服务器。

无头浏览器130可以是一种没有操作界面的浏览器，开发者可以通过编程来控制无头浏览器自动执行各种任务，例如执行JS(JavaScript，一种属于网络的高级脚本语言)脚本、截屏等。

本公开实施例中，客户端110可以与服务器120建立网络传输协议连接，服务器120可以向客户端110返回操作页面，客户端110可以展示该操作页面，该操作页面可以包括骨架屏的配置元素的输入框和目标网址的输入框，用户可以通过客户端110的操作页面的骨架屏的配置元素的输入框输入骨架屏的配置元素，并可以通过目标网址的输入框输入目标网址。

本公开实施例中，如图1所示，客户端110可以与服务器120建立网络套接字连接，客户端110可以获取骨架屏生成请求，该骨架屏生成请求中可以包括骨架屏的配置元素和目标网址，客户端110可以将该骨架屏生成请求发送给服务器120；服务器120可以接收该骨架屏生成请求，服务器120可以控制启动无头浏览器130，并向无头浏览器130发送目标网址，无头浏览器130可以打开目标网址，渲染目标网址的目标页面，无头浏览器130可以获取目标页面的页面元素及其位置信息；浏览器120可以根据骨架屏的配置元素向无头浏览器130***生成骨架屏的脚本，无头浏览器130可以根据目标页面的页面元素及其位置信息执行脚本，生成骨架屏，并生成骨架屏的关联信息；无头浏览器130可以向浏览器120返回骨架屏的关联信息；浏览器120可以接收无头浏览器130返回的骨架屏的关联信息，并可以将骨架屏的关联信息返回至客户端110；客户端110可以接收骨架屏的关联信息并可以显示骨架屏的关联信息。

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

需要注意的是，上述应用场景仅是为了便于理解本公开的精神和原理而示出，本公开的实施方式在此方面不受任何限制。相反，本公开的实施方式可以应用于适用的任何场景。

下面，将结合附图及实施例对本公开示例实施例中的骨架屏生成方法的各个步骤进行更详细的说明。

图2是根据一示例性实施方式示出的一种骨架屏生成方法的流程图。本公开实施例提供的方法可以由如图1所示的服务器中执行，但本公开并不限定于此。

如图2所示，本公开实施例提供的骨架屏生成方法可以包括以下步骤。

在步骤S202中，与客户端建立网络套接字连接。

本公开实施例中，服务器可以与客户端建立网络套接字(WebSocket)连接，以使得服务器可以主送向客户端推送数据。

其中，WebSocket是一种基于TCP(Transmission Control Protocol，传输控制协议)的全双工通信协议连接。

网络套接字连接可以使客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

本公开实施例中，骨架屏的生成需要一段时间，服务器与客户端建立网络套接字连接后，服务器可以在骨架屏生成完毕后主动向客户端发送骨架屏的关联信息。

在步骤S204中，从客户端接收骨架屏生成请求，骨架屏生成请求携带骨架屏的配置元素和目标网址。

其中，骨架屏(Skeleton Screen)可以指在页面数据加载完成前，先给用户展示出页面的大致结构的占位图。

在示例性实施例中，骨架屏的配置元素包括预设颜色和预设形状。

其中，预设颜色例如可以为灰色，预设形状例如可以为圆形、矩形、圆角矩形等等，本公开对此不做限制。

本公开实施例中，骨架屏的配置元素和目标网址可以由用户通过客户端输入。其中，打开目标网址可以获得目标页面，目标页面可以为用户设计好的页面。

本公开实施例中，客户端可以根据输入的骨架屏的配置元素和目标网址生成骨架屏生成请求，服务器可以从客户端接收骨架屏生成请求。

在步骤S206中，控制启动无头浏览器，并向无头浏览器发送目标网址，以使无头浏览器打开目标网址，渲染目标网址的目标页面，获取目标页面的页面元素及其位置信息。

本公开实施例中，无头浏览器可以为Puppeteer，其中，Puppeteer是一个Node.js(运行在服务端的JavaScript)包，可以用来模拟浏览器的运行。服务器可以通过Puppeteer提供的接口启动、渲染页面，***自定义脚本、对页面截图等。

本公开实施例中，服务器可以控制启动无头浏览器，并向无头浏览器发送目标网址，无头浏览器接收到目标网址后，可以打开目标网址，渲染目标网址的目标页面。

本公开实施例中，无头浏览器可以获取目标页面的页面元素及其位置信息。

其中，页面元素可以包括文字元素、图片元素和按钮元素，页面元素的位置信息可以包括页面元素的横纵坐标，例如，文字元素的横纵坐标、图片元素的轮廓的横纵坐标，按钮元素的轮廓的横纵坐标。

在步骤S208中，根据骨架屏的配置元素向无头浏览器***生成骨架屏的脚本，以便控制无头浏览器根据目标页面的页面元素及其位置信息执行脚本，生成骨架屏，并生成骨架屏的关联信息。

本公开实施例中，服务器可以根据无头浏览器提供的接口***自定义脚本。其中，自定义脚本可以为生成骨架屏的脚本，无头浏览器可以执行该生成骨架屏的脚本，根据目标页面的页面元素及其位置信息生成骨架屏，并生成骨架屏的关联信息。

在示例性实施例中，根据目标页面的页面元素及其位置信息执行脚本，可以包括：根据目标页面的页面元素的位置信息，使用预设颜色的预设形状的色块覆盖目标页面的页面元素。

例如，可以根据文字元素、图片元素和按钮元素的横纵坐标，使用灰色的圆角矩形的色块覆盖文字元素、图片元素和按钮元素。

在示例性实施例中，骨架屏的关联信息包括骨架屏的页面截图、目标页面的骨架屏生成代码，其中骨架屏生成代码是无头浏览器根据骨架屏中预设颜色的预设形状及其所在的位置生成的。

本公开实施例中，无头浏览器可以对骨架屏的页面进行截图，获得骨架屏的页面截图，并将骨架屏的页面截图返回至服务器。无头浏览器可以根据骨架屏中预设颜色的预设形状及其所在的位置生成骨架屏生成代码，并将骨架屏生成代码返回至服务器，后续服务器可以执行骨架屏生成代码，即可生成骨架屏。

在步骤S210中，接收无头浏览器返回的骨架屏的关联信息。

本公开实施例中，服务器可以接收无头浏览器返回的骨架屏的关联信息，服务器在接收到无头浏览器返回的骨架屏的关联信息后，可以关闭无头浏览器。

在步骤S212中，将骨架屏的关联信息返回至客户端。

本公开实施例中，服务器可以将骨架屏的关联信息返回至客户端，客户端在接收到服务器返回的骨架屏的关联信息后，可以显示骨架屏的关联信息中的骨架屏的页面截图和骨架屏生成代码，用户可以通过客户端拷贝该骨架屏的页面截图和骨架屏生成代码。

本公开实施例提供的骨架屏生成方法，通过与客户端建立网络套接字连接，可以主动向客户端返回骨架屏的关联信息；根据骨架屏的配置元素和目标网址，可以控制无头浏览器自动打开目标网址，渲染目标页面，并获取目标页面的页面元素及其位置信息，可以控制无头浏览器根据目标页面的页面元素及其位置信息执行脚本，自动生成骨架屏和骨架屏的关联信息；该方法无需设计人员设计出骨架屏图片，也无需开发人员单独开发骨架屏页面，避免了大量的重复性工作，可以快速、自动地生成骨架屏，提高了骨架屏的生成效率。此外，该方法的使用门槛较低，对技术人员的要求较低。

图3是根据一示例性实施方式示出的另一种骨架屏生成方法的流程图。

本公开实施例中，与图2所示的骨架屏生成方法不同的是，图3所示的骨架屏生成方法进一步提供了如何根据目标页面的页面元素及其位置信息执行脚本，生成骨架屏，也即提供了上述步骤S208的一种实施例。

在示例性实施例中，页面元素包括文字元素、图片元素和按钮元素，骨架屏的配置元素包括预设文字颜色、预设文字形状、预设图片颜色、预设图片形状、预设按钮颜色、预设按钮形状和隐藏元素标识。

本公开实施例中，页面元素包括但不限于文字元素、图片元素、按钮元素、控件元素和浮窗元素。骨架屏的配置元素可以针对不同页面元素设置不同颜色和形状，例如，可以设置文字元素的颜色为灰色、文字元素的形状为矩形；可以设置图片元素的颜色为浅灰色、图片元素的形状为圆角矩形；可以设置按钮元素的颜色为红色、按钮元素的形状为圆形，还可以设置控件元素和浮窗元素的颜色和形状，本公开对此不做限制。

本公开实施例中，骨架屏的配置元素还可以包括隐藏元素标识，隐藏元素标识可以用于表示需要被隐藏的元素，例如，隐藏元素标识为按钮元素，则在生成骨架屏的时候，可以将目标页面中的按钮元素隐藏。

如图3所示，步骤S208可以包括以下步骤。

在步骤S302中，根据目标页面的文字元素的位置信息，使用预设文字颜色的预设文字形状的色块覆盖目标页面的文字元素。

例如，可以将灰色的矩形的色块放置在目标页面的文字元素的位置，覆盖目标页面的文字元素。

在步骤S304中，根据目标页面的图片元素的位置信息，使用预设图片颜色的预设图片形状的色块覆盖目标页面的图片元素。

例如，可以将浅灰色的圆角矩形的色块放置在目标页面的图片元素的位置，覆盖目标页面的图片元素。

在步骤S306中，根据目标页面的按钮元素的位置信息，使用预设按钮颜色的预设按钮形状的色块覆盖目标页面的按钮元素。

例如，可以将红色的圆形的色块放置在目标页面的按钮元素的位置，覆盖目标页面的按钮元素。

在步骤S308中，根据隐藏元素标识，隐藏目标页面中与隐藏元素标识对应的页面元素。

例如，隐藏元素标识可以为按钮元素，可以隐藏页面元素中的按钮元素。

本公开实施例中，可以根据页面元素及其位置信息和骨架屏的配置元素，使用预设颜色的预设形状覆盖对应的页面元素，自动地生成与页面元素对应的骨架屏，无需用户针对每个目标页面手动设计骨架屏。

图4是根据一示例性实施方式示出的另一种骨架屏生成方法的流程图。

本公开实施例中，在图2所示的骨架屏生成方法中，在与客户端建立网络套接字连接之前，图4所示的骨架屏生成方法还可以包括以下步骤。

在步骤S402中，与客户端建立网络传输协议连接。

本公开实施例中，服务器可以与客户端建立网络传输协议连接。

例如，服务器可以与客户端建立HTTP(Hypertext Transfer Protocol，超文本传输协议)连接。其中，HTTP是一个基于TCP/IP(Transmission Control Protocol/InternetProtocol，传输控制协议/网际协议)通信协议来传递数据(HTML(HyperText MarkupLanguage，超文本标记语言)文件、图片文件、查询结果等)的一种网络传输协议。

在步骤S404中，向客户端返回操作页面，以便在客户端展示操作页面，操作页面包括骨架屏的配置元素的输入框和目标网址的输入框，通过骨架屏的配置元素的输入框输入骨架屏的配置元素，并通过目标网址的输入框输入目标网址。

本公开实施例中，服务器可以向客户端返回操作页面，客户端可以展示该操作页面。

图5是根据一示例性实施方式示出的一种操作页面的示意图。

如图5所示，操作页面可以包括骨架屏的配置元素的输入框和目标网址的输入框，例如，骨架屏的配置元素的输入框可以包括但不限于图片占位色值、文字占位色值、隐藏元素id(Identity，标识)，按钮占位色值、css(Cascading Style Sheets，层叠样式表)单位和图片占位形状等。用户可以通过骨架屏的配置元素输入框输入骨架屏的配置元素，可以通过目标网址的输入框输入目标网址。其中，图片占位色值、文字占位色值和按钮占位色值可以设置为#EFEFEF(极亮度的灰色阴影)，隐藏元素id可以设置为#banner(横幅)，图片占位形状可以设置为圆形，css单位可以设置为rem(font size of the root element，相对于根元素的字体大小的单位)；目标网址可以为http://XXX.com/。

如图5所示，操作页面还可以包括“生成页面骨架屏图片”按钮，用户可在输入骨架屏的配置元素和目标网址后，点击“生成页面骨架屏图片”按钮，客户端可以生成骨架屏生成请求，并将该骨架屏生成请求发送至服务器，服务器可以根据骨架屏生成请求操作无头浏览器生成骨架屏和骨架屏的关联信息，并将骨架屏的关联信息返回至客户端。

本公开实施例中，用户通过操作页面输入骨架屏的配置元素和目标网址，即可随时随地的获得骨架屏的页面截图和骨架屏的生成代码。

图6是根据一示例性实施方式示出的一种骨架屏生成方法的流程图。本公开实施例提供的方法可以由如图1所示的客户端中执行，但本公开并不限定于此。

如图6所示，本公开实施例提供的骨架屏生成方法可以包括以下步骤。

在步骤S602中，与服务器建立网络套接字连接。

本公开实施例中，客户端可以和服务器建立网络套接字连接。

在步骤S604中，获取骨架屏的配置元素和目标网址。

本公开实施例中，用户可以通过客户端的操作页面输入骨架屏的配置元素和目标网址，客户端的操作页面可以如图5所示。客户端可以通过操作页面获取骨架屏的配置元素和目标网址。

在步骤S606中，根据骨架屏的配置元素和目标网址，生成骨架屏生成请求。

本公开实施例中，用户可以点击操作页面的“生成页面骨架屏图片”按钮，客户端可以响应于用户点击按钮的行为，根据骨架屏的配置元素和目标网址，生成骨架屏生成请求。

在步骤S608中，将骨架屏生成请求发送至服务器，以根据骨架屏的配置元素和目标网址生成骨架屏，并生成骨架屏的关联信息。

本公开实施例中，客户端可以将骨架屏生成请求发送至服务器，骨架屏生成请求中可以携带骨架屏的配置元素和目标网址，服务器可以根据骨架屏的配置元素和目标网址操作无头浏览器生成骨架屏，并可以生成骨架屏的关联信息。

其中，骨架屏的关联信息可以包括骨架屏的页面截图、目标页面的骨架屏生成代码。

在步骤S610中，接收服务器返回的骨架屏的关联信息。

本公开实施例中，客户端可以接收服务器返回的骨架屏的关联信息。

在示例性实施例中，可以通过预设邮箱接收服务器返回的骨架屏的关联信息。

其中，预设邮箱可以是用户在客户端的操作页面输入的邮箱。

在步骤S612中，显示骨架屏的关联信息。

本公开实施例中，客户端可以显示骨架屏的关联信息。

图7是根据一示例性实施方式示出的一种骨架屏生成页面的示意图。

用户在图5所示的操作页面输入骨架屏的配置元素和目标网址，点击“生成页面骨架屏图片”按钮后，可以进入如图7所示的骨架屏生成页面。如图7所示，左侧可以显示骨架屏的页面截图，右侧可以显示目标页面的骨架屏生成代码。

在示例性实施例中，图6所示的骨架屏生成方法还可以包括：接收拷贝骨架屏关联信息请求。

其中，拷贝骨架屏关联信息请求可以包括拷贝骨架屏页面截图请求、拷贝骨架屏生成代码请求或者同时拷贝骨架屏页面截图和骨架屏生成代码请求。

在示例性实施例中，图6所示的骨架屏生成方法还可以包括：根据拷贝骨架屏关联信息请求，对骨架屏的关联信息进行拷贝。

例如，客户端可以根据拷贝骨架屏页面截图请求对骨架屏的页面截图进行拷贝，或者，客户端可以根据拷贝骨架屏生成代码请求对骨架屏生成代码进行拷贝，或者，客户端可以根据拷贝骨架屏页面截图和骨架屏生成代码请求，同时拷贝骨架屏的页面截图和骨架屏生成代码。

本公开实施例中，用户可以点击图7中的“拷贝图片代码”按钮，客户端可以对骨架屏的页面截图和骨架屏生成代码进行拷贝，用户可以将骨架屏的页面截图和骨架屏生成代码拷贝到需要的地方，例如可以将骨架屏生成代码拷贝到项目代码中，后续通过运行项目代码中的骨架屏生成代码，可以自动生成骨架屏。

需要注意的是，上述附图仅是根据本公开示例性实施例的方法所包括的处理的示意性说明，而不是限制目的。易于理解，上述附图所示的处理并不表明或限制这些处理的时间顺序。另外，也易于理解，这些处理可以是例如在多个模块中同步或异步执行的。

下述为本公开装置实施例，可以用于执行本公开方法实施例。对于本公开装置实施例中未披露的细节，请参照本公开方法实施例。

图8是根据一示例性实施方式示出的另一种骨架屏生成装置的框图。

如图8所示，骨架屏生成装置800可以包括：第一连接建立模块802、请求接收模块804、目标网址发送模块806、脚本***模块808和关联信息接收模块810。

其中，第一连接建立模块802可以用于与客户端建立网络套接字连接；请求接收模块804可以用于从客户端接收骨架屏生成请求，骨架屏生成请求携带骨架屏的配置元素和目标网址；目标网址发送模块806可以用于控制启动无头浏览器，并向无头浏览器发送目标网址，以使无头浏览器打开目标网址，渲染目标网址的目标页面，获取目标页面的页面元素及其位置信息；脚本***模块808可以用于根据骨架屏的配置元素向无头浏览器***生成骨架屏的脚本，以便控制无头浏览器根据目标页面的页面元素及其位置信息执行脚本，生成骨架屏，并生成骨架屏的关联信息；关联信息接收模块810可以用于接收无头浏览器返回的骨架屏的关联信息；关联信息返回模块812可以用于将骨架屏的关联信息返回至客户端。

在示例性实施例中，骨架屏的配置元素包括预设颜色和预设形状，其中，脚本***模块808可以包括：元素覆盖单元，可以用于根据目标页面的页面元素的位置信息，使用预设颜色的预设形状的色块覆盖目标页面的页面元素。

在示例性实施例中，骨架屏的关联信息包括骨架屏的页面截图、目标页面的骨架屏生成代码，其中骨架屏生成代码是无头浏览器根据骨架屏中预设颜色的预设形状及其所在的位置生成的。

在示例性实施例中，页面元素包括文字元素、图片元素和按钮元素，骨架屏的配置元素包括预设文字颜色、预设文字形状、预设图片颜色、预设图片形状、预设按钮颜色、预设按钮形状和隐藏元素标识；其中，脚本***模块808可以包括：第一覆盖单元，可以用于根据目标页面的文字元素的位置信息，使用预设文字颜色的预设文字形状的色块覆盖目标页面的文字元素；第二覆盖单元，可以用于根据目标页面的图片元素的位置信息，使用预设图片颜色的预设图片形状的色块覆盖目标页面的图片元素；第三覆盖单元，可以用于根据目标页面的按钮元素的位置信息，使用预设按钮颜色的预设按钮形状的色块覆盖目标页面的按钮元素；元素隐藏单元，可以用于根据隐藏元素标识，隐藏目标页面中与隐藏元素标识对应的页面元素。

在示例性实施例中，装置800还可以包括：第三连接建立模块，可以用于与客户端建立网络传输协议连接；操作页面返回模块，可以用于向客户端返回操作页面，以便在客户端展示操作页面，操作页面包括骨架屏的配置元素的输入框和目标网址的输入框，通过骨架屏的配置元素的输入框输入骨架屏的配置元素，并通过目标网址的输入框输入目标网址。

图9是根据一示例性实施方式示出的另一种骨架屏生成装置的框图。

如图9所示，骨架屏生成装置900可以包括：第二连接建立模块902、元素获取模块904、请求生成模块906、请求发送模块908、关联信息接收模块910和关联信息展示模块912。

其中，第二连接建立模块902可以用于与服务器建立网络套接字连接；元素获取模块904可以用于获取骨架屏的配置元素和目标网址；请求生成模块906可以用于根据骨架屏的配置元素和目标网址，生成骨架屏生成请求；请求发送模块908可以用于将骨架屏生成请求发送至服务器，以根据骨架屏的配置元素和目标网址生成骨架屏，并生成骨架屏的关联信息；关联信息接收模块910可以用于接收服务器返回的骨架屏的关联信息；关联信息展示模块912可以用于显示骨架屏的关联信息。

在示例性实施例中，关联信息接收模块910可以包括：关联信息接收单元，可以用于通过预设邮箱接收服务器返回的骨架屏的关联信息。

在示例性实施例中，装置900还可以包括：拷贝请求接收模块，可以用于接收拷贝骨架屏关联信息请求；信息拷贝模块，可以用于根据所述拷贝骨架屏关联信息请求，对所述骨架屏的关联信息进行拷贝。

需要注意的是，上述附图中所示的框图是功能实体，不一定必须与物理或逻辑上独立的实体相对应。可以采用软件形式来实现这些功能实体，或在一个或多个硬件模块或集成电路中实现这些功能实体，或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。

图10是根据一示例性实施方式示出的一种电子设备的结构示意图。需要说明的是，图10示出的电子设备仅仅是一个示例，不应对本发明实施例的功能和使用范围带来任何限制。

如图10所示，电子设备1000包括中央处理单元(CPU)1001，其可以根据存储在只读存储器(ROM)1002中的程序或者从存储部分1008加载到随机访问存储器(RAM)1003中的程序而执行各种适当的动作和处理。在RAM 1003中，还存储有***1000操作所需的各种程序和数据。CPU 1001、ROM 1002以及RAM 1003通过总线1004彼此相连。输入/输出(I/O)接口1005也连接至总线1004。

以下部件连接至I/O接口1005：包括键盘、鼠标等的输入部分1006；包括诸如阴极射线管(CRT)、液晶显示器(LCD)等以及扬声器等的输出部分1007；包括硬盘等的存储部分1008；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分1009。通信部分1009经由诸如因特网的网络执行通信处理。驱动器1010也根据需要连接至I/O接口1005。可拆卸介质1010，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器1010上，以便于从其上读出的计算机程序根据需要被安装入存储部分1008。

特别地，根据本发明的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本发明的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分1009从网络上被下载和安装，和/或从可拆卸介质1011被安装。在该计算机程序被中央处理单元(CPU)1001执行时，执行本发明的***中限定的上述功能。

需要说明的是，本发明所示的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的***、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本发明中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行***、装置或者器件使用或者与其结合使用。而在本发明中，计算机可读的信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读的信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读介质可以发送、传播或者传输用于由指令执行***、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：无线、电线、光缆、RF等等，或者上述的任意合适的组合。

附图中的流程图和框图，图示了按照本发明各种实施例的***、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的***来实现，或者可以用专用硬件与计算机指令的组合来实现。

描述于本发明实施例中所涉及到的单元可以通过软件的方式实现，也可以通过硬件的方式来实现。所描述的单元也可以设置在处理器中，例如，可以描述为：一种处理器包括发送单元、获取单元、确定单元和第一处理单元。其中，这些单元的名称在某种情况下并不构成对该单元本身的限定，例如，发送单元还可以被描述为“向所连接的服务端发送图片获取请求的单元”。

作为另一方面，本发明还提供了一种计算机可读介质，该计算机可读介质可以是上述实施例中描述的设备中所包含的；也可以是单独存在，而未装配入该设备中。上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被一个该设备执行时，使得该设备包括：与客户端建立网络套接字连接；从客户端接收骨架屏生成请求，骨架屏生成请求携带骨架屏的配置元素和目标网址；控制启动无头浏览器，并向无头浏览器发送目标网址，以使无头浏览器打开目标网址，渲染目标网址的目标页面，获取目标页面的页面元素及其位置信息；根据骨架屏的配置元素向无头浏览器***生成骨架屏的脚本，以便控制无头浏览器根据目标页面的页面元素及其位置信息执行脚本，生成骨架屏，并生成骨架屏的关联信息；接收无头浏览器返回的骨架屏的关联信息；将骨架屏的关联信息返回至客户端。

以上具体地示出和描述了本发明的示例性实施方式。应可理解的是，本发明不限于这里描述的详细结构、设置方式或实现方法；相反，本发明意图涵盖包含在所附权利要求的精神和范围内的各种修改和等效设置。

Claims (12)

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

与客户端建立网络套接字连接；

从所述客户端接收骨架屏生成请求，所述骨架屏生成请求携带所述骨架屏的配置元素和目标网址；

控制启动无头浏览器，并向所述无头浏览器发送所述目标网址，以使所述无头浏览器打开所述目标网址，渲染所述目标网址的目标页面，获取所述目标页面的页面元素及其位置信息；

根据所述骨架屏的配置元素向所述无头浏览器***生成所述骨架屏的脚本，以便控制所述无头浏览器根据所述目标页面的页面元素及其位置信息执行所述脚本，生成所述骨架屏，并生成所述骨架屏的关联信息；

接收所述无头浏览器返回的所述骨架屏的关联信息；

将所述骨架屏的关联信息返回至所述客户端。

2.根据权利要求1所述的方法，其特征在于，所述骨架屏的配置元素包括预设颜色和预设形状，其中，根据所述目标页面的页面元素及其位置信息执行所述脚本，包括：

根据所述目标页面的页面元素的位置信息，使用所述预设颜色的所述预设形状的色块覆盖所述目标页面的页面元素。

3.根据权利要求2所述的方法，其特征在于，所述骨架屏的关联信息包括所述骨架屏的页面截图、所述目标页面的骨架屏生成代码，其中所述骨架屏生成代码是所述无头浏览器根据所述骨架屏中所述预设颜色的所述预设形状及其所在的位置生成的。

4.根据权利要求1所述的方法，其特征在于，所述页面元素包括文字元素、图片元素和按钮元素，所述骨架屏的配置元素包括预设文字颜色、预设文字形状、预设图片颜色、预设图片形状、预设按钮颜色、预设按钮形状和隐藏元素标识；其中，根据所述目标页面的页面元素及其位置信息执行所述脚本，生成所述骨架屏，包括：

根据所述目标页面的文字元素的位置信息，使用所述预设文字颜色的所述预设文字形状的色块覆盖所述目标页面的文字元素；

根据所述目标页面的图片元素的位置信息，使用所述预设图片颜色的所述预设图片形状的色块覆盖所述目标页面的图片元素；

根据所述目标页面的按钮元素的位置信息，使用所述预设按钮颜色的所述预设按钮形状的色块覆盖所述目标页面的按钮元素；

根据所述隐藏元素标识，隐藏所述目标页面中与所述隐藏元素标识对应的页面元素。

5.根据权利要求1所述的方法，其特征在于，在与客户端建立网络套接字连接之前，所述方法还包括：

与所述客户端建立网络传输协议连接；

向所述客户端返回操作页面，以便在所述客户端展示所述操作页面，所述操作页面包括所述骨架屏的配置元素的输入框和所述目标网址的输入框，通过所述骨架屏的配置元素的输入框输入所述骨架屏的配置元素，并通过所述目标网址的输入框输入所述目标网址。

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

与服务器建立网络套接字连接；

获取骨架屏的配置元素和目标网址；

根据所述骨架屏的配置元素和目标网址，生成骨架屏生成请求；

将所述骨架屏生成请求发送至所述服务器，以根据所述骨架屏的配置元素和所述目标网址生成所述骨架屏，并生成所述骨架屏的关联信息；

接收所述服务器返回的所述骨架屏的关联信息；

显示所述骨架屏的关联信息。

7.根据权利要求6所述的方法，其特征在于，接收所述服务器返回的所述骨架屏的关联信息，包括：

通过预设邮箱接收所述服务器返回的所述骨架屏的关联信息。

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

接收拷贝骨架屏关联信息请求；

根据所述拷贝骨架屏关联信息请求，对所述骨架屏的关联信息进行拷贝。

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

第一连接建立模块，用于与客户端建立网络套接字连接；

请求接收模块，用于从所述客户端接收骨架屏生成请求，所述骨架屏生成请求携带所述骨架屏的配置元素和目标网址；

目标网址发送模块，用于控制启动无头浏览器，并向所述无头浏览器发送所述目标网址，以使所述无头浏览器打开所述目标网址，渲染所述目标网址的目标页面，获取所述目标页面的页面元素及其位置信息；

脚本***模块，用于根据所述骨架屏的配置元素向所述无头浏览器***生成所述骨架屏的脚本，以便控制所述无头浏览器根据所述目标页面的页面元素及其位置信息执行所述脚本，生成所述骨架屏，并生成所述骨架屏的关联信息；

关联信息接收模块，用于接收所述无头浏览器返回的所述骨架屏的关联信息；

关联信息返回模块，用于将所述骨架屏的关联信息返回至所述客户端。

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

第二连接建立模块，用于与服务器建立网络套接字连接；

配置元素获取模块，用于获取骨架屏的配置元素和目标网址；

请求生成模块，用于根据所述骨架屏的配置元素和目标网址，生成骨架屏生成请求；

请求发送模块，用于将所述骨架屏生成请求发送至所述服务器，以根据所述骨架屏的配置元素和所述目标网址生成所述骨架屏，并生成所述骨架屏的关联信息；

关联信息接收模块，用于接收所述服务器返回的所述骨架屏的关联信息；

关联信息展示模块，用于显示所述骨架屏的关联信息。

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

至少一个处理器；

存储装置，用于存储至少一个程序，当所述至少一个程序被所述至少一个处理器执行时，使得所述至少一个处理器实现如权利要求1至5中任一项所述的骨架屏生成方法或如权利要求6至8中任一项所述骨架屏生成方法。

12.一种计算机可读存储介质，其上存储有计算机可执行指令，其特征在于，所述可执行指令被处理器执行时实现如权利要求1至5中任一项所述的骨架屏生成方法或如权利要求6至8中任一项所述骨架屏生成方法。

Images