electron-vue 项目添加启动loading动画的实现思路
作者：Serendipity 时间：2023-07-02 16:52:41
前言
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>
然后打包测试结果如下：
来源：https://www.cnblogs.com/zaishiyu/p/15847072.html
0
投稿猜你喜欢
详解Django CAS 解决方案
Python控制台输出时刷新当前行内容而不是输出新行的实现
Vue组件渲染与更新实现过程浅析
Adobe发布Flash Player 10正式版
ajax代理程序,自动判断字符编码
opencv之为图像添加边界的方法示例
python分分钟绘制精美地图海报
sql将时间类型转换为字符串类型汇总
解决Python spyder显示不全df列和行的问题
python xlsxwriter创建excel图表的方法
python 执行函数的九种方法
MySQL启用慢查询日志记录方法
两个css郁闷的发现
Go实现文件上传和下载
JavaScript几种弹窗事件的使用
详解python3安装pillow后报错没有pillow模块以及没有PIL模块问题解决
django 多数据库及分库实现方式
Javascript的一种模块模式
python实现logistic分类算法代码
