前言

　　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】716. Max Stack 解题报告(C++)

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

  2. 【九度OJ】题目1187：最小年龄的3个职工 解题报告

    [九度OJ]题目1187:最小年龄的3个职工 解题报告 标签(空格分隔): 九度OJ http://ac.jobdu.com/problem.php?pid=1187 题目描述: 职工有职工号,姓名, ...

  3. F. Geometrical Progression

    http://codeforces.com/problemset/problem/758/F F. Geometrical Progression time limit per test 4 seco ...

  4. 【LeetCode】769. Max Chunks To Make Sorted 解题报告（Python & C++）

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

  5. Lightoj1011 - Marriage Ceremonies

    1011 - Marriage Ceremonies   PDF (English) Statistics Forum Time Limit: 2 second(s) Memory Limit: 32 ...

  6. HDU 4790：Just Random（容斥）

    Just Random Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total S ...

  7. 第十五个知识点:RSA-OAEP和ECIES的密钥生成,加密和解密

    第十五个知识点:RSA-OAEP和ECIES的密钥生成,加密和解密 1.RSA-OAEP RSA-OAEP是RSA加密方案和OAEP填充方案的同时使用.现实世界中它们同时使用.(这里介绍的只是&quo ...

  8. Globally-Robust Neural Networks

    目录 概 主要内容 代码 Leino K., Wang Z. and Fredrikson M. Globally-robust neural networks. In International C ...

  9. An Introduction to Measure Theory and Probability

    目录 Chapter 1 Measure spaces Chapter 2 Integration Chapter 3 Spaces of integrable functions Chapter 4 ...

  10. [Open Source]基于YOLOv3与Django框架的Web应用-YOLOv3_Detect_Web

    YOLOv3_Detect_Web Use Yolov3 detect on Web 使用 YOLOv3(PyTorch 和 Django 实现)的对象检测应用程序. 网页和 REST API由Dja ...