Rendering method, system and equipment for first-screen animation in single-page application and medium

Abstract

The invention discloses a rendering method, system and device for a first-screen animation in a single-page application and a medium. The method comprises the following steps of executing Vue project initialization and animation resource file creation; creating a CSS position adjustment plug-in and an animation injection plug-in in the Vue project; a CSS position adjustment plug-in and an animation injection plug-in are introduced into the animation resource file, and routing hook configuration is carried out; performing animation injection and CSS position adjustment based on the CSS position adjustment plug-in and the animation injection plug-in in the page construction process; performing connection processing between animation removal and page rendering based on the routing hook; according to the method, the animation code can be automatically injected through the plug-in, bloating of index.html is avoided, the maintainability is improved, the CSS loading position can be flexibly adjusted, blocking of animation rendering is prevented, the animation is automatically removed based on routing mounting, and the interactive experience is optimized.

Description

Technical Field

[0001] This invention relates to the field of software development technology, and in particular to a method, system, device, and medium for rendering the first screen animation in a single-page application. Background Technology

[0002] In the front-end and back-end separation development paradigm, single-page applications (SPAs) built on Vite and Vue have become the mainstream of H5 development. These applications adopt a client-side rendering mode, and the initial returned HTML only contains external resource references. The page content needs to be dynamically generated by the script after the browser completes the download and parsing of resources, which leads to the "white screen" problem faced by users during resource loading. As business complexity increases, the size of the resources dependent on the first screen increases, the white screen time is prolonged, and the user experience is seriously affected.

[0003] To alleviate the above problems, existing solutions often directly incorporate the initial loading animation into the index.html template, but this approach has the following drawbacks:

[0004] (1) The deep coupling between animation code and template code can easily cause index.html to become bloated and increase maintenance costs.

[0005] (2) The code is not flexible and cannot be dynamically optimized and adjusted according to the actual content of index.html after construction, making it difficult to adapt to diverse project construction needs. Summary of the Invention

[0006] The purpose of this invention is to provide a method, system, device, and medium for rendering the first screen animation in a single-page application, thereby solving all or one of the aforementioned problems in the prior art.

[0007] To solve the above-mentioned technical problems, the specific technical solution of the present invention is as follows:

[0008] On one hand, the present invention provides a method for rendering the first screen animation in a single-page application, comprising the following steps:

[0009] Core component initialization steps:

[0010] Perform Vue project initialization and create animation resource files;

[0011] Plugin development steps:

[0012] Create a CSS position adjustment plugin and an animation injection plugin in the Vue project;

[0013] Animation rendering steps:

[0014] The CSS position adjustment plugin and the animation injection plugin are included in the animation resource file, and route hooks are configured.

[0015] In response to the page build command, during the page build process, animation injection and CSS position adjustment are performed based on the CSS position adjustment plugin and the animation injection plugin;

[0016] In response to the preview command after the page is built, the connection between animation removal and page rendering is handled based on the route hook.

[0017] Furthermore, the Vue project initialization further includes:

[0018] Run the command `npm create vue@latest` to create a Vue project that integrates Vite's build capabilities.

[0019] Furthermore, the creation of the animation resource file further includes:

[0020] Create a new file named loading.html in the root directory of the Vue project as the resource carrier for the first screen animation. Configure the animation style definition tag, animation structure building tag, and animation removal tag in the loading.html file.

[0021] Furthermore, the creation of the CSS position adjustment plugin and animation injection plugin in the Vue project further includes:

[0022] Create a folder named vite-plugin in the root directory of the Vue project;

[0023] In the vite-plugin folder, set up a CSS position adjustment plugin to prevent external CSS loading from blocking animation rendering, and an animation injection plugin to inject the loading animation defined in loading.html into index.html.

[0024] Furthermore, the operation logic of the CSS position adjustment plugin further includes:

[0025] First, the extractAndRemoveStylesheets function is used to extract the hrefs of the CSS in the htlm file and remove the original references;

[0026] Then, the main function moveCssToBodyPlugin, which takes effect during the build phase, is used in conjunction with the transformIndexHtml hook to generate a link tag and inject it at the starting position.

[0027] Furthermore, the operation logic of the animation injection plugin further includes:

[0028] First, the animation code is read using the getLoadingRawByHtmlTemplate function;

[0029] Then, the main function `injectLoading`, executed via POST, uses the `transformIndexHtml` hook to insert the read animation code before the first element and returns a new HTML file.

[0030] Furthermore, the routing hook configuration further includes:

[0031] In response to the initial loading animation and after the route is mounted, the `window.unMountGlobalLoading` function is called in the `router.afterEach` callback function to remove the initial loading animation, thus making the animation seamless with the page content.

[0032] On the other hand, the present invention also provides a rendering system for the first screen animation in a single-page application, comprising:

[0033] The core component initialization module is used to: perform Vue project initialization and create animation resource files;

[0034] The plugin development module is used to create CSS positioning plugins and animation injection plugins in the Vue project.

[0035] The animation rendering module is used to: import the CSS position adjustment plugin and the animation injection plugin into the animation resource file, and configure route hooks; respond to the page build command, inject animation and adjust CSS position based on the CSS position adjustment plugin and the animation injection plugin during the page build process; and respond to the preview command after the page build is completed, perform connection processing between animation removal and page rendering based on the route hooks.

[0036] On the other hand, the present invention also provides a computer-readable storage medium storing a computer program, wherein the computer program, when executed by a processor, implements the steps of the rendering method for the first screen animation in the single-page application.

[0037] On the other hand, the present invention also provides a computer device, the computer device including a processor, a communication interface, a memory, and a communication bus, wherein the processor, the communication interface, and the memory communicate with each other through the communication bus; wherein:

[0038] The memory is used to store computer programs;

[0039] The processor is configured to execute the steps of the rendering method for the first screen animation in the single-page application by running a program stored in the memory.

[0040] The beneficial effects of the technical solution of this invention are:

[0041] 1. The rendering method for the first screen animation in a single-page application described in this invention can automatically inject animation code through a plugin, decouple the animation from the template code, avoid bloated index.html, and improve maintainability; it can flexibly adjust the CSS loading position to prevent it from blocking animation rendering; it automatically removes the animation after the route is mounted, optimizing the interactive experience; and it eliminates the need to manually write animation code into the template, improving development efficiency and solution flexibility, making up for the shortcomings of existing technologies, and has high application value.

[0042] 2. The rendering system for the first screen animation in a single-page application described in this invention can achieve the rendering method for the first screen animation in a single-page application described in this invention through the cooperation of system modules.

[0043] 3. The computer-readable storage medium of the present invention can enable the system module to cooperate in order to realize the rendering method of the first screen animation in the single-page application of the present invention, and the computer-readable storage medium of the present invention also effectively improves the operability of the rendering method of the first screen animation in the single-page application.

[0044] 4. The computer device described in this invention can store and execute the computer-readable storage medium, thereby realizing the rendering method of the first screen animation in the single-page application described in this invention. Attached Figure Description

[0045] To more clearly illustrate the specific embodiments of the present invention or the technical solutions in the prior art, the drawings used in the description of the specific embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of the present invention. For those skilled in the art, other drawings can be obtained from these drawings without creative effort.

[0046] Figure 1 This is a flowchart illustrating the rendering method of the first screen animation in a single-page application as described in Embodiment 1 of the present invention;

[0047] Figures 2-4 This is a schematic diagram of the relevant code for step S100 in the rendering method of the first screen animation in the single-page application described in Embodiment 1 of the present invention;

[0048] Figures 5-8 This is a schematic diagram of the relevant code for step S200 in the rendering method of the first screen animation in the single-page application described in Embodiment 1 of the present invention;

[0049] Figures 9-13 This is a schematic diagram of the relevant code for step S300 in the rendering method of the first screen animation in the single-page application described in Embodiment 1 of the present invention;

[0050] Figure 14 This is a schematic diagram of the architecture of the rendering system for the first screen animation in the single-page application described in Embodiment 2 of the present invention;

[0051] Figure 15 This is a schematic diagram of the structure of the computer device described in Embodiment 4 of the present invention;

[0052] The markings in the attached diagram are explained as follows:

[0053] 1501. Processor; 1502. Communication interface; 1503. Memory; 1504. Communication bus. Detailed Implementation

[0054] The preferred embodiments of the present invention will now be described in detail with reference to the accompanying drawings, so that the advantages and features of the present invention can be more easily understood by those skilled in the art, thereby providing a clearer and more explicit definition of the scope of protection of the present invention.

[0055] In the description of this invention, it should be noted that the embodiments described in this invention are only some embodiments of this invention, not all embodiments; all other embodiments obtained by those skilled in the art based on the embodiments of this invention without creative effort are within the scope of protection of this invention.

[0056] The terms "first," "second," etc., used in this specification, claims, and accompanying drawings are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such data can be interchanged where appropriate so that the embodiments described herein can be implemented in orders other than those illustrated or described herein. Furthermore, the terms "comprising" and "having," and any variations thereof, are intended to cover a non-exclusive inclusion; for example, a process, method, apparatus, product, or device that comprises a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to such processes, methods, products, or devices.

[0057] Example 1

[0058] This embodiment provides a method for rendering the first screen animation in a single-page application, such as... Figures 1-13 As shown, it includes the following steps:

[0059] The core functionality of this method lies in: based on the Vite build tool and the Vue framework, by developing a customized Vite plugin, to achieve automatic injection of the first-screen loading animation and CSS loading optimization. In other words, it utilizes Vite's hook mechanism to dynamically modify HTML content, as detailed below:

[0060] S100, core component initialization steps, including:

[0061] S101. Project Initialization: Execute the command "npm create vue@latest" using the command line tool to create a Vue project named "vite-project". This project integrates Vite's build capabilities, providing a basic environment for subsequent plugin development and operation.

[0062] S102. Creating Animation Resource Files: Create a new file named loading.html in the project root directory. This file will serve as the resource carrier for the first screen animation, used to place related element structures, remove animation logic, etc. The file contains three core parts:

[0063] (1) <style>标签，其中定义了动画样式，设置固定定位、动画效果等属性以确保视觉展示，相关代码如图2所示；

[0064] （2）标签，其中构建了动画DOM结构，包含"加载中”文本及动态点元素，相关代码如图3所示；

[0065] （3）<script>标签，其中定义了unMountGlobalLoading函数（移除动画函数），实现动画元素的查询与移除逻辑，并将该函数挂载至window对象供全局调用，相关代码如图4所示。

[0066] S103、Vite插件目录搭建：在项目根目录创建"vite-plugin”文件夹，用于存放两个定制化Vite插件，即：CSS位置调整插件（move-css-to-body.js）与动画注入插件（inject-loading.js），实现功能模块化拆分。

[0067] S200、插件开发步骤，包括：

[0068] S201、创建CSS位置调整插件：该插件核心功能为避免外链CSS加载阻塞动画渲染；

[0069] 定义extractAndRemoveStylesheets函数，该函数用于：接收一个html字符串参数，定义用于存放css的href的hrefs数组，之后通过正则匹配从HTML字符串中提取所有css，将其提取并存入hrefs数组中，删除hrefs数组中的原css，最终返回一个包含hrefs和处理后html的两个字段的对象，相关代码如图5所示；

[0070] 定义插件主函数（即默认导出函数moveCssToBodyPlugin），该函数用于：返回一个插件对象，插件名称赋值为move-css-to-body，指定插件应用场景为"build”阶段；之后定义transformIndexHtml钩子，在transformIndexHtml钩子中将获取的html字符串传入上述提取函数，得到hrefs和newHtml两个字段，并返回newHtml和通过hrefs生成的link标签描述符对象数组；之后通过"injectTo: 'body-prepend'”配置将生成的link数组注入至<body>标签起始位置，相关代码如图6所示。

[0071] 需要说明的是，CSS位置调整插件用于将构建后的index.html文件内<head>标签中的外链css移动至<body>中，进而避免<head>中的css加载阻塞loading动画渲染；由于打包后index.html中<script>标签的属性type都是module，这些延迟脚本不会阻塞渲染，所以无需处理。

[0072] S202、创建动画注入插件：该插件用于将loading.html中定义的加载动画（即对应的动画代码）注入index.html；

[0073] 定义getLoadingRawByHtmlTemplate读取函数，用于：获取loadind.html文件中定义的动画代码，操作相关代码如图7所示；

[0074] 定义插件主函数injectLoading，用于：调用上述读取函数获取上述动画代码，并赋值给loadingHtml参数，然后返回一个插件对象，插件名称赋值为inject-loading，设置插件执行顺序为"post”（后置）；之后定义transformIndexHtml钩子，在transformIndexHtml钩子中通过正则替换，将动画代码插入至index.html的<body>标签内首个元素之前，确保动画元素优先渲染，最终返回新的html，操作相关代码如图8所示。

[0075] S300、动画渲染步骤，包括：

[0076] S301、插件集成：在vite.config.js配置文件中，通过import语句引入CSS位置调整插件（move-css-to-body.js）与动画注入插件（inject-loading.js），操作相关代码如图9所示。

[0077] S302、路由钩子配置：在src / router / index.js中，通过router.afterEach方法在router.afterEach回调函数中调用window.unMountGlobalLoading函数移除首屏加载动画，实现动画与页面内容的无缝衔接，操作相关代码如图10所示。

[0078] S303、构建与预览：在命令行执行"npm run build”命令触发项目构建，Vite在构建过程中调用插件完成动画注入与CSS位置调整，构建完成后，最终生成的html里面包含了加载动画的全部代码并且<head>中的css移动到了加载动画相关代码的下方；构建完成后执行"npm run preview”命令进行本地预览，可观察到首屏加载时动画正常展示，路由挂载后router.afterEach传入的回调unMountGlobalLoading就会执行移除加载动画，动画自动消失，能看到页面渲染的内容；最终生成的index.html中动画代码与调整后的CSS标签均按预期存在，操作相关代码如图11~图13所示。

[0079] 需要说明的是，上述举例仅仅是为了解释本发明，并不能因此限定本发明的保护范围。

[0080] 实施例2

[0081] 本实施例基于与实施例1中所述的一种单页应用中首屏动画的渲染方法相同的发明构思，提供一种单页应用中首屏动画的渲染系统，如图14所示，包括：

[0082] 核心组件初始化模块，用于：执行Vue项目初始化以及动画资源文件的创建；

[0083] 插件开发模块，用于：在所述Vue项目中创建CSS位置调整插件和动画注入插件；

[0084] 动画渲染模块，用于：在所述动画资源文件中引入所述CSS位置调整插件和所述动画注入插件，并进行路由钩子配置；响应于页面构建命令，在页面构建过程中基于所述CSS位置调整插件和所述动画注入插件进行动画注入与CSS位置调整；响应于页面构建完成后的预览命令，基于所述路由钩子进行动画移除与页面渲染间的衔接处理。

[0085] 所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，上述描述的系统、装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

[0086] 实施例3

[0087] 本实施例提供一种计算机可读存储介质，包括：

[0088] 所述存储介质用于储存将上述实施例1所述的单页应用中首屏动画的渲染方法实现所用的计算机软件指令，其包含用于执行上述为所述单页应用中首屏动画的渲染方法所设置的程序；具体的，该可执行程序可以内置在实施例2所述的单页应用中首屏动画的渲染系统中，这样，单页应用中首屏动画的渲染系统就可以通过执行内置的可执行程序实现所述实施例1所述的单页应用中首屏动画的渲染方法。

[0089] 此外，本实施例具有的计算机可读存储介质可以采用一个或多个可读存储介质的任意组合，其中，可读存储介质包括电、光、电磁、红外线或半导体的系统、装置或器件，或者以上任意组合。

[0090] 实施例4

[0091] 本实施例提供一种电子设备，如图15所示，电子设备可以包括：处理器1501、通信接口1502、存储器1503和通信总线1504，其中，处理器1501，通信接口1502，存储器1503通过通信总线1504完成相互间的通信。

[0092] 存储器1503，用于存放计算机程序；

[0093] 处理器1501，用于执行存储器1503上所存放的计算机程序时，实现上述实施例1中所述单页应用中首屏动画的渲染方法的步骤。

[0094] 作为本发明的一种实施方式，上述终端提到的通信总线可以是外设部件互连标准(Peripheral Component Interconnect，简称PCI)总线或扩展工业标准结构(ExtendedIndustry Standard Architecture，简称EISA)总线等。该通信总线可以分为地址总线、数据总线、控制总线等。为便于表示，图15中仅用一条粗线表示，但并不表示仅有一根总线或一种类型的总线。

[0095] 作为本发明的一种实施方式，通信接口用于上述终端与其他设备之间的通信。

[0096] 作为本发明的一种实施方式，存储器可以包括随机存取存储器(Random AccessMemory，简称RAM)，也可以包括非易失性存储器(non-volatile memory)，例如至少一个磁盘存储器。可选的，存储器还可以是至少一个位于远离前述处理器的存储装置。

[0097] 作为本发明的一种实施方式，上述的处理器可以是通用处理器，包括中央处理器(Central Processing Unit，简称CPU)、网络处理器(Network Processor，简称NP)等；还可以是数字信号处理器(Digital Signal Processing，简称DSP)、专用集成电路(Application Specific Integrated Circuit，简称ASIC)、现场可编程门阵列(Field－Programmable Gate Array，简称FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。

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

[0099] 还应理解，在本文实施例中，术语"和 / 或”仅仅是一种描述关联对象的关联关系，表示可以存在三种关系。例如，A和 / 或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，本文中字符" / ”，一般表示前后关联对象是一种"或”的关系。

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

[0101] 在本文所提供的几个实施例中，应该理解到，所揭露的系统、装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另外，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口、装置或单元的间接耦合或通信连接，也可以是电的，机械的或其它的形式连接。

[0102] 所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本文实施例方案的目的。

[0103] 另外，在本文各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以是两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

[0104] 所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本文的技术方案本质上或者说对现有技术做出贡献的部分，或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本文各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。

[0105] 以上所述仅为本发明的实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。< / style>

Claims

1. A method for rendering the first screen animation in a single-page application, characterized in that, Includes the following steps: Core component initialization steps: Perform Vue project initialization and create animation resource files; Plugin development steps: Create a CSS position adjustment plugin and an animation injection plugin in the Vue project; Animation rendering steps: The CSS position adjustment plugin and the animation injection plugin are included in the animation resource file, and route hooks are configured. In response to the page build command, during the page build process, animation injection and CSS position adjustment are performed based on the CSS position adjustment plugin and the animation injection plugin; In response to the preview command after the page is built, the connection between animation removal and page rendering is handled based on the route hook.

2. The rendering method for the first screen animation in a single-page application according to claim 1, characterized in that: The Vue project initialization further includes: Run the command `npm create vue@latest` to create a Vue project that integrates Vite's build capabilities.

3. The rendering method for the first screen animation in a single-page application according to claim 1, characterized in that: The creation of the animation resource file further includes: Create a new file named loading.html in the root directory of the Vue project as the resource carrier for the first screen animation. Configure the animation style definition tag, animation structure building tag, and animation removal tag in the loading.html file.

4. The rendering method for the first screen animation in a single-page application according to claim 1, characterized in that: The creation of the CSS position adjustment plugin and animation injection plugin in the Vue project further includes: Create a folder named vite-plugin in the root directory of the Vue project; In the vite-plugin folder, set up a CSS position adjustment plugin to prevent external CSS loading from blocking animation rendering, and an animation injection plugin to inject the loading animation defined in loading.html into index.html.

5. The rendering method for the first screen animation in a single-page application according to claim 4, characterized in that: The operation logic of the CSS position adjustment plugin further includes: First, the extractAndRemoveStylesheets function is used to extract the hrefs of the CSS in the htlm file and remove the original references; Then, the main function moveCssToBodyPlugin, which takes effect during the build phase, is used in conjunction with the transformIndexHtml hook to generate a link tag and inject it at the starting position.

6. The rendering method for the first screen animation in a single-page application according to claim 4, characterized in that: The operation logic of the animation injection plugin further includes: First, the animation code is read using the getLoadingRawByHtmlTemplate function; Then, the main function `injectLoading`, executed via POST, uses the `transformIndexHtml` hook to insert the read animation code before the first element and returns a new HTML file.

7. The rendering method for the first screen animation in a single-page application according to claim 1, characterized in that: The routing hook configuration further includes: In response to the initial loading animation and after the route is mounted, the `window.unMountGlobalLoading` function is called in the `router.afterEach` callback function to remove the initial loading animation, thus making the animation seamless with the page content.

8. A rendering system for the first screen animation in a single-page application, characterized in that, include: The core component initialization module is used to: perform Vue project initialization and create animation resource files; The plugin development module is used to create CSS positioning plugins and animation injection plugins in the Vue project. The animation rendering module is used to: import the CSS position adjustment plugin and the animation injection plugin into the animation resource file, and configure route hooks; In response to the page build command, during the page build process, animation injection and CSS position adjustment are performed based on the CSS position adjustment plugin and the animation injection plugin; In response to the preview command after the page is built, the connection between animation removal and page rendering is handled based on the route hook.

9. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program that, when executed by a processor, implements the steps of the rendering method for the first-screen animation in any one of claims 1 to 7 in a single-page application.

10. A computer device, characterized in that, It includes a processor, a communication interface, a memory, and a communication bus, wherein the processor, the communication interface, and the memory communicate with each other through the communication bus; wherein: The memory is used to store computer programs; The processor is configured to execute the steps of the rendering method for the first screen animation in any one of claims 1 to 7 in a single-page application by running a program stored in the memory.

Images