electron-vue 项目添加启动loading动画的实现思路

Octavia ·

更新时间:2024-09-20

· 1614 次阅读

前言

　　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", //设置背景颜色
  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>

　　然后打包测试结果如下：