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
猜你喜欢
- threading.Event机制类似于一个线程向其它多个线程发号施令的模式,其它线程都会持有一个threading.Event的对象,这些
- 本文实例讲述了Python实现更改图片尺寸大小的方法。分享给大家供大家参考,具体如下:1、PIL包推荐Pillow 。2、源码:#encod
- Go文档中展示了多种方式实现外部资源嵌入,包括文本文件、图片、ios文件等:文本文件package mainimport _ "e
- aspImage是ServerObjects站点上非常好的一个组件,它可以使我们利用Asp实现很多对于图形的处理功能,他的功能强大,如果你需
- 前言当后台返回的数据过多时,我们就要配置分页器,比如一页最多只能展示10条等等,drf中默认配置了3个分页面PageNumberPagina
- 这是一套适用于JavaScript程序的编码规范。它基于Sun的Java程序编码规范。但进行了大幅度的修改, 因为JavaScript不是J
- <P><HTML><HEAD><TITLE>javascriptboy</TITLE&
- 本文实例为大家分享了Python实现学生管理系统的具体代码,供大家参考,具体内容如下实现从面向过程到面向对象的过度,通过更改前面的学生管理系
- 一、format格式输出字符串使用 % 操作符对各种类型的数据进行格式化输出,这是早期 Python提供的方法。字符串类型(str)提供了
- 1、$_SERVER$_SERVER超级全局变量包含由web服务器创建的信息,它提供了服务器和客户配置及当前请求环境的有关信息。根据服务器不
- 本文实例讲述了Python实现生成随机日期字符串的方法。分享给大家供大家参考,具体如下:生成随机的日期字符串,用于插入数据库。通过时间元组设
- 有时候会碰到行转列的需求(也就是将列的值作为列名称),通常我都是用 CASE END + 聚合函数来实现的。如下:declare @t ta
- 在python3中按数据类型的可变与不可变大致分为如下几种类型:不可变数据(3个):Number(数字)、String(字符串)、Tuple
- PHP registerXPathNamespace() 函数实例为下一个 XPath 查询创建命名空间上下文:<?php $xml=
- 初学python和numpy,对在学习多维切片的过程中遇到的问题做个总结。一维切片就不说了,比较简单,先说下二维的,二维的理解了多维的就简单
- 一个成熟的数据库架构并不是一开始设计就具备高可用、高伸缩等特性的,它是随着用户量的增加,基础架构才逐渐完善。这篇博文主要谈MySQL数据库发
- 首先打击我的就是rpm安装,它告诉我发现了Mysql版本冲突,安装无法继续。我用rpm -q 查询后,想通过rpm -e 来删除系统自带的版
- 相信大家对python-docx这个常用的操作docx文档的库都不陌生,它支持以内联形状(Inline Shape)的形式插入图片,即图片和
- EXISTS该函数返回集合中第一个元素的索引,如果集合为空,返回NULLNULLNULLCollection.EXISTS(index)CO
- 首先预览一下 PyCharm 在实际应用中的界面:(更改了PyCharm的默认风格)安装首先去下载最新的pycharm 2.7.3,进行安装