原理就是创建一个加载窗口，在项目尚未准备完毕时用以加载
loading.html加载页面动画，告诉用户我正在启动，然后创建主项目窗口，当主窗口启动时（或者首页请求成功数据之后），关闭加载窗口显示主项目窗口。
步骤一
创建一个
loading的HTML页面，主要用来对我们的启动窗口进行绘制以及各种平滑的等待效果。
例如：路径为：main/loading.html
步骤二
在主进程文件中修改配置
例如：路径为：main/index.js
配置文件
import { app, BrowserWindow, Menu, ipcMain } from 'electron'
const devUrl = `http://${process.env['VITE_DEV_SERVER_HOSTNAME']}:${process.env['VITE_DEV_SERVER_PORT']}`;
const proUrl = `file://${path.join(__dirname, '../dist/index.html')}`;
const winUrl = process.env.NODE_ENV === 'development' ? devUrl : proUrl
// 加载loading页面窗口
const showLoading = () => {
return new Promise((resolve, reject) => {
loadingWindow = new BrowserWindow({
width: 512,
height: 512,
frame: false, // 无边框（窗口、工具栏等），只包含网页内容
transparent: true // 窗口是否支持透明，如果想做高级效果最好为true
});
loadingWindow.loadFile('loading.html');
loadingWindow.show()
resolve();
});
};
// 主项目加载窗口
const createWindow = () => {
return new Promise((resolve, reject) => {
mainWindow = new BrowserWindow({
height: 540,
width: 820,
show:false,
webPreferences: {
nativeWindowOpen: true,
title: "主窗口",
},
});
mainWindow.once("ready-to-show", () => {
// 模拟启动准备时间
setTimeout(() => {
loading.hide();
loading.close();
mainWindow.show();
}, 2000);
});
mainWindow.loadURL(winURL)
});
};
app.on("ready", async () => {
await showLoading();
await createWindow();
});
