CN118092916A - 骨架屏页面生成方法、计算机设备及存储介质 - Google Patents

Abstract

本发明涉及前端开发技术领域，公开了一种骨架屏页面生成方法、计算机设备及存储介质。其方法通过基于Weex框架生成包括组件选择区域、组件编辑区域和属性配置区域的编辑界面；获取通过属性配置区域录入的目标页面信息，根据目标页面信息获取目标页面图像，并将目标页面图像展示在组件编辑区域；在接收将目标组件拖拽到组件编辑区域的拖拽指令时，将目标组件添加到组件编辑区域，在目标页面图像中形成对应于目标组件的组件投影区域，并基于组件投影区域对目标组件进行编辑处理；目标组件包括至少一个待选取组件；根据编辑处理之后的目标组件生成与目标页面图像对应的骨架屏页面。本发明实现了骨架屏对页面样式的高度还原，提高了开发效率。

Description

骨架屏页面生成方法、计算机设备及存储介质

技术领域

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

背景技术

在互联网的发展中，随着用户对网页加载速度和响应性能的要求日益提高，页面开发也越来越重视用户体验。移动端应用程序在加载页面时，为了优化用户的等待体验，会提前展示和页面对应的骨架屏内容。骨架屏是当用户需要打开一个页面时，在页面解析和数据加载之前用于展示给用户页面样式轮廓(通常为灰色占位图)的过渡页面。

在前端开发骨架屏的传统方式，是由开发人员照着页面设计稿或已有页面编写CSS和HTML代码，通过CSS和TML代码的共同作用让骨架屏实现页面需要的布局样式。由于CSS和HTML代码的编写需要大量的人力投入，费时费力，因此出现了一些开发骨架屏的辅助工具，例如chrome插件和puppeteer。但是，这些辅助工具的底层原理都是通过先爬取页面DOM结构，再生成CSS和HTML代码来得到骨架屏，由于爬取的数据与真实页面存在偏差，导致骨架屏的样式还原度不高，无法直接应用，还需要开发人员进行样式调优，降低了开发效率。此外，基于CSS和HTML代码得到的骨架屏仅支持通用的H5框架，不可用于Weex框架，应用范围有限。

发明内容

基于此，有必要针对上述技术问题，提供一种骨架屏页面生成方法、计算机设备及存储介质，以解决当前开发骨架屏时还原度不高、开发效率低和应用范围有限的问题。

一种骨架屏页面生成方法，包括：

在接收骨架屏生成请求时，生成基于Weex框架的编辑界面，所述编辑界面包括组件选择区域、组件编辑区域和属性配置区域，所述组件选择区域包括多个预先封装好的待选取组件；

获取通过所述属性配置区域录入的目标页面信息，根据所述目标页面信息获取目标页面图像，并将所述目标页面图像展示在所述组件编辑区域；

在接收将目标组件拖拽到组件编辑区域的拖拽指令时，将所述目标组件添加到所述组件编辑区域，在所述目标页面图像中形成对应于所述目标组件的组件投影区域，并基于所述组件投影区域对所述目标组件进行编辑处理；所述目标组件包括至少一个所述待选取组件；

根据编辑处理之后的目标组件生成与所述目标页面图像对应的骨架屏页面。

一种计算机设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机可读指令，所述处理器执行所述计算机可读指令时实现上述骨架屏页面生成方法。

一种计算机可读存储介质，所述计算机可读存储介质存储有计算机可读指令，所述计算机可读指令被一个或多个处理器执行时，使得所述一个或多个处理器执行如上述骨架屏页面生成方法。

上述骨架屏页面生成方法、计算机设备及存储介质，该骨架屏页面生成方法基于Weex框架搭建用于生成骨架屏的编辑界面，使得最终得到的骨架屏页面可以适配于Weex框架。同时，为了解决骨架屏页面的样式还原度不足的问题，本发明通过将目标页面图像展示在组件编辑区域作为参考背景，然后采用可视化的自定义配置方式添加组件，并对添加的组件进行编辑处理，达到组件投影区域和目标页面图像的样式布局一致的效果，实现了对页面样式的高度还原，使得开发人员具有良好的配置体验，提高了开发效率。

附图说明

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

图1是本发明一实施例中骨架屏页面生成方法的一流程示意图；

图2是本发明一实施例中骨架屏页面生成方法的步骤S30的一流程示意图；

图3是本发明一实施例中骨架屏页面生成方法的步骤S30的又一流程示意图；

图4是本发明一实施例中骨架屏页面生成方法的步骤S30的另一流程示意图；

图5是本发明一实施例中骨架屏页面生成方法的步骤S40的一流程示意图；

图6是本发明一实施例中骨架屏页面生成方法的步骤S401的一流程示意图；

图7是本发明一实施例中骨架屏页面生成方法的步骤S401的另一流程示意图；

图8是本发明一实施例中骨架屏页面生成方法的步骤S20的一流程示意图；

图9是本发明一实施例中骨架屏页面生成装置的一结构示意图；

图10是本发明一实施例中计算机设备的一示意图。

具体实施方式

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

在一实施例中，如图1所示，提供一种骨架屏页面生成方法，包括如下步骤S10-S40：

S10、在接收骨架屏生成请求时，生成基于Weex框架的编辑界面，所述编辑界面包括组件选择区域、组件编辑区域和属性配置区域，所述组件选择区域包括多个预先封装好的待选取组件。

可理解地，开发人员通过配置端(如计算机设备)与服务端之间的数据交互实现网页前端的开发工作。骨架屏数据处理请求是指配置端向服务端发送的用于请求生成与现有网页图像或网页设计稿图像的样式布局对应的骨架屏的信息。Weex是一个构建移动端跨平台用户界面框架，Weex框架使得开发人员能够使用类似Web的语法通过单一代码库构建iOS、Android和Web应用。编辑界面是用于使开发人员根据需要选择添加组件并自定义配置组件样式而生成骨架屏页面的可视化界面。编辑界面包括组件选择区域、组件编辑区域和属性配置区域，例如，在配置端的可视化界面中从左到右依次展示组件选择区域、组件编辑区域和属性配置区域共三部分区域。组件选择区域是用于展示待选取组件以供开发人员进行选择和拖拽操作的区域。待选取组件是指预先对HTML元素、元素布局和样式进行封装得到的用于被选取并组合成骨架屏页面的模板组件，如矩形的色块组件。待选取组件可以单独使用，也可以组合使用。在基于Weex框架的编辑界面中，待选取组件的文件格式为.we格式。组件编辑区域是用于展示被开发人员选取的组件，并接收开发人员对展示的组件进行调整操作(如改变位置、删除组件等)的预览页面区域。组件编辑区域中组件的状态分为展示状态和编辑状态，在将被选取的组件添加到组件编辑区域时，组件默认处于展示状态，当处于展示状态的组件被选中时，组件由展示状态转变为编辑状态。属性配置区域用于展示组件编辑区域中当前处于编辑状态的组件的组件属性(如尺寸、位置和颜色等)类型和属性参数，并接收开发人员对属性参数的参数配置操作。

S20、获取通过所述属性配置区域录入的目标页面信息，根据所述目标页面信息获取目标页面图像，并将所述目标页面图像展示在所述组件编辑区域。

可理解地，在生成编辑界面时，组件选择区域默认展示有多个预先封装好的待选取组件，组件编辑区域默认为空白区域(待选取组件还没有被添加到组件编辑区域)。此时，由于组件编辑区域中并不存在处于编辑状态的组件，因此属性配置区域不需要展示包括组件属性类型和属性参数的组件属性配置信息，默认展示目标页面配置界面。目标页面是指需要通过骨架屏来展示样式布局的网页页面，目标页面图像是目标页面的静态图像，目标页面信息是用于指定将目标页面图像展示在组件编辑区域的配置信息。目标页面配置界面是用于采集目标页面的目标页面信息(如目标页面图像的地址)的界面。当组件编辑区域中存在处于编辑状态的组件时，则属性配置区域不再展示目标页面信息，转而展示包括组件属性类型和属性参数的组件属性配置信息。

在本实施例中，在配置端中编辑界面的属性配置区域展示目标页面配置界面，开发人员通过配置端在目标页面配置界面输入目标页面信息，配置端将目标页面信息发送到服务端。服务端获取录入的目标页面信息，根据目标页面信息中目标页面图像的地址获取目标页面图像，并通过iframe内嵌技术(iframe可以在一个页面中显示来自其他页面的内容)将目标页面图像展示在组件编辑区域。

S30、在接收将目标组件拖拽到组件编辑区域的拖拽指令时，将所述目标组件添加到所述组件编辑区域，在所述目标页面图像中形成对应于所述目标组件的组件投影区域，并基于所述组件投影区域对所述目标组件进行编辑处理；所述目标组件包括至少一个所述待选取组件。

可理解地，骨架屏页面是由多个组件组成的，将目标页面图像展示在组件编辑区域，作为添加和编辑组件的背景模板，可以保证骨架屏页面对目标页面图像的样式还原度。目标组件是所有待选取组件中被选取的组件，开发人员可以根据需要从待选取组件中选取一个或多个目标组件。组件投影区域是指目标组件的投影在目标页面图像中所占用的显示区域。在形成组件投影区域时，可以通过对目标组件进行边缘检测处理识别出形状、尺寸和位置，并利用图像处理技术在目标页面图像中生成对应于目标组件的组件投影区域，还可以将组件投影区域填充特定的颜色(如灰色)。编辑处理是指对处于编辑状态的组件的尺寸和位置进行调整的过程。

在本实施例中，当开发人员通过配置端的可视化操作界面(如触控屏幕界面)将组件选择区域的目标组件拖拽到组件编辑区域时，服务端会接收到拖拽指令，将目标组件添加到组件编辑区域。此时，目标组件显示在组件编辑区域的目标页面图像中，并形成一个对应的组件投影区域。进一步地，当组件编辑区域中被添加了多个目标组件，且需要对目标组件的尺寸和位置进行调整时，基于组件投影区域对各个目标组件进行编辑处理，得到编辑处理之后的目标组件，即与各个目标组件对应的已编辑组件。

S40、根据编辑处理之后的目标组件生成与所述目标页面图像对应的骨架屏页面。

可理解地，将组件编辑区域中编辑处理之后的所有目标组件进行组合，得到一个与目标页面图像对应的组件集合，这个组件集合即为与目标页面图像对应的骨架屏页面。

本实施例基于Weex框架搭建用于生成骨架屏的编辑界面，使得最终得到的骨架屏页面可以适配于Weex框架。同时，为了解决骨架屏页面的样式还原度不足的问题，本实施例通过将目标页面图像展示在组件编辑区域作为参考背景，然后采用可视化的自定义配置方式添加组件，并对添加的组件进行编辑处理，达到组件投影区域和目标页面图像的样式布局一致的效果，实现了对页面样式的高度还原，使得开发人员具有良好的配置体验，提高了开发效率。

在一实施例中，如图2所示，步骤S30中，即所述基于所述组件投影区域对所述目标组件进行编辑处理，包括：

S301、接收与所述目标组件对应的组件编辑信息；

S302、获取所述组件编辑信息中的属性编辑信息，根据所述属性编辑信息对所述目标组件进行调整；所述属性编辑信息包括所述目标组件的尺寸属性参数和位置属性参数；所述组件编辑信息在所述组件编辑区域中的所述目标组件被拖拽之后生成，或；所述组件编辑信息在通过所述属性配置区域录入与所述目标组件对应的尺寸属性编辑参数和位置属性编辑参数之后生成；

可理解地，基于组件投影区域对目标组件进行编辑处理的过程中，组件编辑信息反映了对组件进行编辑的需求。组件编辑信息是用于对组件的属性进行调整的信息，如调整组件的尺寸属性和位置属性。属性编辑信息是用于描述组件特性的信息，包括尺寸属性参数和位置属性参数。具体地，当组件为带圆角的矩形时，尺寸属性参数包括组件的宽属性、高属性和圆角半径属性，位置属性参数包括组件的左边距属性(组件投影区域的左侧边缘到目标页面图像的左侧边缘的距离)和上边距属性(组件投影区域的上侧边缘到目标页面图像的上侧边缘的距离)。当组件编辑区域中存在处于编辑状态的组件时，则属性配置区域不再展示目标页面信息，转而展示组件属性类型(尺寸和位置)和对应的属性参数输入框。

在本实施例中，当开发人员对组件编辑区域中的一个或多个目标组件进行调整时，可以在配置端的可视化操作界面对需要调整的目标组件进行点击选取，被选取的目标组件进入编辑状态。一方面，开发人员可以直接对编辑状态的目标组件的边缘进行拉伸操作来调整目标组件的尺寸，以及对编辑状态的目标组件整体进行拖拽操作来调整目标组件的位置，配置端检测到组件编辑区域中的拉伸操作或拖拽操作，会生成与拉伸操作或拖拽操作对应的组件编辑信息并发送到服务端。另一方面，开发人员也可以在属性配置区域展示的与尺寸属性和位置属性对应的属性参数输入框中输入需要调整的参数，配置端检测到属性配置区域中的输入操作，会生成与输入操作对应的组件编辑信息并发送到服务端。

此外，为了使编辑的组件适用于所有骨架屏页面生成场景，除了尺寸属性和位置属性，还可以根据需要编辑组件的填充颜色和是否需要动画渲染等。例如，色块组件的填充颜色默认为灰色，容器组件的填充颜色默认为白色，开发人员可以根据需要调整为其他颜色；所有组件默认不需要动画渲染，开发人员可以根据需要调整为需要动态呼吸效果的动画渲染，以提醒客户端用户正在加载页面。

本实施例通过获取组件编辑信息中的属性编辑信息，根据属性编辑信息对目标组件进行对应调整，可以实现对目标组件的自定义配置，增加了骨架屏页面配置的灵活性。

S303、在调整至所述目标组件的组件投影区域与所述目标页面图像中的样式元素区域之间达到预设重合条件时，若确定存在已编辑组件，则在所述目标组件和所述已编辑组件之间显示对齐辅助线之后，确认完成所述目标组件的编辑处理。

可理解地，目标页面图像包括多个样式元素，样式元素是与目标页面图像的内容对应的布局对象，如文本元素、图片元素和表格元素。样式元素区域是样式元素在页面图像中占用的显示区域。当组件编辑区域中被添加了多个目标组件时，可能同时存在有当前处于编辑状态的目标组件和已完成编辑处理的目标组件，即已编辑组件。

在接收将目标组件拖拽到组件编辑区域的拖拽指令时，拖拽指令的拖拽停止位置对应目标页面图像中所有样式元素区域中的一个样式元素区域，目标组件在目标页面图像中形成的组件投影区域与对应的样式元素区域之间存在重合部分。在目标页面图像确定之后，服务端通过对目标页面图像进行图像识别处理确定了所有样式元素的样式元素区域，在根据组件编辑信息对目标组件进行调整时，随着目标组件的尺寸和位置变化，目标组件的组件投影区域与对应的样式元素区域之间的重合部分会增大或减小。预设重合条件是预先设定的用于判断处于编辑状态的目标组件的组件投影区域与目标页面图像中的样式元素区域之间的重合部分是否满足临界值要求的条件。具体地，预先设置重合占比阈值(如90％)，服务端通过对组件投影区域和样式元素区域进行边缘检测处理，并计算组件投影区域的面积、样式元素区域的面积和重合部分的面积，当样式元素区域的面积和重合部分的面积相等且重合部分的面积对组件投影区域的面积占比大于重合占比阈值时，则确定处于编辑状态的目标组件的组件投影区域与目标页面图像中的样式元素区域之间达到预设重合条件。若重合占比阈值为90％，则组件投影区域将样式元素区域完全包围，且组件投影区域中还存在10％的多余部分区域；若重合占比阈值为100％，则组件投影区域和样式元素区域刚好完全重合，不存在多余部分区域。

此外，当目标页面图像中不同样式元素区域之间还存在相对位置的对齐关系时，还需要基于组件投影区域进行辅助对齐处理，使得各个目标组件之间排列整齐。辅助对齐处理是指根据相对位置将处于编辑状态的组件与至少一个已编辑组件进行对齐的辅助排列处理方式，辅助对齐处理的方式可以采用边缘对齐或中心对齐。例如，如果服务端根据相对位置判断处于编辑状态的组件的组件投影区域所对应的左边距和另一个已编辑组件的组件投影区域所对应的左边距相同，则表示该处于编辑状态的组件和该已编辑组件的左侧边缘已对齐，并在组件编辑区域显示辅助线，使得辅助线贯穿于该处于编辑状态的组件的左侧边缘。

对齐辅助线是用于指示组件投影区域之间对齐时在对齐侧边缘显示的辅助线，对齐辅助线可以采用高亮辅助线。组件投影区域和样式元素区域均为矩形区域，每个矩形区域包含左侧边缘、右侧边缘、上侧边缘和下侧边缘。例如，目标页面图像中包括三个样式元素的样式元素区域A、B和C，且样式元素区域A与样式元素区域B之间存在左侧对齐关系，样式元素区域A与样式元素区域C之间存在上侧对齐关系。组件编辑区域添加有三个目标组件，分别在目标页面图像中形成三个组件投影区域a、b和c，且组件投影区域a与样式元素区域A对应，组件投影区域b与样式元素区域B对应，组件投影区域c与样式元素区域C对应。其中，在对目标组件进行编辑的过程中，服务端对每一个组件投影区域进行边缘检测处理，并计算每一个组件投影区域所对应的左边距(组件投影区域的左侧边缘到目标页面图像的左侧边缘的距离)和上边距(组件投影区域的上侧边缘到目标页面图像的上侧边缘的距离)。当组件投影区域a的左边距和组件投影区域b的左边距相同时，则表示组件投影区域a所对应的目标组件和组件投影区域b所对应的目标组件之间存在左侧对齐关系，并在组件编辑区域显示垂直方向的对齐辅助线，使得贯穿于组件投影区域a、b的左侧边缘的虚线作为对齐辅助线。当组件投影区域a的左边距和组件投影区域c的上边距相同时，则表示组件投影区域a所对应的目标组件和组件投影区域c所对应的目标组件之间存在上侧对齐关系，并在组件编辑区域显示水平方向的对齐辅助线，使得贯穿于组件投影区域a、c的上侧边缘的虚线作为对齐辅助线。

在本实施例中，开发人员可以根据需要在配置端的可视化操作界面对目标组件进行编辑操作，并基于编辑操作向服务端发送与目标组件对应的组件编辑信息。服务端接收与目标组件对应的组件编辑信息，根据组件编辑信息对目标组件进行调整，在调整至目标组件的组件投影区域与目标页面图像中的样式元素区域之间达到预设重合条件，并在目标组件的组件投影区域显示对齐辅助线之后，确认完成目标组件的编辑处理。最终，目标页面图像中的每一个样式元素都对应一个目标组件，且编辑处理后每一个目标组件的组件投影区域与对应的样式元素的样式元素区域重合，且编辑处理后的所有目标组件之间排列整齐，使得由目标组件形成的骨架屏页面可以准确还原目标页面图像的样式。

在本实施例中，根据组件编辑信息对目标组件进行调整，通过判断调整后的目标组件的组件投影区域与目标页面图像中的样式元素区域之间是否达到预设重合条件，同时还判断在目标组件的组件投影区域是否显示对齐辅助线，有助于精确地添加和调整目标组件，提高了对目标页面图像的样式还原度，保证了目标组件之间在视觉对齐上的排列分布。

在一实施例中，所述待选取组件包括色块组件，所述组件投影区域包括色块投影区域；如图3所示，步骤S30中，即所述在接收将目标组件拖拽到组件编辑区域的拖拽指令时，将所述目标组件添加到所述组件编辑区域，在所述目标页面图像中形成对应于所述目标组件的组件投影区域，包括：

S304、在选取所述色块组件为目标组件之后，若接收到将作为目标组件的所述色块组件拖拽到组件编辑区域的拖拽指令，则将所述色块组件添加到所述目标页面图像的图像有效区域中，并在所述图像有效区域中形成与所述色块组件对应的色块投影区域。

在一实施例中，所述待选取组件包括容器组件和容器色块组件，所述组件投影区域包括容器有效投影区域和容器色块投影区域；如图4所示，步骤S30中，即所述在接收将目标组件拖拽到组件编辑区域的拖拽指令时，将所述目标组件添加到所述组件编辑区域，在所述目标页面图像中形成对应于所述目标组件的组件投影区域，包括：

S305、在选取所述容器组件为目标组件之后，若接收到将作为目标组件的所述容器组件拖拽到组件编辑区域的拖拽指令，则将该容器组件添加到所述组件编辑区域中，并在所述目标页面图像中形成与所述容器组件对应的容器有效投影区域；

S306、在选取所述容器色块组件为目标组件之后，若接收到将作为目标组件的所述容器色块组件拖拽到组件编辑区域的拖拽指令，则将所述容器色块组件添加到所述容器有效投影区域中，并在所述容器有效投影区域中形成与所述容器色块组件对应的容器色块投影区域。

可理解地，在网页开发中，组件是一种可复用的代码单元，用于实现特定的功能或界面元素。在生成骨架屏页面时，组件分为容器组件和色块组件。容器组件是骨架屏页面的主体部分，用于承载和容纳色块组件。同时，容器组件具有一定的宽度和高度，以确保色块组件能够在容器组件的有效区域(容器有效投影区域)内显示出来。容器有效投影区域是由容器组件的边缘所确定的在组件编辑区域中占用的显示区域。色块组件是骨架屏页面中的基本元素，色块组件采用纯色填充(如灰色)，具有一定的宽度和高度，用于区分和指示不同内容对应的区域。色块组件分为容器色块组件和标准色块组件，容器色块组件只允许被添加在与容器组件对应的有效区域(容器有效投影区域)中的任何位置，标准色块组件允许被添加在组件编辑区域内的任何位置。容器组件和色块组件可以采用不同颜色的矩形展示，用于区分不同类型组件在组件编辑区域中的尺寸和位置，例如容器组件采用白色矩形展示，色块组件采用灰色矩形展示。

在一实施例中，开发人员在配置端的可视化操作界面，可以根据需要只选取标准色块组件作为目标组件拖拽到组件编辑区域中目标页面图像的图像有效区域，此时在组件编辑区域中只添加有标准色块组件，形成的骨架屏页面包含所有的标准色块组件，不包含容器组件。其中，图像有效区域是由目标页面图像的边缘所确定的在组件编辑区域中映射的显示区域。

在另一实施例中，开发人员在配置端的可视化操作界面，也可以根据需要先选取容器组件作为目标组件拖拽到组件编辑区域并形成容器有效投影区域，再选取容器色块组件作为目标组件拖拽到容器有效投影区域，此时在组件编辑区域中同时添加有容器组件和容器色块组件，形成的骨架屏页面包含一个或多个容器组件以及容器组件中包含所有的容器色块组件。

在又一实施例中，开发人员在配置端的可视化操作界面，还可以根据需要先选取容器组件作为目标组件拖拽到组件编辑区域并形成容器有效投影区域，再选取容器色块组件作为目标组件拖拽到容器有效投影区域，以及选取标准色块组件作为目标组件拖拽到组件编辑区域中除容器有效投影区域之外的区域，此时在组件编辑区域中同时添加有容器组件、容器色块组件和标准色块组件，形成的骨架屏页面包含一个或多个容器组件、容器组件中包含所有的容器色块组件以及容器组件外包含所有的标准色块组件。

本实施例基于可视化操作界面可以根据需要只添加色块组件作为目标组件，也可以根据需要先将容器组件作为目标组件拖拽添加到组件编辑区域并形成容器有效投影区域，再将容器色块组件作为目标组件拖拽添加到容器有效投影区域，从而实现快速添加组件。同时，通过合理地使用容器组件和容器色块组件进行组合，有助于分批配置组件，提高骨架屏配置的准确性和效率，避免出现遗漏，改善开发人员的使用体验。

在一实施例中，如图5所示，步骤S40中，即所述根据编辑处理之后的目标组件确定与所述目标页面图像对应的骨架屏页面之后，还包括：

S401、获取编辑处理之后的目标组件的组件参数信息，并将与所述目标组件的组件参数信息对应的JSON数据存储为与所述骨架屏页面对应的骨架屏页面数据；

S402、在接收到客户端发送的目标页面加载请求之后，向所述客户端发送所述骨架屏页面数据，以令所述客户端根据所述骨架屏页面数据确定与每一待渲染的目标组件的组件参数信息，基于所述组件参数信息在所述客户端对各个目标组件进行渲染，完成对与所述目标页面图像对应的骨架屏页面的展示。

可理解地，组件参数信息是指用于描述组件特征的信息，包括组件类型信息、尺寸属性参数和位置属性参数。服务端获取编辑处理之后的所有目标组件的组件参数信息，通过预设JSON数据结构工具(如JSON Schema)对组件参数信息进行数据转换，得到与组件参数信息对应的JSON数据，并将得到的JSON数据存储为与骨架屏页面对应的骨架屏页面数据。在存储骨架屏页面数据时，为了便于区分、查找和调用，需要为骨架屏页面数据添加唯一的数据标识。一个目标页面的目标页面图像对应一个骨架屏页面，一个骨架屏页面对应一份骨架屏页面数据，一份骨架屏页面数据对应一个数据标识。

在一实施例中，用户通过客户端(如智能手机、平板电脑等移动设备)与服务端之间的数据交互实现网页的加载。目标页面加载请求是指将已经生成骨架屏页面的网页页面展示在客户端的请求。服务端在接收到客户端发送的目标页面加载请求之后，根据目标页面加载请求确定目标页面图像，在数据库中查找到与目标页面图像已生成的骨架屏页面对应的骨架屏页面数据并发送到客户端。客户端接收被存储为骨架屏页面数据的JSON数据并进行解析，确定与每一待渲染的目标组件的组件参数信息，基于组件参数信息中的组件类型信息、尺寸属性参数和位置属性参数在客户端对各个目标组件进行渲染，完成对骨架屏页面的展示。

在另一实施例中，研发人员预先将骨架屏渲染组件添加至客户端，并设置加载目标页面与渲染骨架屏页面的时机，服务端通过骨架屏渲染组件来完成骨架屏页面的渲染。骨架屏渲染组件通过props接收被存储为骨架屏页面数据的JSON数据，遍历JSON数据中每一个目标组件的数据进行解析，通过style属性动态接收每个目标组件对应的尺寸属性参数和位置属性参数，通过HTML中的div标签渲染目标组件。此外，当目标组件需要进行动画渲染时，通过Weex框架内部的animation模块为目标组件加上过渡动画，实现骨架屏页面的动态呼吸效果。

本实施例在组件编辑区域生成骨架屏页面之后，将骨架屏页面抽象为JSON数据表达并存储在服务端，有利于服务端对骨架屏页面的维护和迭代，而且方便了客户端对JSON数据的调用，可以在客户端快速展示骨架屏页面。

在一实施例中，如图6所示，步骤S401中，即所述将与所述目标组件的组件参数信息对应的JSON数据存储为与所述骨架屏页面对应的骨架屏页面数据，包括：

S4011、确定与所述组件参数信息中的尺寸属性参数对应的尺寸二倍值，以及与所述组件参数信息中的位置属性参数对应的位置二倍值；

S4012、对所述尺寸二倍值和位置二倍值进行数据转换，得到与所述目标组件的组件参数信息对应的JSON数据，并将所有所述JSON数据存储为所述骨架屏页面数据。

可理解地，在Weex框架中，打包Loader(Loader是对应用程序中资源文件进行转换的函数)做了像素值×2的转换，例如，标准H5页面设计稿的宽度值是375px，而Weex页面的宽度值为750px。因此，为了使得到的JSON数据适配Weex框架，在导出JSON数据时首先对与目标组件对应的尺寸属性参数(如宽、高、圆角半径)和位置属性参数(如左边距、上边距)的样式值都进行了×2运算处理，得到对应的尺寸二倍值和位置二倍值。然后对尺寸二倍值和位置二倍值进行数据转换，得到与目标组件对应的JSON数据，并将所有JSON数据存储为骨架屏页面数据。

本实施例通过先对目标组件的组件参数信息进行运算处理，再转换为JSON数据，保证存储的骨架屏页面数据能够适用于Weex框架，有助于骨架屏页面数据顺利在客户端生成骨架屏页面。

在一实施例中，如图7所示，步骤S401中，即所述将与所述目标组件的组件参数信息对应的JSON数据存储为与所述目标页面图像对应的骨架屏页面数据之后，还包括：

S4013、接收通过所述编辑界面录入的包含数据标识的骨架屏更新请求，每一个数据标识均对应关联一组所述骨架屏页面数据；

S4014、根据所述数据标识调取已存储的所述骨架屏页面数据；

S4015、对调取的所述骨架屏页面数据进行解析，得到所述骨架屏页面数据中包含的组件参数信息，根据所述组件参数信息在所述组件编辑区域中生成并展示待更新组件；

S4016、在接收到与所述待更新组件对应的组件更新信息时，根据所述组件更新信息对所述待更新组件进行更新处理，根据更新处理之后的所述待更新组件生成新的骨架屏页面，并将与所述组件更新信息对应的JSON数据存储为新的骨架屏页面数据。

可理解地，骨架屏更新请求是配置端向服务端发送的用于对已生成的骨架屏页面进行修改更新操作的请求信息。待更新组件是需要更新的骨架屏页面中所包含的组件，组件更新信息是用于对待更新组件的组件参数进行更新的信息，包括尺寸更新信息(如宽、高、圆角半径的更新值)和位置更新信息(如左边距、上边距的更新值)。组件更新信息在组件编辑区域中的待更新组件被拖拽之后生成，或；组件更新信息在通过属性配置区域录入与待更新组件对应的尺寸属性更新参数和位置属性更新参数之后生成。

在一实施例中，对于已经生成的骨架屏页面，开发人员可以根据需要通过修改已经存储为JSON数据的骨架屏页面数据实现对骨架屏页面的更新操作。开发人员在配置端的编辑界面输入需要更新的骨架屏页面数据的数据标识，配置端生成包含数据标识的骨架屏更新请求并发送到服务端。服务端接收骨架屏更新请求，根据数据标识调取已存储的骨架屏页面数据。由于在导出JSON数据时对与目标组件对应的尺寸属性参数和位置属性参数的样式值都进行了×2运算处理，因此在对导入的JSON数据(调取的骨架屏页面数据)进行解析时需要进行÷2运算处理，得到与目标组件对应的尺寸属性参数和位置属性参数的样式值，才可以在组件编辑区域中正常生成并展示待更新组件。在接收到与待更新组件对应的组件更新信息时，根据组件更新信息对待更新组件进行更新处理，根据更新处理之后的待更新组件生成新的骨架屏页面(更新后的骨架屏页面)，并将与组件更新信息对应的JSON数据存储为新的骨架屏页面数据(更新后的骨架屏页面数据)。

本实施例通过将被存储为骨架屏页面数据的JSON数据导入到编辑界面，基于编辑界面的组件编辑区域，实现了对已生成的骨架屏页面的快速更新，提高了维护和迭代的便利性。

在一实施例中，所述目标页面信息包括目标页面地址信息和目标页面显示信息；如图8所示，步骤S20中，即所述根据所述目标页面信息获取目标页面图像，并将所述目标页面图像展示在所述组件编辑区域，包括：

S201、根据所述目标页面地址信息从页面图像数据库查询并获取目标页面图像；

S202、根据所述目标页面显示信息确定所述目标页面图像的透明度信息，并将所述目标页面图像调整为与所述透明度信息对应的透明度之后，将所述目标页面图像展示在所述组件编辑区域。

可理解地，目标页面信息包括目标页面地址信息和目标页面显示信息。目标页面地址信息是用于指示目标页面图像存储地址的信息，如与网络图像资源对应的统一资源定位符(URL地址)或与页面设计稿对应的本地文件地址。页面图像数据库是指与目标页面地址信息对应的用于存储页面图像的数据库。目标页面显示信息是用于描述页面图像的显示效果和特征的信息。由于本发明是将目标页面图像展示在组件编辑区域，以目标页面图像作为组件编辑区域背景的前提下添加组件来生成骨架屏页面，组件和目标页面图像存在重叠，因此目标页面显示信息包括透明度信息时，可以避免目标页面图像对组件的添加和编辑造成影响。图像的透明度信息是用来描述图像中像素的透明程度的信息，透明度信息允许图像重叠时，达到一张图像能够透过另一张图像显示出来的效果。

本实施例在组件编辑区域展示目标页面图像时，先通过目标页面地址信息获取目标页面图像，再通过目标页面显示信息调整目标页面图像的透明度，便于后续以目标页面图像为背景来添加和编辑组件，有助于提高骨架屏页面对页面样式的还原程度，提高骨架屏开发效率。

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

在一实施例中，提供一种骨架屏页面生成装置，该骨架屏页面生成装置与上述实施例中骨架屏页面生成方法一一对应。如图9所示，该骨架屏页面生成装置包括编辑界面生成模块10、页面图像展示模块20、组件编辑模块30和骨架屏生成模块40。各功能模块详细说明如下：

编辑界面生成模块10，用于在接收骨架屏生成请求时，生成基于Weex框架的编辑界面，所述编辑界面包括组件选择区域、组件编辑区域和属性配置区域，所述组件选择区域包括多个预先封装好的待选取组件；

页面图像展示模块20，用于获取通过所述属性配置区域录入的目标页面信息，根据所述目标页面信息获取目标页面图像，并将所述目标页面图像展示在所述组件编辑区域；

组件编辑模块30，用于在接收将目标组件拖拽到组件编辑区域的拖拽指令时，将所述目标组件添加到所述组件编辑区域，在所述目标页面图像中形成对应于所述目标组件的组件投影区域，并基于所述组件投影区域对所述目标组件进行编辑处理；所述目标组件包括至少一个所述待选取组件；

骨架屏生成模块40，用于根据编辑处理之后的目标组件生成与所述目标页面图像对应的骨架屏页面。

在一实施例中，组件编辑模块30包括：

组件编辑信息接收单元，用于接收与所述目标组件对应的组件编辑信息；

编辑处理单元，用于获取所述组件编辑信息中的属性编辑信息，根据所述属性编辑信息对所述目标组件进行调整；所述属性编辑信息包括所述目标组件的尺寸属性参数和位置属性参数；所述组件编辑信息在所述组件编辑区域中的所述目标组件被拖拽之后生成，或；所述组件编辑信息在通过所述属性配置区域录入与所述目标组件对应的尺寸属性编辑参数和位置属性编辑参数之后生成；

辅助对齐处理单元，用于在调整至所述目标组件的组件投影区域与所述目标页面图像中的样式元素区域之间达到预设重合条件时，若确定存在已编辑组件，则在所述目标组件和所述已编辑组件之间显示对齐辅助线之后，确认完成所述目标组件的编辑处理。

在一实施例中，组件编辑模块30还包括：

色块组件添加单元，用于在选取所述色块组件为目标组件之后，若接收到将作为目标组件的所述色块组件拖拽到组件编辑区域的拖拽指令，则将所述色块组件添加到所述目标页面图像的图像有效区域中，并在所述图像有效区域中形成与所述色块组件对应的色块投影区域。

在一实施例中，组件编辑模块30还包括：

容器组件添加单元，用于在选取所述容器组件为目标组件之后，若接收到将作为目标组件的所述容器组件拖拽到组件编辑区域的拖拽指令，则将该容器组件添加到所述组件编辑区域中，并在所述目标页面图像中形成与所述容器组件对应的容器有效投影区域；

容器色块组件添加单元，用于在选取所述容器色块组件为目标组件之后，若接收到将作为目标组件的所述容器色块组件拖拽到组件编辑区域的拖拽指令，则将所述容器色块组件添加到所述容器有效投影区域中，并在所述容器有效投影区域中形成与所述容器色块组件对应的容器色块投影区域。

在一实施例中，骨架屏生成模块40包括：

JSON数据存储单元，用于获取编辑处理之后的目标组件的组件参数信息，并将与所述目标组件的组件参数信息对应的JSON数据存储为与所述骨架屏页面对应的骨架屏页面数据；

客户端渲染单元，用于在接收到客户端发送的目标页面加载请求之后，向所述客户端发送所述骨架屏页面数据，以令所述客户端根据所述骨架屏页面数据确定与每一待渲染的目标组件的组件参数信息，基于所述组件参数信息在所述客户端对各个目标组件进行渲染，完成对与所述目标页面图像对应的骨架屏页面的展示。

在一实施例中，骨架屏生成模块40还包括：

参数二倍值确定单元，用于确定与所述组件参数信息中的尺寸属性参数对应的尺寸二倍值，以及与所述组件参数信息中的位置属性参数对应的位置二倍值；

JSON数据转换单元，用于对所述尺寸二倍值和位置二倍值进行数据转换，得到与所述目标组件的组件参数信息对应的JSON数据，并将所有所述JSON数据存储为所述骨架屏页面数据。

在一实施例中，骨架屏生成模块40还包括：

骨架屏更新请求接收单元，用于接收通过所述编辑界面录入的包含数据标识的骨架屏更新请求，每一个数据标识均对应关联一组所述骨架屏页面数据；

骨架屏页面数据调取单元，用于根据所述数据标识调取已存储的所述骨架屏页面数据；

待更新组件展示单元，用于对调取的所述骨架屏页面数据进行解析，得到所述骨架屏页面数据中包含的组件参数信息，根据所述组件参数信息在所述组件编辑区域中生成并展示待更新组件；

更新处理单元，用于在接收到与所述待更新组件对应的组件更新信息时，根据所述组件更新信息对所述待更新组件进行更新处理，根据更新处理之后的所述待更新组件生成新的骨架屏页面，并将与所述组件更新信息对应的JSON数据存储为新的骨架屏页面数据。

在一实施例中，页面图像展示模块20包括：

目标页面图像获取单元，用于根据所述目标页面地址信息从页面图像数据库查询并获取目标页面图像；

图像透明度调整单元，用于根据所述目标页面显示信息确定所述目标页面图像的透明度信息，并将所述目标页面图像调整为与所述透明度信息对应的透明度之后，将所述目标页面图像展示在所述组件编辑区域。

关于骨架屏页面生成装置的具体限定可以参见上文中对于骨架屏页面生成方法的限定，在此不再赘述。上述骨架屏页面生成装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。

在一个实施例中，提供了一种计算机设备，该计算机设备可以是终端，其内部结构图可以如图10所示。该计算机设备包括通过系统总线连接的处理器、存储器、网络接口、显示屏和输入装置。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括可读存储介质、内存储器。该非易失性存储介质存储有操作系统和计算机可读指令。该内存储器为可读存储介质中的操作系统和计算机可读指令的运行提供环境。该计算机设备的网络接口用于与外部服务器通过网络连接通信。该计算机可读指令被处理器执行时以实现一种骨架屏页面生成方法。本实施例所提供的可读存储介质包括非易失性可读存储介质和易失性可读存储介质。

在一个实施例中，提供了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机可读指令，处理器执行计算机可读指令时实现以下步骤：

在接收骨架屏生成请求时，生成基于Weex框架的编辑界面，所述编辑界面包括组件选择区域、组件编辑区域和属性配置区域，所述组件选择区域包括多个预先封装好的待选取组件；

获取通过所述属性配置区域录入的目标页面信息，根据所述目标页面信息获取目标页面图像，并将所述目标页面图像展示在所述组件编辑区域；

在接收将目标组件拖拽到组件编辑区域的拖拽指令时，将所述目标组件添加到所述组件编辑区域，在所述目标页面图像中形成对应于所述目标组件的组件投影区域，并基于所述组件投影区域对所述目标组件进行编辑处理；所述目标组件包括至少一个所述待选取组件；

根据编辑处理之后的目标组件生成与所述目标页面图像对应的骨架屏页面。

在一个实施例中，提供了一个或多个存储有计算机可读指令的计算机可读存储介质，本实施例所提供的可读存储介质包括非易失性可读存储介质和易失性可读存储介质。可读存储介质上存储有计算机可读指令，计算机可读指令被一个或多个处理器执行时实现以下步骤：

在接收骨架屏生成请求时，生成基于Weex框架的编辑界面，所述编辑界面包括组件选择区域、组件编辑区域和属性配置区域，所述组件选择区域包括多个预先封装好的待选取组件；

获取通过所述属性配置区域录入的目标页面信息，根据所述目标页面信息获取目标页面图像，并将所述目标页面图像展示在所述组件编辑区域；

在接收将目标组件拖拽到组件编辑区域的拖拽指令时，将所述目标组件添加到所述组件编辑区域，在所述目标页面图像中形成对应于所述目标组件的组件投影区域，并基于所述组件投影区域对所述目标组件进行编辑处理；所述目标组件包括至少一个所述待选取组件；

根据编辑处理之后的目标组件生成与所述目标页面图像对应的骨架屏页面。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机可读指令来指令相关的硬件来完成，所述的计算机可读指令可存储于一非易失性可读取存储介质或易失性可读存储介质中，该计算机可读指令在执行时，可包括如上述各方法的实施例的流程。其中，本发明所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和/或易失性存储器。非易失性存储器可包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦除可编程ROM(EEPROM)或闪存。易失性存储器可包括随机存取存储器(RAM)或者外部高速缓冲存储器。作为说明而非局限，RAM以多种形式可得，诸如静态RAM(SRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双数据率SDRAM(DDRSDRAM)、增强型SDRAM(ESDRAM)、同步链路(Synchlink)DRAM(SLDRAM)、存储器总线(Rambus)直接RAM(RDRAM)、直接存储器总线动态RAM(DRDRAM)、以及存储器总线动态RAM(RDRAM)等。

所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，仅以上述各功能单元、模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能单元、模块完成，即将所述装置的内部结构划分成不同的功能单元或模块，以完成以上描述的全部或者部分功能。

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

Claims (10)

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

在接收骨架屏生成请求时，生成基于Weex框架的编辑界面，所述编辑界面包括组件选择区域、组件编辑区域和属性配置区域，所述组件选择区域包括多个预先封装好的待选取组件；

获取通过所述属性配置区域录入的目标页面信息，根据所述目标页面信息获取目标页面图像，并将所述目标页面图像展示在所述组件编辑区域；

在接收将目标组件拖拽到组件编辑区域的拖拽指令时，将所述目标组件添加到所述组件编辑区域，在所述目标页面图像中形成对应于所述目标组件的组件投影区域，并基于所述组件投影区域对所述目标组件进行编辑处理；所述目标组件包括至少一个所述待选取组件；

根据编辑处理之后的目标组件生成与所述目标页面图像对应的骨架屏页面。

2.如权利要求1所述的骨架屏页面生成方法，其特征在于，所述基于所述组件投影区域对所述目标组件进行编辑处理，包括：

接收与所述目标组件对应的组件编辑信息；

获取所述组件编辑信息中的属性编辑信息，根据所述属性编辑信息对所述目标组件进行调整；所述属性编辑信息包括所述目标组件的尺寸属性参数和位置属性参数；所述组件编辑信息在所述组件编辑区域中的所述目标组件被拖拽之后生成，或；所述组件编辑信息在通过所述属性配置区域录入与所述目标组件对应的尺寸属性编辑参数和位置属性编辑参数之后生成；

在调整至所述目标组件的组件投影区域与所述目标页面图像中的样式元素区域之间达到预设重合条件时，若确定存在已编辑组件，则在所述目标组件和所述已编辑组件之间显示对齐辅助线之后，确认完成所述目标组件的编辑处理。

3.如权利要求1所述的骨架屏页面生成方法，其特征在于，所述待选取组件包括色块组件，所述组件投影区域包括色块投影区域；

所述在接收将目标组件拖拽到组件编辑区域的拖拽指令时，将所述目标组件添加到所述组件编辑区域，在所述目标页面图像中形成对应于所述目标组件的组件投影区域，包括：

在选取所述色块组件为目标组件之后，若接收到将作为目标组件的所述色块组件拖拽到组件编辑区域的拖拽指令，则将所述色块组件添加到所述目标页面图像的图像有效区域中，并在所述图像有效区域中形成与所述色块组件对应的色块投影区域。

4.如权利要求1所述的骨架屏页面生成方法，其特征在于，所述待选取组件包括容器组件和容器色块组件，所述组件投影区域包括容器有效投影区域和容器色块投影区域；

所述在接收将目标组件拖拽到组件编辑区域的拖拽指令时，将所述目标组件添加到所述组件编辑区域，在所述目标页面图像中形成对应于所述目标组件的组件投影区域，包括：

在选取所述容器组件为目标组件之后，若接收到将作为目标组件的所述容器组件拖拽到组件编辑区域的拖拽指令，则将该容器组件添加到所述组件编辑区域中，并在所述目标页面图像中形成与所述容器组件对应的容器有效投影区域；

在选取所述容器色块组件为目标组件之后，若接收到将作为目标组件的所述容器色块组件拖拽到组件编辑区域的拖拽指令，则将所述容器色块组件添加到所述容器有效投影区域中，并在所述容器有效投影区域中形成与所述容器色块组件对应的容器色块投影区域。

5.如权利要求1所述的骨架屏页面生成方法，其特征在于，所述根据编辑处理之后的目标组件确定与所述目标页面图像对应的骨架屏页面之后，还包括：

获取编辑处理之后的目标组件的组件参数信息，并将与所述目标组件的组件参数信息对应的JSON数据存储为与所述骨架屏页面对应的骨架屏页面数据；

在接收到客户端发送的目标页面加载请求之后，向所述客户端发送所述骨架屏页面数据，以令所述客户端根据所述骨架屏页面数据确定与每一待渲染的目标组件的组件参数信息，基于所述组件参数信息在所述客户端对各个目标组件进行渲染，完成对与所述目标页面图像对应的骨架屏页面的展示。

6.如权利要求5所述的骨架屏页面生成方法，其特征在于，所述将与所述目标组件的组件参数信息对应的JSON数据存储为与所述骨架屏页面对应的骨架屏页面数据，包括：

确定与所述组件参数信息中的尺寸属性参数对应的尺寸二倍值，以及与所述组件参数信息中的位置属性参数对应的位置二倍值；

对所述尺寸二倍值和位置二倍值进行数据转换，得到与所述目标组件的组件参数信息对应的JSON数据，并将所有所述JSON数据存储为所述骨架屏页面数据。

7.如权利要求5所述的骨架屏页面生成方法，其特征在于，所述将与所述目标组件的组件参数信息对应的JSON数据存储为与所述目标页面图像对应的骨架屏页面数据之后，还包括：

接收通过所述编辑界面录入的包含数据标识的骨架屏更新请求，每一个数据标识均对应关联一组所述骨架屏页面数据；

根据所述数据标识调取已存储的所述骨架屏页面数据；

对调取的所述骨架屏页面数据进行解析，得到所述骨架屏页面数据中包含的组件参数信息，根据所述组件参数信息在所述组件编辑区域中生成并展示待更新组件；

在接收到与所述待更新组件对应的组件更新信息时，根据所述组件更新信息对所述待更新组件进行更新处理，根据更新处理之后的所述待更新组件生成新的骨架屏页面，并将与所述组件更新信息对应的JSON数据存储为新的骨架屏页面数据。

8.如权利要求1所述的骨架屏页面生成方法，其特征在于，所述目标页面信息包括目标页面地址信息和目标页面显示信息；

所述根据所述目标页面信息获取目标页面图像，并将所述目标页面图像展示在所述组件编辑区域，包括：

根据所述目标页面地址信息从页面图像数据库查询并获取目标页面图像；

根据所述目标页面显示信息确定所述目标页面图像的透明度信息，并将所述目标页面图像调整为与所述透明度信息对应的透明度之后，将所述目标页面图像展示在所述组件编辑区域。

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

10.一种计算机可读存储介质，所述计算机可读存储介质存储有计算机可读指令，其特征在于，所述计算机可读指令被一个或多个处理器执行时，使得所述一个或多个处理器执行如权利要求1至8中任一项所述骨架屏页面生成方法。