教育平台下的自动化生成项目骨架屏的方法及电子设备与流程

本发明涉及计算机技术领域，尤其涉及一种教育平台下的自动化生成项目骨架屏的方法及电子设备。

背景技术：

现有技术中，页面数据没有加载好之前，会使用loading(加载)图标进行显示，但这种显示，会使用户无法感知即将呈现的页面，也无法确定需要等待的时长，导致用户产生等待焦虑。另外，当下的前端项目都是js驱动，首先需要时间来解析js代码，在解析完成之前不会展示任何内容，会有白屏的展示。

因此，现有技术还有待于改进和发展。

技术实现要素：

鉴于上述现有技术的不足，本发明的目的在于提供一种教育平台下的自动化生成项目骨架屏的方法及电子设备，旨在解决现有技术中项目的页面数据加载方式有待优化的问题。

本发明的技术方案如下：

一种教育平台下的自动化生成项目骨架屏的方法，其中，包括步骤：

a、预先配置自定义的骨架加载器；

b、在项目的打包配置文件中添加所述骨架加载器；

c、在项目的原始页面的文件上添加骨架标记；

d、打包项目，并通过所述骨架加载器对具有骨架标记的文件进行处理，生成只有骨架样式的文件；

e、根据所述骨架样式的文件展示骨架屏页面，并随着页面数据的加载，展示原始页面。

所述的教育平台下的自动化生成项目骨架屏的方法，其中，所述步骤d具体包括：

将具有骨架标记的文件替换为默认背景，生成只有骨架样式的文件。

所述的教育平台下的自动化生成项目骨架屏的方法，其中，将具有骨架标记的文件替换为默认背景之后，判断具有骨架标记的文件是否有字体大小属性。

所述的教育平台下的自动化生成项目骨架屏的方法，其中，

若有字体大小属性，则清空文字，并生成只有骨架样式的文件；若无字体大小属性，则直接生成只有骨架样式的文件。

所述的教育平台下的自动化生成项目骨架屏的方法，其中，所述步骤d中，先提取具有骨架标记的文件，再通过所述骨架加载器对具有骨架标记的文件进行处理。

所述的教育平台下的自动化生成项目骨架屏的方法，其中，所述具有骨架标记的文件为js文件或jsx文件。

一种电子设备，其中，包括：

处理器，适于实现各指令，以及

存储设备，适于存储多条指令，所述指令适于由处理器加载并执行：

预先配置自定义的骨架加载器；

在项目的打包配置文件中添加所述骨架加载器；

在项目的原始页面的文件上添加骨架标记；

打包项目，并通过所述骨架加载器对具有骨架标记的文件进行处理，生成只有骨架样式的文件；

根据所述骨架样式的文件展示骨架屏页面，并随着页面数据的加载，展示原始页面。

所述的电子设备，其中，将具有骨架标记的文件替换为默认背景，生成只有骨架样式的文件。

一种非易失性计算机可读存储介质，其中，所述非易失性计算机可读存储介质存储有计算机可执行指令，该计算机可执行指令被一个或多个处理器执行时，可使得所述一个或多个处理器执行所述的教育平台下的自动化生成项目骨架屏的方法。

一种计算机程序产品，其中，所述计算机程序产品包括存储在非易失性计算机可读存储介质上的计算机程序，计算机程序包括程序指令，当程序指令被处理器执行时，使所述处理器执行所述的教育平台下的自动化生成项目骨架屏的方法。

有益效果：本发明中，通过生成骨架屏页面，使用户可直观感受到页面数据的加载过程；同时骨架屏页面可以平滑的切换到真实数据渲染的页面，避免使用loading图标，减少突兀的变化；同时减少用户因为等待时间不可预知而流失的情况。

附图说明

图1为本发明一种教育平台下的自动化生成项目骨架屏的方法较佳实施例的流程图。

图2为本发明一种电子设备较佳实施例的结构框图。

具体实施方式

本发明提供一种教育平台下的自动化生成项目骨架屏的方法及电子设备，为使本发明的目的、技术方案及效果更加清楚、明确，以下对本发明进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

请参阅图1，图1为本发明一种教育平台下的自动化生成项目骨架屏的方法较佳实施例的流程图，如图所示，其包括步骤：

s1、预先配置自定义的骨架加载器；

s2、在项目的打包配置文件中添加所述骨架加载器；

s3、在项目的原始页面的文件上添加骨架标记；

s4、打包项目，并通过所述骨架加载器对具有骨架标记的文件进行处理，生成只有骨架样式的文件；

s5、根据所述骨架样式的文件展示骨架屏页面，并随着页面数据的加载，展示原始页面。

本发明中，通过生成骨架屏页面，使用户可直观感受到页面数据的加载过程；同时骨架屏页面可以平滑的切换到真实数据渲染的页面，避免使用loading图标，减少突兀的变化；同时减少用户因为等待时间不可预知而流失的情况。

具体地，在所述步骤s1中，预先配置自定义的骨架加载器。

所述骨架加载器(react-skeletion-loader)是用来生成骨架屏页面。

react是一个用于构建用户界面的javascript库。react主要用于构建ui，即react是mvc中的v(视图)。react拥有较高的性能，代码逻辑非常简单。

react具有如下特点：1.声明式设计-react采用声明范式，可以轻松描述应用。2.高效-react通过对dom的模拟，最大限度地减少与dom的交互。3.灵活-react可以与已知的库或框架很好地配合。4.jsx-jsx是javascript语法的扩展。5.组件-通过react构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。6.单向响应的数据流-react实现了单向响应的数据流，从而减少了重复代码。

skeletion，也可称skeleton，其也可称为占位图片(或骨架)，skeleton就是在页面数据尚未加载前先给用户展示出页面的大致结构，直到请求数据返回后再渲染页面，补充进需要显示的数据内容。常用于文章列表、动态列表页的展示。

在所述步骤s2中，在项目的打包配置文件中添加所述骨架加载器。

此步骤中，具体是在项目的打包配置文件中js和jsx文件的配置中，添加所述骨架加载器。js：即javascript，一种直译式脚本语言，jsx:即javascriptxml-一种在react组建内部构建标签的类xml语法。

二者的区别是：浏览器只能识别普通的js，普通的css，并不能识别scss，或者jsx(scss是css的拓展，jsx可以看做是js的拓展)，所以webpack的作用是把scss转换为css，把jsx转换为浏览器可以识别的js，然后浏览器才能正常使用。js就是本身并不支持react里面的jsx(也就是在js文件里面直接写html那种)，现在可以直接写是因为编辑器可以选择语言的解析模式了，编辑器正确显示是因为虽然是.js文件，编辑器用了.jsx的解析模式，所以显示正确。3..jsx文件会自动触发编辑器以jsx的模式解析当前的文件，所以可以更不会出错。

在所述步骤s3中，在项目的原始页面的文件上添加骨架标记。

也就是说，在项目需要生成骨架屏的原始页面的文件上添加骨架标记。

具体是在js文件和jsx文件上添加骨架标记。也就是说，所述具有骨架标记的文件为js文件或jsx文件。

在所述步骤s4中，打包项目。在打包项目时，通过所述骨架加载器对具有骨架标记的文件进行处理，生成只有骨架样式的文件。

进一步，所述步骤s4具体包括：

将具有骨架标记的文件替换为默认背景，生成只有骨架样式的文件。

此处需要将标记有骨架的文件替换成默认背景，其中的，默认背景可以是指各种各样的背景图片或者其他背景素材。

进一步，所述步骤s4中，先提取具有骨架标记的文件，再通过所述骨架加载器对具有骨架标记的文件进行处理。

由于本发明中，已预先定义标记有骨架的文件为需要显示骨架屏的页面，所以需要先提取出具有骨架标记的文件，然后通过骨架加载器来对骨架标记的文件进行处理。

进一步，将具有骨架标记的文件替换为默认背景之后，判断具有骨架标记的文件是否有字体大小属性。

通过判断是否具有字体大小属性，可以判断该文件是否有文字，由于在显示骨架屏时，不需要显示文字，所以可对有文字的情况进行清理。

进一步，若有字体大小属性，则清空文字，并生成只有骨架样式的文件；若无字体大小属性，则直接生成只有骨架样式的文件。

即，如果有字体大小属性，则说明该文件有文字，需要清空文字，并替换为默认背景，从而显示相应的骨架屏。而如果没有字体大小属性，则可以替换为默认背景，直接生成只有骨架样式的文件即可。

在所述步骤s5中，根据所述骨架样式的文件展示骨架屏页面，并随着页面数据的加载，展示原始页面。

在展示骨架屏页面的过程中，原始页面的数据也在持续加载，当原始页面的数据全部加载完成，则可以展示原始页面，即真实页面，在原始页面的数据全部加载完成之前，则还是展示骨架屏页面。

请参阅图2，本发明还提供一种电子设备10，其包括：

处理器110，适于实现各指令，以及

存储设备120，适于存储多条指令，所述指令适于由处理器加载并执行：

预先配置自定义的骨架加载器；

在项目的打包配置文件中添加所述骨架加载器；

在项目的原始页面的文件上添加骨架标记；

打包项目，并通过所述骨架加载器对具有骨架标记的文件进行处理，生成只有骨架样式的文件；

根据所述骨架样式的文件展示骨架屏页面，并随着页面数据的加载，展示原始页面。

所述处理器110可以为通用处理器、数字信号处理器(dsp)、专用集成电路(asic)、现场可编程门阵列(fpga)、单片机、arm(acornriscmachine)或其它可编程逻辑器件、分立门或晶体管逻辑、分立的硬件组件或者这些部件的任何组合。还有，处理器还可以是任何传统处理器、微处理器或状态机。处理器也可以被实现为计算设备的组合，例如，dsp和微处理器的组合、多个微处理器、一个或多个微处理器结合dsp核、任何其它这种配置。

存储设备120作为一种非易失性计算机可读存储介质，可用于存储非易失性软件程序、非易失性计算机可执行程序以及模块，如本发明实施例中的教育平台下的自动化生成项目骨架屏的方法对应的程序指令。处理器通过运行存储在存储设备中的非易失性软件程序、指令以及单元，从而执行教育平台下的自动化生成项目骨架屏的方法的各种功能应用以及数据处理，即实现上述方法实施例。

进一步，将具有骨架标记的文件替换为默认背景，生成只有骨架样式的文件。

关于上述电子设备10的具体技术细节在前面的方法中已有详述，故不再赘述。

本发明还提供一种非易失性计算机可读存储介质，所述非易失性计算机可读存储介质存储有计算机可执行指令，该计算机可执行指令被一个或多个处理器执行时，可使得所述一个或多个处理器执行所述的教育平台下的自动化生成项目骨架屏的方法。

本发明还提供一种计算机程序产品，计算机程序产品包括存储在非易失性计算机可读存储介质上的计算机程序，计算机程序包括程序指令，当程序指令被处理器执行时，使所述处理器执行所述的教育平台下的自动化生成项目骨架屏的方法。

应当理解的是，本发明的应用不限于上述的举例，对本领域普通技术人员来说，可以根据上述说明加以改进或变换，所有这些改进和变换都应属于本发明所附权利要求的保护范围。