前言

　　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. 蓝桥杯练习 Day6 题解

    蓝桥杯练习 Day6 题解 A 题意:给你一个等式ax+by = c,问你x,y是否有整数解. 思路:gcd(a,b) = t,如果方程有解,那么\((a/t)*x + (b/t)*y = c/t\) ...

  2. 【LeetCode】116. 填充每个节点的下一个右侧节点指针 Populating Next Right Pointers in Each Node 解题报告（Python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 递归 日期 题目地址:https://leetcode ...

  3. Anniversary party(hdu1520)

    Anniversary party Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others ...

  4. Atcoder ABC137D：Summer Vacation（贪心）

    D - Summer Vacation Time Limit: 2 sec / Memory Limit: 1024 MB Score : 400 points Problem Statement T ...

  5. 「算法笔记」旋转 Treap

    一.引入 随机数据中,BST 一次操作的期望复杂度为 \(\mathcal{O}(\log n)\). 然而,BST 很容易退化,例如在 BST 中一次插入一个有序序列,将会得到一条链,平均每次操作的 ...

  6. ACE_Get_Opt函数笔记

    #include "ace/OS_NS_string.h" #include "ace/Configuration.h" #include "ace/ ...

  7. MySQL高级查询与编程笔记 • 【第3章 子查询】

    全部章节   >>>> 本章目录 3.1 子查询定义和单行子查询 3.1.1 子查询定义 3.1.2 单行子查询应用 3.1.4 实践练习 3.2 多行子查询应用 3.2.1 ...

  8. Java的发展简史

    Java是由Sun Microsystems公司(简称Sun公司)于1995 年 5 月推出的 Java程序设计语言和Java平台的总称.Java语言是一种可以撰写跨平台应用软件的面向对象的程序设计语 ...

  9. Java初学者作业——编写 Java 程序，用户输入 3 个操作数，分别求出最大值、最小值和平均值。

    返回本章节 返回作业目录 需求说明: 编写 Java 程序,用户输入 3 个操作数,分别求出最大值.最小值和平均值. 实现思路: 定义 Java 类,定义 3 个方法,用来求 3 个数字的最大值.最小 ...

  10. 使用 JavaScript 中的 document 对象的属性，根据下拉框中选择的属性，更改页面中的字体颜色和背景颜色

    查看本章节 查看作业目录 需求说明: 使用 JavaScript 中的 document 对象的属性,根据下拉框中选择的属性,更改页面中的字体颜色和背景颜色 实现思路: 在页面的 <body&g ...