前言

　　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. iOS越狱插件源查找及避免插件劫持

    1.关于 iOS越狱插件源查找地址:https://www.ios-repo-updates.com/ 2.注意 不要使用不可靠的第三方源,其可能存在劫持,而你却茫然不知. 使用上面的网站查找你需要的 ...

  2. 获得MATLAB中FIG文件的矩阵

    在拓扑优化中,经常使用imagesc函数来显示最终的结果,往往会保存了Fig文件,却忘记保存mat文件. 根据已有的Fig文件,是可以找到其所显示矩阵.这个是我从fig数据结构中一层一层找到的,记录一 ...

  3. hdu 5592 ZYB's Premutation(线段树优化)

    设f_if​i​​是第ii个前缀的逆序对数,p_ip​i​​是第ii个位置上的数,则f_i-f_{i-1}f​i​​−f​i−1​​是ii前面比p_ip​i​​大的数的个数.我们考虑倒着做,当我们处理 ...

  4. poj 2566Bound Found(前缀和，尺取法)

    http://poj.org/problem?id=2566: Bound Found Time Limit: 5000MS   Memory Limit: 65536K Total Submissi ...

  5. 海康威视摄像机Java SDK拉流（二）开启关闭实时预览

    本篇介绍海康威视摄像机通过SDK开启关闭实时预览接口 下篇介绍实时预览的回调函数及解码库 测试环境: 系统:Centos 7 SDK:设备网络SDK Linux64 实时预览模块流程: 图中虚线框部分 ...

  6. 【项目管理】《IT项目管理》Kathy Schwalbe 第1章 总论

    博主:海底淤泥 1.为什么项目管理领域引起了大家的兴趣 1.更好控制财力.物力.人力资源 2.改进客户关系 3.缩短开发时间 4.降低成本和提高生产率 5.提高质量和可靠性 6.更大的边际利益空间 7 ...

  7. Generating Adversarial Examples with Adversarial Networks

    目录 概 主要内容 black-box 拓展 Xiao C, Li B, Zhu J, et al. Generating Adversarial Examples with Adversarial ...

  8. vue递归过滤树结构数组

    let arr=[{ title:'1', key:'1', type:0, children:[{ title:'1-1', key:'1-1', type:0, }] },{ title:'2', ...

  9. Rank & Sort Loss for Object Detection and Instance Segmentation 论文解读（含核心源码详解）

    第一印象 Rank & Sort Loss for Object Detection and Instance Segmentation 这篇文章算是我读的 detection 文章里面比较难 ...

  10. 使用 Android Studio 开发工具创建一个 Android 应用程序，显示一行文字“Hello Android”，并将应用程序的名称更改为“FirstApp”。

    需求说明: 使用 Android Studio 开发工具创建一个 Android 应用程序,显示一行文字"Hello Android",并将应用程序的名称更改为"Firs ...