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

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

背景技术：

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

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

技术实现思路

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

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

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

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

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

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

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

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

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

技术特征：

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

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

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

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

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

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

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

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

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

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

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

技术研发人员：熊智伟
受保护的技术使用者：深圳乐信软件技术有限公司
技术研发日：
技术公布日：2024/5/29