Electron：启动Loading动画

原理就是创建一个加载窗口，在项目尚未准备完毕时用以加载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();
});