前言

electron-vue脚手架搭建的项目，在开发阶段可能你注意不到项目启动慢的问题，但是在build 生成的exe可执行文件，启动后，要反应很久才能进入到app.vue 中加载的页面，体验性很差。

正文

针对上诉问题，产生的原因是在渲染进程加载vue的时候，特别慢，为了提高用户体验，我们的项目可以在启动的时候添加一个loading动画，然后再进入app.vue的页面。

实现思路

我们可以通过一个单独的启动窗口来创建loading页面，在项目中其他准备工作未完成时出现在用户的视野中给用户一定的反馈，等准备工作完成后，通过渲染进程向主进程发送准备完毕的消息，关闭启动窗口即可。

（1）设置启动页面

loading动画可以写在一个单独的html页面，属于静态资源，electron-vue 官网推荐，把静态资源存放在 /static 目录下即可，创建loading.html

DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Documenttitle><style>body{margin: 0;padding: 0;overflow: hidden;background:rgba(0,0,0,.5)}body::-webkit-scrollbar{display: none;}img{width: 200px;height: 200px;}style>
head>
<body><img src="./\_.gif" alt="" srcset="">
body>
html>

（2）修改主进程的index.js ，如下：

import { app, BrowserWindow, ipcMain } from "electron";
import "../renderer/store";if (process.env.NODE\_ENV !== "development") {global.\_\_static = require("path").join(\_\_dirname, "/static").replace(/\\/g, "\\\\");
}let mainWindow, loadingWindow;
const winURL =process.env.NODE\_ENV === "development"? `http://localhost:9080`: `file://${\_\_dirname}/index.html`;const loadingURL =process.env.NODE\_ENV === "development" //加载loading.html页面地址? require("path").join(\_\_static, "loading.html"): `file://${\_\_static}/loading.html`;const showLoading = (cb) => {loadingWindow = new BrowserWindow({show: false,frame: false, // 无边框（窗口、工具栏等），只包含网页内容width: 200,height: 200,resizable: false,transparent: true, // 窗口是否支持透明，如果想做高级效果最好为true});loadingWindow.once("show", cb);loadingWindow.loadURL(loadingURL);loadingWindow.show();
};const createWindow = () => {mainWindow = new BrowserWindow({webPreferences: {nativeWindowOpen: true,title: "主窗口",},height: 563,width: 1000,useContentSize: true,fullscreen: true, // 是否全屏frame: false, //是否显示窗口边框backgroundColor: "#000000", //设置背景颜色show: false,});mainWindow.loadURL(winURL); mainWindow.once("ready-to-show", () => {loadingWindow.hide();loadingWindow.close();mainWindow.show();});
};app.on("ready", () => {showLoading(createWindow);
});

上面的代码中，app在监听到ready事件时，执行showLoading方法，传入了createWindow 方法为参数，首先创建loadinWindow窗口，然后注册show事件，loading窗口加载了loading.html 页面后，去加载mainWindow窗口，改窗口加载了页面app.vue（即index.html）内容，并注册了 " ready-to-show "事件，改事件用于关闭loading窗口，显示mainWindow窗口。

注意：electron-vue 提供了一个名为 __static 的全局变量，它将产生一个指向 static/ 目录的正确路径。

（3）在app.vue中调用 " ready-to-show " 事件

<template><div id="app"><router-view>router-view>div>
template><script>
export default {name: "person-clsoe-system",created() {this.$electron.ipcRenderer.send("ready-to-show");},
};
script><style>
/* CSS */
style>

然后打包测试结果如下：

写在最后

以上就是本文的全部内容，希望给读者带来些许的帮助和进步，方便的话点个关注，小白的成长之路会持续更新一些工作中常见的问题和技术点。

electron-vue 项目添加启动loading动画问题相关推荐

为 VUE 项目添加 PWA 解决发布后刷新报错问题
为 VUE 项目添加 PWA 解决发布后刷新报错问题参考文章: (1)为 VUE 项目添加 PWA 解决发布后刷新报错问题 (2)https://www.cnblogs.com/morang/p/9 ...
vue项目引入标签云动画js函数，不执行
vue项目引入标签云动画js函数,数据重新渲染了,但是动画不执行了 rollTagCloud() {/* 3D标签云滚动函数*/const timer = setTimeout(() => {t ...
electron+vue项目打包时修改注册表功能
electron+vue项目打包时修改注册表功能原因在使用electron做项目时,由于产品需要做一个放大镜功能.在查找了网上大部分类似需求后,发现大部分的放大镜都是对图片的放大,真正实现放大镜功 ...
vue 项目中使用 Loading 组件
当在vue项目中请求后台接口时,常常会使用 loding 过渡数据的加载时间. 如果 loading 作为一个全局的加载状态,应该写在项目中的App.vue中 <template>< ...
vue项目添加百度统计
第一步:准备工作 1.使用百度账号登录百度统计平台(没有百度账号先注册一个) https://tongji.baidu.com/web/welcome/login 2.登录后进入管理 >账户管理 ...
前端报错如何在服务器中显示,详解Vue项目中出现Loading chunk {n} failed问题的解决方法...
最近有个Vue项目中会偶尔出现Loading chunk {n} failed的报错,报错来自于webpack进行code spilt之后某些bundle文件lazy loading失败.但是这个问题 ...
在vue项目中使用Lottie动画(随看随用)
前言: Lottie是一个IOS,Android和React Native库,可以实时渲染动画,动画被转化成JSON文件,节省了很多资源,允许应用程序像使用静态图像一样轻松使用动画.网上也有丰富的动画 ...
VUE项目开发启动命令
idea导入vue项目 npm install 安装依赖包 npm run serve 启动项目 npm bulid 项目打包,在命令行界面执行在执行这些命令的时候,需要安装node环境,可以使用 ...
VUE项目中集成AnimateCSS动画（2020.6.28 亲测可用）
目录在 Vue 项目中使用 animate.css 第一步:安装第二步:引入及使用第三步:页面中使用(相比网上搜到的教程,有改动的地方) 如何找到想要的动画题外话 vue 方式给元素绑定进入动 ...

electron-vue 项目添加启动loading动画问题

Python微信订餐小程序课程视频

Python实战量化交易理财系统

前言

正文