CN111352627B - 一种页面骨架屏生成方法、装置、设备及可读存储介质 - Google Patents

Abstract

本申请公开了一种页面骨架屏生成方法、装置、设备及可读存储介质，在本方法中，在获取到网页组件之后，生成每个网页组件对应的组件骨架屏，并进行存储以便调用。在搭建系统中，拼接多个所需的所述网页组件来搭建目标页面。保存目标页面时，便可结合多个网页组件参数生成真实页面文档，并进一步根据所述参数以及多个网页组件对应的所述组件骨架屏生成与所述真实页面文档结构相同的骨架屏页面。然后将骨架屏页面保存在真实页面文档中，并以目标页面结构注入，以便显示切换该骨架屏页面。由此可见，本方法可大大减轻开发人员的工作负担，也不会给系统带来计算负担。

Description

一种页面骨架屏生成方法、装置、设备及可读存储介质

技术领域

本申请涉及计算机应用技术领域，特别是涉及一种页面骨架屏生成方法、装置、设备及可读存储介质。

背景技术

网页的页面完全加载是需要一定时间的，在页面数据返回前，页面就是一片空白。为了解决页面加载出来前的一段短时间的白屏，目前有三种解决方案：第一种，服务端同步渲染；第二种，增加页面loading；第三种，增加页面首屏骨架屏。这三种解决方案的特点如下：第一种方案，响应快，用户体验好，首屏渲染快，但服务端渲染会增加服务器的计算压力，消耗服务器性能。第二种方案，设计开发简单，但由于太过简单，在页面的加载状态中，用户除了能看到单个loading图案，而对即将看到的页面内容一无所知。第三种方案，骨架屏作为首屏渲染的优化，比其他单薄的加载提示更人性化，能够提前给用户充分的信息量，让用户更直接感知布局和内容，预先获取用户关注点，让用户关注焦点提前聚焦到感兴趣位置，提升用户体验，增加用户存留率，缺点是其设计开发将是一种耗费时间和人力的工作。

现有的骨架屏生成技术方案，包括：

第一种，使用图片、SVG(Scalable Vector Graphics，可缩放矢量图形)或者手动编写骨架屏代码(HTML+CSS)来实现骨架屏效果，这种方式可以很快的完成骨架屏效果，但是面对视觉设计的改版以及需求的更迭，对骨架屏的跟进修改会非常被动，这种机械化重复劳作的方式此时未免显得有些机动性不足。

第二种，通过预渲染手动编写的代码生成相应的骨架屏，比如：VSWP(vue-skeleton-webpack-plugin)，通过Vue SSR结合Webpack在构建时渲染写好的一个完整页面对应的Vue(一套用于构建用户界面的渐进式JavaScript框架)骨架屏组件，将预渲染生成的DOM节点和相关样式插入到最终输出的HTML中。该方案相比第一种方案同样需要手写骨架屏代码。

第三种，自动生成骨架页面的工具PSWP(page-skeleton-webpack-plugin)，该技术可以针对单个完全加载好的页面自动生成对应的骨架屏，生成的骨架屏内容是基于页面本身的HTML和CSS，页面结构存在嵌套比较深的情况下可能会大量的计算过程。

以上三种设计方案均是针对整个页面的骨架屏生成方式，可见，现有的生成骨架屏的方式要么需要大量的手写代码，要么存在大量的计算过程，降低系统性能。因此，如何有效地解决页面骨架屏的生成等问题，是目前本领域技术人员急需解决的技术问题。

发明内容

本申请的目的是提供一种页面骨架屏生成方法、装置、设备及可读存储介质，可实现在减少开发人员手写代码的情况下，还可避免带来大量的计算工作。

为解决上述技术问题，本申请提供如下技术方案：

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

获取网页组件后，生成并保存每个所述网页组件的组件骨架屏；

在搭建系统中选择所需的多个网页组件来搭建目标页面；

在保存所述目标页面时，结合所述多个网页组件的参数生成真实页面文档，并根据所述参数以及所述多个网页组件对应的所述组件骨架屏生成与所述真实页面文档结构相同的骨架屏页面；

保存所述骨架屏页面到所述真实页面文档中，并以目标页面结构注入，以便显示切换所述骨架屏页面。

优选地，所述获取组件后，生成并保存每个所述网页组件的组件骨架屏，包括：

利用骨架屏生成工具生成各个所述网页组件分别对应的所述组件骨架屏；

按照统一命名规则对所述组件骨架屏进行命名，并保存在组件项目中或者所述搭建系统可以访问目标存储位置中。

优选地，结合所述多个网页组件的参数生成真实页面文档，包括：

结合所述参数拼接所述多个网页组件，以获得所述真实页面文档；所述参数包括配置参数和样式参数。

优选地，所述以目标页面结构注入，包括：

将所述骨架屏页面放置在挂载点的HTML节点同级结构之前。

优选地，还包括：

在所述目标页面中添加权限组件；所述权限组件的渲染内容包括无权访问的提示文案。

优选地，所述显示切换所述骨架屏页面，包括：

在用户发起页面访问之后，显示所述骨架屏页面，所述权限组件判断所述用户是否具备访问权限，并依据判断结果切换所述骨架屏页面至对应页面。

优选地，所述并依据判断结果切换所述骨架屏页面至对应页面，包括：

若无权限，则将所述骨架屏页面切换为所述提示文案；

若有权限，则将所述骨架屏页面切换为真实的页面内容；所述页面内容为所述页面访问的响应网页。

一种页面骨架屏生成装置，包括：

组件骨架屏生成模块，应用于获取网页组件后，生成并保存每个所述网页组件的组件骨架屏；

目标页面搭建模块，用于在搭建系统中选择所需的多个网页组件来搭建目标页面；

骨架屏页面生成模块，用于结合所述多个网页组件的参数生成真实页面文档，并根据所述参数以及所述多个网页组件对应的所述组件骨架屏生成与所述真实页面文档结构相同的骨架屏页面；

骨架屏页面注入模块，用于保存所述骨架屏页面到所述真实页面文档中，并以目标页面结构注入，以便显示切换所述骨架屏页面。

一种页面骨架屏生成设备，包括：

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

处理器，用于执行所述计算机程序时实现上述页面骨架屏生成方法的步骤。

一种可读存储介质，所述可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现上述页面骨架屏生成方法的步骤。

应用本申请实施例所提供的方法，获取网页组件后，获取网页组件后，生成并保存每个网页组件的组件骨架屏；在搭建系统中选择所需的多个网页组件来搭建目标页面；在保存目标页面时，结合多个网页组件的参数生成真实页面文档，并根据参数以及多个网页组件对应的组件骨架屏生成与真实页面文档结构相同的骨架屏页面；保存骨架屏页面到真实页面文档中，并以目标页面结构注入，以便显示切换骨架屏页面。

在本方法中，在获取到网页组件之后，生成每个网页组件对应的组件骨架屏，并进行存储以便调用。在搭建系统中，拼接多个所需的网页组件搭建目标页面。保存目标页面时，便可结合多个网页组件参数生成真实页面文档，并进一步根据参数以及多个网页组件对应的组件骨架屏生成与真实页面文档结构相同的骨架屏页面。然后将骨架屏页面保存在真实页面文档中，并以目标页面结构注入，以便显示切换该骨架屏页面。由此可见，在本方法中，开发人员仅需开发出若干个网页组件，便可基于这些组件生成对应的组件骨架屏。在拼接目标网页时，可实时根据拼接目标网页的组件对应的组件骨架屏，便可获得与目标页面对应的骨架屏页面。即，同一网页组件/相似组件只需生成并调整组件骨架屏一次，后期可以重复利用组件骨架屏。在搭建系统中搭建页面时，实时生成所用到的组件骨架屏对应的骨架屏页面，更加的高效和便捷。具体的，当网页组件的内容有改动时，只需调整修改网页组件的骨架屏，在搭建系统中发布即可，可大大减轻开发人员的工作负担，也不会给系统带来计算负担。

相应地，本申请实施例还提供了与上述页面骨架屏生成方法相对应的页面骨架屏生成装置、设备和可读存储介质，具有上述技术效果，在此不再赘述。

附图说明

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

图1为本申请实施例中一种页面骨架屏生成方法的实施流程图；

图2为本申请实施例中一种页面骨架屏生成装置的结构示意图；

图3为本申请实施例中一种页面骨架屏生成设备的结构示意图；

图4为本申请实施例中一种页面骨架屏生成设备的具体结构示意图。

具体实施方式

为了使本技术领域的人员更好地理解本申请方案，下面结合附图和具体实施方式对本申请作进一步的详细说明。显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

实施例一：

请参考图1，图1为本申请实施例中一种页面骨架屏生成方法的流程图，该方法包括以下步骤：

S101、获取网页组件后，生成并保存每个网页组件的组件骨架屏。

其中，网页组件包括各种常用的界面组件，如：图片、表格、树、联动下拉框等。骨架屏(Skeleton Screen)：是一个页面的空白版本，通过这个空白版本传递信息，表示页面正在渐进式的加载中。简单说，就是在页面数据尚未加载前先给用户展示出页面的大致结构(如灰色占位图)，直到请求数据返回后再渲染页面，补充进需要显示的数据内容。

研发人员需开发出骨架屏中所需的各种组件。如此，从网页组件的存储位置读取到网页组件之间，便可生成每一个网页组件对应的组件骨架屏。即组件骨架屏为针对一个独立的网页组件对应的页面内容，在本申请中，一个骨架屏页面可由多个组件骨架屏拼接而成。

在生成每一个组件骨架屏之后，可将组件骨架屏保存起来，以便拼接骨架屏页面。特别说明是，组件骨架屏可以重复多少使用。当然，在组件发生变化之后，可重新生成对应的组件骨架屏，以便更新骨架屏页面。

优选地，在生成组件骨架屏时，可使用骨架屏生成工具。具体的，生成并保存每个网页组件的组件骨架屏，包括：

步骤一、利用骨架屏生成工具生成各个网页组件分别对应的组件骨架屏；

步骤二、按照统一命名规则对组件骨架屏进行命名，并保存在组件项目中或者搭建系统可以访问目标存储位置中。

为便于描述，下面将上述两个步骤结合起来进行说明。

设计与开发页面组件之后，结合骨架屏自动生成工具(如：PSWP，一种全称为Page-skeleton-webpack-plugin的自动生成骨架页面的工具)，生成页面组件对应的骨架屏(组件对应的骨架屏称之为组件骨架屏)，并给组件骨架屏命名。在命名时，可选用统一的命名规则，以便搭建系统寻找，如选用“组件名”+“-skeleton”的方式命名。在保存组件骨架屏时，可选择保存到组件项目中或者所用搭建系统可以访问到的目标存储位置中。

其中，搭建系统：一种基于业务组件实现快速生成和发布页面,节省开发人力，提升页面上线效率的工具。

S102、在搭建系统中选择所需的多个网页组件来搭建目标页面。

使用搭建系统搭建目标页面，页面是由预先开发设计的一个个网页组件。具体的，网页即是一个个的网页组件构成。例如网页中的一行内容可以由一个网页组件构成，也可以有多个网页组件构成。

其中，网页组件的选取数量以及种类可基于目标页面的搭建需求而定。

S103、在保存目标页面时，结合多个网页组件的参数生成真实页面文档，并根据参数以及多个网页组件对应的组件骨架屏生成与真实页面文档结构相同的骨架屏页面。

在保存目标页面时，可结合多个网页组件的参数生成真实页面文档。于此同时，可基于这些参数以及这多个网页组件对应的组件骨架屏生成与该真实页面文档结构相同的骨架屏页面。也就是说，为每一个网页组件生成并保存了组件骨架屏之后，可在设计网页的同时，自动生成该网页对应的骨架屏页面。

其中，结合多个网页组件的参数生成真实页面文档，可具体包括：结合参数拼接多个网页组件，以获得真实页面文档；参数包括配置参数和样式参数。其中，配置参数可具体包括显示内容(如隐藏哪些内容，显示哪些内容)，页面位置(网页组件相对于整个页面的位置)，颜色选取；样式参数可具体包括上下网页组件之间的间距，左右网页组件之间的间距。

S104、保存骨架屏页面到真实页面文档中，并以目标页面结构注入，以便显示切换骨架屏页面。

为了显示和切换该骨架屏页面，可将骨架屏页面保存到真实页面文档中，并以目标页面格式注入。

通常的方案是注入到项目的入口文件index.html中的id＝“app”的DOM结构里。

其中，DOM(文件对象模型，DocumentObjectModel)结构是一种HTML节点。

但该DOM结构会随着页面的挂载被替换成真实DOM结构，也就是说，预先放在id＝“app”的DOM结构中的内容都会在页面挂载后清空。由于页面不是总是静态页面，如果需要异步请求数据的话，那么在接口返回数据之前，页面还是会有一小段时间的空白。优选地，为了实现自动控制骨架屏页面的切换，骨架屏页面的注入可具体包括：将骨架屏页面放置在挂载点的HTML节点同级结构之前。即，将骨架屏页面放在与id＝“app”的DOM结构同级的结构之前，以便自主地控制骨架屏的消失时间。id＝“app”相当于挂载点，DOM结构即某个网页节点(HTML节点)。

在现有技术中，骨架屏会被直接替换，当页面需要加载外部资源或者等待接口调用，页面会出现空白，过一会才会显示内容。为解决此问题，优选地，还可在目标页面中添加权限组件；权限组件的渲染内容包括无权访问的提示文案。相应地，显示切换骨架屏页面，包括：在用户发起页面访问之后，显示骨架屏页面，权限组件判断用户是否具备访问权限，并依据判断结果切换骨架屏页面至对应页面。其中，依据判断结果切换骨架屏页面至对应页面，包括：

情况1、若无权限，则将骨架屏页面切换为提示文案；

情况2、若有权限，则将骨架屏页面切换为真实的页面内容；页面内容为页面访问的响应网页。

具体的，真实DOM结构与骨架屏页面之间的切换是需要讲究时机的，页面切换可以基于用户权限的判断，若当前用户身份或其他页面相关的配置无当前页面的访问权限时，可输出显示“无权限访问”等提示文案。可通过在每个目标页面添加一个渲染内容为“无权限访问”等文案的权限组件，当该权限组件中的接口返回结构后，若是有权限，则应该显示真实的页面内容；若是无权限，则显示该权限组件中的“无权限访问”等提示文案。即，不管返回结构如何，这时都应该是移除骨架屏的最佳时机。

其中，移除骨架屏页面的方式可直接采用原生的DOM操作方式，即document.body.removeChild(document.querySelector(‘skeleton-page’))。

如此，便可精准地控制骨架屏与真实DOM的切换时间，解决了现有技术中在真实DOM加载前会出现一段时间白屏的问题。

应用本申请实施例所提供的方法，获取网页组件后，获取网页组件后，生成并保存每个网页组件的组件骨架屏；在搭建系统中选择所需的多个网页组件来搭建目标页面；在保存目标页面时，结合多个网页组件的参数生成真实页面文档，并根据参数以及多个网页组件对应的组件骨架屏生成与真实页面文档结构相同的骨架屏页面；保存骨架屏页面到真实页面文档中，并以目标页面结构注入，以便显示切换骨架屏页面。

在本方法中，在获取到网页组件之后，生成每个网页组件对应的组件骨架屏，并进行存储以便调用。在搭建系统中，拼接多个所需的网页组件搭建目标页面。保存目标页面时，便可结合多个网页组件参数生成真实页面文档，并进一步根据参数以及多个网页组件对应的组件骨架屏生成与真实页面文档结构相同的骨架屏页面。然后将骨架屏页面保存在真实页面文档中，并以目标页面结构注入，以便显示切换该骨架屏页面。由此可见，在本方法中，开发人员仅需开发出若干个网页组件，便可基于这些组件生成对应的组件骨架屏。在拼接目标网页时，可实时根据拼接目标网页的组件对应的组件骨架屏，便可获得与目标页面对应的骨架屏页面。即，同一网页组件/相似组件只需生成并调整组件骨架屏一次，后期可以重复利用组件骨架屏。在搭建系统中搭建页面时，实时生成所用到的组件骨架屏对应的骨架屏页面，更加的高效和便捷。具体的，当网页组件的内容有改动时，只需调整修改网页组件的骨架屏，在搭建系统中发布即可，可大大减轻开发人员的工作负担，也不会给系统带来计算负担。

实施例二：

相应于上面的方法实施例，本申请实施例还提供了一种页面骨架屏生成装置，下文描述的页面骨架屏生成装置与上文描述的页面骨架屏生成方法可相互对应参照。

参见图2所示，该装置包括以下模块：

组件骨架屏生成模块101，应用于获取网页组件后，生成并保存每个网页组件的组件骨架屏；

目标页面搭建模块102，用于在搭建系统中选择所需的多个网页组件来搭建目标页面；

骨架屏页面生成模块103，用于结合多个网页组件的参数生成真实页面文档，并根据参数以及多个网页组件对应的组件骨架屏生成与真实页面文档结构相同的骨架屏页面；

骨架屏页面注入模块104，用于保存骨架屏页面到真实页面文档中，并以目标页面结构注入，以便显示切换骨架屏页面。

应用本申请实施例所提供的方法，获取网页组件后，获取网页组件后，生成并保存每个网页组件的组件骨架屏；在搭建系统中选择所需的多个网页组件来搭建目标页面；在保存目标页面时，结合多个网页组件的参数生成真实页面文档，并根据参数以及多个网页组件对应的组件骨架屏生成与真实页面文档结构相同的骨架屏页面；保存骨架屏页面到真实页面文档中，并以目标页面结构注入，以便显示切换骨架屏页面。

在本方法中，在获取到网页组件之后，生成每个网页组件对应的组件骨架屏，并进行存储以便调用。在搭建系统中，拼接多个所需的网页组件搭建目标页面。保存目标页面时，便可结合多个网页组件参数生成真实页面文档，并进一步根据参数以及多个网页组件对应的组件骨架屏生成与真实页面文档结构相同的骨架屏页面。然后将骨架屏页面保存在真实页面文档中，并以目标页面结构注入，以便显示切换该骨架屏页面。由此可见，在本方法中，开发人员仅需开发出若干个网页组件，便可基于这些组件生成对应的组件骨架屏。在拼接目标网页时，可实时根据拼接目标网页的组件对应的组件骨架屏，便可获得与目标页面对应的骨架屏页面。即，同一网页组件/相似组件只需生成并调整组件骨架屏一次，后期可以重复利用组件骨架屏。在搭建系统中搭建页面时，实时生成所用到的组件骨架屏对应的骨架屏页面，更加地高效和便捷。具体的，当网页组件的内容有改动时，只需调整修改网页组件的骨架屏，在搭建系统中发布即可，可大大减轻开发人员的工作负担，也不会给系统带来计算负担。

在本申请的一种具体实施方式中，组件骨架屏生成模块101，具体用于利用骨架屏生成工具生成各个网页组件分别对应的组件骨架屏；按照统一命名规则对组件骨架屏进行命名，并保存在组件项目中或者搭建系统可以访问目标存储位置中。

在本申请的一种具体实施方式中，骨架屏页面生成模块103，具体用于结合参数拼接多个网页组件，以获得真实页面文档；参数包括配置参数和样式参数。

在本申请的一种具体实施方式中，骨架屏页面注入模块104，具体用于将骨架屏页面放置在挂载点的HTML节点同级结构之前。

在本申请的一种具体实施方式中，还包括：

权限组件添加模块，用于在目标页面中添加权限组件；权限组件的渲染内容包括无权访问的提示文案。

在本申请的一种具体实施方式中，骨架屏页面注入模块104，具体用于在用户发起页面访问之后，显示骨架屏页面，权限组件判断用户是否具备访问权限，并依据判断结果切换骨架屏页面至对应页面。

在本申请的一种具体实施方式中，骨架屏页面注入模块104，具体用于若无权限，则将骨架屏页面切换为提示文案；若有权限，则将骨架屏页面切换为真实的页面内容；页面内容为页面访问的响应网页。

实施例三：

相应于上面的方法实施例，本申请实施例还提供了一种页面骨架屏生成设备，下文描述的一种页面骨架屏生成设备与上文描述的一种页面骨架屏生成方法可相互对应参照。

参见图3所示，该页面骨架屏生成设备包括：

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

处理器D2，用于执行计算机程序时实现上述方法实施例的页面骨架屏生成方法的步骤。

具体的，请参考图4，为本实施例提供的一种页面骨架屏生成设备的具体结构示意图，该页面骨架屏生成设备可因配置或性能不同而产生比较大的差异，可以包括一个或一个以上处理器(central processing units，CPU)322(例如，一个或一个以上处理器)和存储器332，一个或一个以上存储应用程序342或数据344的存储介质330(例如一个或一个以上海量存储设备)。其中，存储器332和存储介质330可以是短暂存储或持久存储。存储在存储介质330的程序可以包括一个或一个以上模块(图示没标出)，每个模块可以包括对数据处理设备中的一系列指令操作。更进一步地，中央处理器322可以设置为与存储介质330通信，在页面骨架屏生成设备301上执行存储介质330中的一系列指令操作。

页面骨架屏生成设备301还可以包括一个或一个以上电源326，一个或一个以上有线或无线网络接口350，一个或一个以上输入输出接口358，和/或，一个或一个以上操作系统341。例如，Windows ServerTM，Mac OS XTM，UnixTM，LinuxTM，FreeBSDTM等。

上文所描述的页面骨架屏生成方法中的步骤可以由页面骨架屏生成设备的结构实现。

实施例四：

相应于上面的方法实施例，本申请实施例还提供了一种可读存储介质，下文描述的一种可读存储介质与上文描述的一种页面骨架屏生成方法可相互对应参照。

一种可读存储介质，可读存储介质上存储有计算机程序，计算机程序被处理器执行时实现上述方法实施例的页面骨架屏生成方法的步骤。

该可读存储介质具体可以为U盘、移动硬盘、只读存储器(Read-Only Memory，ROM)、随机存取存储器(Random Access Memory，RAM)、磁碟或者光盘等各种可存储程序代码的可读存储介质。

专业人员还可以进一步意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本申请的范围。

Claims (10)

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

获取网页组件后，生成并保存每个所述网页组件的组件骨架屏；

在搭建系统中选择所需的多个网页组件来搭建目标页面；

在保存所述目标页面时，结合所述多个网页组件的参数生成真实页面文档，并根据所述参数以及所述多个网页组件对应的所述组件骨架屏生成与所述真实页面文档结构相同的骨架屏页面；

保存所述骨架屏页面到所述真实页面文档中，并以目标页面结构注入，以便显示切换所述骨架屏页面。

2.根据权利要求1所述的页面骨架屏生成方法，其特征在于，所述获取网页组件后，生成并保存每个所述网页组件的组件骨架屏，包括：

利用骨架屏生成工具生成各个所述网页组件分别对应的所述组件骨架屏；

按照统一命名规则对所述组件骨架屏进行命名，并保存在组件项目中或者所述搭建系统可以访问目标存储位置中。

3.根据权利要求1所述的页面骨架屏生成方法，其特征在于，结合所述多个网页组件的参数生成真实页面文档，包括：

结合所述参数拼接所述多个网页组件，以获得所述真实页面文档；所述参数包括配置参数和样式参数。

4.根据权利要求1至3任一项所述的页面骨架屏生成方法，其特征在于，所述以目标页面结构注入，包括：

将所述骨架屏页面放置在挂载点的HTML节点同级结构之前。

5.根据权利要求4所述的页面骨架屏生成方法，其特征在于，还包括：

在所述目标页面中添加权限组件；所述权限组件的渲染内容包括无权访问的提示文案。

6.根据权利要求5所述的页面骨架屏生成方法，其特征在于，所述显示切换所述骨架屏页面，包括：

在用户发起页面访问之后，显示所述骨架屏页面，所述权限组件判断所述用户是否具备访问权限，并依据判断结果切换所述骨架屏页面至对应页面。

7.根据权利要求6所述的页面骨架屏生成方法，其特征在于，所述并依据判断结果切换所述骨架屏页面至对应页面，包括：

若无权限，则将所述骨架屏页面切换为所述提示文案；

若有权限，则将所述骨架屏页面切换为真实的页面内容；所述页面内容为所述页面访问的响应网页。

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

组件骨架屏生成模块，应用于获取网页组件后，生成并保存每个所述网页组件的组件骨架屏；

目标页面搭建模块，用于在搭建系统中选择所需的多个网页组件来搭建目标页面；

骨架屏页面生成模块，用于结合所述多个网页组件的参数生成真实页面文档，并根据所述参数以及所述多个网页组件对应的所述组件骨架屏生成与所述真实页面文档结构相同的骨架屏页面；

骨架屏页面注入模块，用于保存所述骨架屏页面到所述真实页面文档中，并以目标页面结构注入，以便显示切换所述骨架屏页面。

9.一种页面骨架屏生成设备，其特征在于，包括：

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

处理器，用于执行所述计算机程序时实现如权利要求1至7任一项所述页面骨架屏生成方法的步骤。

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

Images