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

et 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.hQLiHXltml`;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>

　　然后打包测试结果如下：