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

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

【技术实现步骤摘要】
一种页面骨架屏生成方法、装置、设备及可读存储介质
本申请涉及计算机应用
，特别是涉及一种页面骨架屏生成方法、装置、设备及可读存储介质。
技术介绍
网页的页面完全加载是需要一定时间的，在页面数据返回前，页面就是一片空白。为了解决页面加载出来前的一段短时间的白屏，目前有三种解决方案：第一种，服务端同步渲染；第二种，增加页面loading；第三种，增加页面首屏骨架屏。这三种解决方案的特点如下：第一种方案，响应快，用户体验好，首屏渲染快，但服务端渲染会增加服务器的计算压力，消耗服务器性能。第二种方案，设计开发简单，但由于太过简单，在页面的加载状态中，用户除了能看到单个loading图案，而对即将看到的页面内容一无所知。第三种方案，骨架屏作为首屏渲染的优化，比其他单薄的加载提示更人性化，能够提前给用户充分的信息量，让用户更直接感知布局和内容，预先获取用户关注点，让用户关注焦点提前聚焦到感兴趣位置，提升用户体验，增加用户存留率，缺点是其设计开发将是一种耗费时间和人力的工作。现有的骨架屏生成技术方案，包括：第一种，使用图片、SVG(ScalableVectorGraphics，可缩放矢量图形)或者手动编写骨架屏代码(HTML+CSS)来实现骨架屏效果，这种方式可以很快的完成骨架屏效果，但是面对视觉设计的改版以及需求的更迭，对骨架屏的跟进修改会非常被动，这种机械化重复劳作的方式此时未免显得有些机动性不足。第二种，通过预渲染手动编写的代码生成相应的骨架屏，比如：VSWP(vue-skeleton-webpack-plugin)，通过VueSSR结合Webpack在构建时渲染写好的一个完整页面对应的Vue(一套用于构建用户界面的渐进式JavaScript框架)骨架屏组件，将预渲染生成的DOM节点和相关样式插入到最终输出的HTML中。该方案相比第一种方案同样需要手写骨架屏代码。第三种，自动生成骨架页面的工具PSWP(page-skeleton-webpack-plugin)，该技术可以针对单个完全加载好的页面自动生成对应的骨架屏，生成的骨架屏内容是基于页面本身的HTML和CSS，页面结构存在嵌套比较深的情况下可能会大量的计算过程。以上三种设计方案均是针对整个页面的骨架屏生成方式，可见，现有的生成骨架屏的方式要么需要大量的手写代码，要么存在大量的计算过程，降低系统性能。因此，如何有效地解决页面骨架屏的生成等问题，是目前本领域技术人员急需解决的技术问题。
技术实现思路
本申请的目的是提供一种页面骨架屏生成方法、装置、设备及可读存储介质，可实现在减少开发人员手写代码的情况下，还可避免带来大量的计算工作。为解决上述技术问题，本申请提供如下技术方案：一种页面骨架屏生成方法，包括：获取网页组件后，生成并保存每个所述网页组件的组件骨架屏；在搭建系统中选择所需的多个网页组件来搭建目标页面；在保存所述目标页面时，结合所述多个网页组件的参数生成真实页面文档，并根据所述参数以及所述多个网页组件对应的所述组件骨架屏生成与所述真实页面文档结构相同的骨架屏页面；保存所述骨架屏页面到所述真实页面文档中，并以目标页面结构注入，以便显示切换所述骨架屏页面。优选地，所述获取组件后，生成并保存每个所述网页组件的组件骨架屏，包括：利用骨架屏生成工具生成各个所述网页组件分别对应的所述组件骨架屏；按照统一命名规则对所述组件骨架屏进行命名，并保存在组件项目中或者所述搭建系统可以访问目标存储位置中。优选地，结合所述多个网页组件的参数生成真实页面文档，包括：结合所述参数拼接所述多个网页组件，以获得所述真实页面文档；所述参数包括配置参数和样式参数。优选地，所述以目标页面结构注入，包括：将所述骨架屏页面放置在挂载点的HTML节点同级结构之前。优选地，还包括：在所述目标页面中添加权限组件；所述权限组件的渲染内容包括无权访问的提示文案。优选地，所述显示切换所述骨架屏页面，包括：在用户发起页面访问之后，显示所述骨架屏页面，所述权限组件判断所述用户是否具备访问权限，并依据判断结果切换所述骨架屏页面至对应页面。优选地，所述并依据判断结果切换所述骨架屏页面至对应页面，包括：若无权限，则将所述骨架屏页面切换为所述提示文案；若有权限，则将所述骨架屏页面切换为真实的页面内容；所述页面内容为所述页面访问的响应网页。一种页面骨架屏生成装置，包括：组件骨架屏生成模块，应用于获取网页组件后，生成并保存每个所述网页组件的组件骨架屏；目标页面搭建模块，用于在搭建系统中选择所需的多个网页组件来搭建目标页面；骨架屏页面生成模块，用于结合所述多个网页组件的参数生成真实页面文档，并根据所述参数以及所述多个网页组件对应的所述组件骨架屏生成与所述真实页面文档结构相同的骨架屏页面；骨架屏页面注入模块，用于保存所述骨架屏页面到所述真实页面文档中，并以目标页面结构注入，以便显示切换所述骨架屏页面。一种页面骨架屏生成设备，包括：存储器，用于存储计算机程序；处理器，用于执行所述计算机程序时实现上述页面骨架屏生成方法的步骤。一种可读存储介质，所述可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现上述页面骨架屏生成方法的步骤。应用本申请实施例所提供的方法，获取网页组件后，获取网页组件后，生成并保存每个网页组件的组件骨架屏；在搭建系统中选择所需的多个网页组件来搭建目标页面；在保存目标页面时，结合多个网页组件的参数生成真实页面文档，并根据参数以及多个网页组件对应的组件骨架屏生成与真实页面文档结构相同的骨架屏页面；保存骨架屏页面到真实页面文档中，并以目标页面结构注入，以便显示切换骨架屏页面。在本方法中，在获取到网页组件之后，生成每个网页组件对应的组件骨架屏，并进行存储以便调用。在搭建系统中，拼接多个所需的网页组件搭建目标页面。保存目标页面时，便可结合多个网页组件参数生成真实页面文档，并进一步根据参数以及多个网页组件对应的组件骨架屏生成与真实页面文档结构相同的骨架屏页面。然后将骨架屏页面保存在真实页面文档中，并以目标页面结构注入，以便显示切换该骨架屏页面。由此可见，在本方法中，开发人员仅需开发出若干个网页组件，便可基于这些组件生成对应的组件骨架屏。在拼接目标网页时，可实时根据拼接目标网页的组件对应的组件骨架屏，便可获得与目标页面对应的骨架屏页面。即，同一网页组件/相似组件只需生成并调整组件骨架屏一次，后期可以重复利用组件骨架屏。在搭建系统中搭建页面时，实时生成所用到的组件骨架屏对应的骨架屏页面，更加的高效和便捷。具体的，当网页组件的内容有改动时，只需调整修改网页组件的骨架屏，在搭建系统中发布即可，可大大减轻开发人员的工作负担，也不会给系统带来计算负担。相应地，本申请实施例还提供了与上述页面骨架屏生成方法相对应的页面骨架屏生成装置、设备和可读存储介质，具有上本文档来自技高网...

【技术保护点】
1.一种页面骨架屏生成方法，其特征在于，包括：/n获取网页组件后，生成并保存每个所述网页组件的组件骨架屏；/n在搭建系统中选择所需的多个网页组件来搭建目标页面；/n在保存所述目标页面时，结合所述多个网页组件的参数生成真实页面文档，并根据所述参数以及所述多个网页组件对应的所述组件骨架屏生成与所述真实页面文档结构相同的骨架屏页面；/n保存所述骨架屏页面到所述真实页面文档中，并以目标页面结构注入，以便显示切换所述骨架屏页面。/n

【技术特征摘要】
1.一种页面骨架屏生成方法，其特征在于，包括：
获取网页组件后，生成并保存每个所述网页组件的组件骨架屏；
在搭建系统中选择所需的多个网页组件来搭建目标页面；
在保存所述目标页面时，结合所述多个网页组件的参数生成真实页面文档，并根据所述参数以及所述多个网页组件对应的所述组件骨架屏生成与所述真实页面文档结构相同的骨架屏页面；
保存所述骨架屏页面到所述真实页面文档中，并以目标页面结构注入，以便显示切换所述骨架屏页面。


2.根据权利要求1所述的页面骨架屏生成方法，其特征在于，所述获取组件后，生成并保存每个所述网页组件的组件骨架屏，包括：
利用骨架屏生成工具生成各个所述网页组件分别对应的所述组件骨架屏；
按照统一命名规则对所述组件骨架屏进行命名，并保存在组件项目中或者所述搭建系统可以访问目标存储位置中。


3.根据权利要求1所述的页面骨架屏生成方法，其特征在于，结合所述多个网页组件的参数生成真实页面文档，包括：
结合所述参数拼接所述多个网页组件，以获得所述真实页面文档；所述参数包括配置参数和样式参数。


4.根据权利要求1至3任一项所述的页面骨架屏生成方法，其特征在于，所述以目标页面结构注入，包括：
将所述骨架屏页面放置在挂载点的HTML节点同级结构之前。


5.根据权利要求4所述的页面骨架屏生成方法，其特征在于，还包括：
在所述目标页面中添加权限组件；所述权限组件的渲染内容包括无权访问的提示文案。


6.根据权利要求5所述的页面骨架...

【专利技术属性】
技术研发人员：崔玲玲，
申请(专利权)人：政采云有限公司，
类型：发明
国别省市：浙江;33