前言

　　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. 【LeetCode】294. Flip Game II 解题报告 (C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 记忆化搜索 日期 题目地址:https://leetc ...

  2. 【九度OJ】题目1124：Digital Roots 解题报告

    [九度OJ]题目1124:Digital Roots 解题报告 标签(空格分隔): 九度OJ 原题地址:http://ac.jobdu.com/problem.php?pid=1124 题目描述: T ...

  3. 【LeetCode】144. Binary Tree Preorder Traversal 解题报告（Python&C++&Java）

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

  4. CLION 使用自己的makefile来运行

    之前参考过这里和这里,都是说要使用add_custom_target,无奈看不懂 但是前一篇里说它参考的是stackoverflow上的回答,去原帖里发现后来更新的第二高票答案!!!非常好用!!! 在 ...

  5. js处理复杂数据格式数组嵌套对象，对象嵌套数组，reduce处理数据格式

    let list=[ {id:1,name:'a'}, {id:1,name:'b'}, {id:1,name:'c'}, {id:2,name:'A'}, {id:2,name:'B'}, {id: ...

  6. [C++]使用vector描述线性表定义及基本操作

    #ifndef VECTORLIST_H #define VECTORLIST_H #include<iostream> #include"linearlist.h" ...

  7. Java Web程序设计笔记 • 【第7章 会话跟踪技术】

    全部章节   >>>> 本章目录 7.1 会话跟踪技术概述 7.1.1 为什么需要会话跟踪 7.1.2 会话的状态和跟踪 7.1.3 会话跟踪技术 7.1.4 会话跟踪工作流程 ...

  8. 简单查看windows蓝屏原因

    相信各位在使用windows(xp.7.8.1.10...)过程中都遇到过蓝屏的情况,而蓝屏时,系统会将其记录起来,并追踪到引起蓝屏的程序,以下内容将简单介绍一下如何查看引起windows蓝屏的原因: ...

  9. 初识python： 递归函数 - 分解质因数

    分解质因数: 任何一个合数都可以写成几个质数相乘的形式.其中每个质数都是这个合数的因数,叫做这个合数的分解质因数.分解质因数只针对合数. 比如: 8 分解质因数是:2*2*2 10分解质因数是:2*5 ...

  10. Linux命令查看各端口号占用情况

    yum -y install net-tools netstat -ntpl