前言

　　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>Document</title>

    <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动画问题的更多相关文章

  1. 为 VUE 项目添加 PWA 解决发布后刷新报错问题

    为什么要给 VUE 项目添加 PWA 为什么要添加?因为不管是部署在 IIS,还是 nginx,每次应用部署后,再次访问因为旧的 js 已经不存在,所以页面访问的时候会整个报错,报错的结果就是一个白屏 ...

  2. 如何为你的 Vue 项目添加配置 Stylelint

    如何为你的 Vue 项目添加配置 Stylelint 现在已经是 9102 年了,网上许多教程和分享帖都已经过期,照着他们的步骤来会踩一些坑,如 stylelint-processor-html 已经 ...

  3. Vue项目添加动态浏览器头部title

    0. 直接上 预览链接 + 效果图 Vue项目添加动态浏览器头部title 1. 实现思路 ( 1 ) 从路由router里面得到组件的title ( 2 ) title存vuex (本项目已经封装h ...

  4. 前端单元测试，以及给现有的vue项目添加jest + Vue Test Utils的配置

    文章原址:https://www.cnblogs.com/yalong/p/11714393.html 背景介绍: 以前写的公共组件,后来需要添加一些功能,添加了好几次,每次修改我都要测试好几遍保证以 ...

  5. Xcode7创建的项目添加启动图有问题？

    在Xcode7下创建的项目,由于某个原因,Xcode7添加启动图有点不一样.Xcode7与Xcode6不一样的地方在于:Xcode6的LaunchScreen.xib改成了LaunchScreen.s ...

  6. Vue 项目添加单元测试发现的问题及解决

    用 Jest 测试单文件组件 1.安装 Jest 和 Vue Test Utils npm install --save-dev jest @vue/test-utils 2.配置 package.j ...

  7. 搭建vue项目并启动vue项目

    链接地址:https://blog.csdn.net/aa792978017/article/details/82939483 Vue.js是现在比较优秀的Web前端框架,下面开始从零开始搭建一个Vu ...

  8. Vue项目中出现Loading chunk {n} failed问题的解决方法

    最近有个Vue项目中会偶尔出现Loading chunk {n} failed的报错,报错来自于webpack进行code spilt之后某些bundle文件lazy loading失败.但是这个问题 ...

  9. 手把手教你创建electron+vue项目

    electron可以结合前端的很多框架来进行快速的开发.在这里只讲一种electron结合vue并且使用前端的elementui来快速搭建一个项目页面. 第一步.创建electron 以管理员身份运行 ...

随机推荐

  1. Practical Black-Box Attacks against Machine Learning

    目录 概 主要内容 Jacobian-based Dataset Augmentation Note Papernot N, Mcdaniel P, Goodfellow I, et al. Prac ...

  2. request参数获取，参数校验，参数处理

    需求: 1.post接口,需要在过滤器中进行参数校验,校验通过之后再执行方法 2.原有代码中使用x-www-form-urlencoded传参,新需求要使用json格式 3.原有代码校验过滤器使用Se ...

  3. c#16进制转浮点数单精度类型

    c#16进制转浮点数单精度类型: string s = "4144147B"; MatchCollection matches = Regex.Matches(s, @" ...

  4. [opencv]图像预处理方案及方式

    像识别中,图像质量的好坏直接影响识别算法的设计与效果精度,那么除了能在算法上的优化外,预处理技术在整个项目中占有很重要的因素,然而人们往往忽略这一点. 图像预处理,将每一个文字图像分检出来交给识别模块 ...

  5. Linux开关机与登录注销

    开机和重启 shutdown -h now:立即关机计算机 shutdown -h 1:1分钟后关机 halt:立即关机 reboot:立即重启 sync:把内存的数据同步到磁盘 注: shutdow ...

  6. Java初学者作业——声明变量对个人信息进行输入和输出

    返回本章节 返回作业目录 需求说明: 声明变量存储个人信息(姓名.年龄.性别.地址以及余额),通过键盘输入个人信息并存储在相应的变量中, 最后将个人信息输出. 实现思路: 声明存储姓名.年龄.性别.地 ...

  7. Java初学者作业——编写Java程序，实现用户登录验证。

    返回本章节 返回作业目录 需求说明: 编写Java程序,实现用户登录验证. 若用户名与密码输入正确,则提示"登录成功,欢迎回来!",若用户名与密码不匹配,则提示"用户名和 ...

  8. windows下的Python的下载与安装

    Python的下载 Python下载要去官网下载,xdm,这里是网址 www.python.org 因为是外网所以打开下载会慢一些(不要着急的说) 这是python官网界面,跟着图片去下载(因为我这会 ...

  9. Linux 进程调度

    线程状态(context) 程序计数器(Program Counter),它表示当前线程执行指令的位置. 保存变量的寄存器. 程序的Stack.通常来说每个线程都有属于自己的Stack,Stack记录 ...

  10. APP自动化，怎样让应用不重置？

    noReset =True产生的背景: 在编写APP自动化代码时,除了登录用例需要填写账号和密码外,其余很多用例都是需要先登录再操作的,如果每一个用例都从头开始到具体的操作,这样将会耗费很多时间,此时 ...