快捷導(dǎo)航

electron-vue?項目添加啟動loading動畫的實現(xiàn)思路

更新時間：2022年01月27日 10:00:02 作者：Serendipity

electron-vue腳手架搭建的項目，在開發(fā)階段可能你注意不到項目啟動慢的問題，但是在build?生成的exe可執(zhí)行文件，啟動后，要反應(yīng)很久才能進入到app.vue?中加載的頁面，體驗性很差，本文給大家介紹electron?vue啟動動畫效果的實例代碼，感興趣的朋友一起看看吧

前言

　　electron-vue腳手架搭建的項目，在開發(fā)階段可能你注意不到項目啟動慢的問題，但是在build 生成的exe可執(zhí)行文件，啟動后，要反應(yīng)很久才能進入到app.vue 中加載的頁面，體驗性很差。

正文

　　針對上訴問題，產(chǎn)生的原因是在渲染進程加載vue的時候，特別慢，為了提高用戶體驗，我們的項目可以在啟動的時候添加一個loading動畫，然后再進入app.vue的頁面。

實現(xiàn)思路

　　我們可以通過一個單獨的啟動窗口來創(chuàng)建loading頁面，在項目中其他準備工作未完成時出現(xiàn)在用戶的視野中給用戶一定的反饋，等準備工作完成后，通過渲染進程向主進程發(fā)送準備完畢的消息，關(guān)閉啟動窗口即可。

　?。?）設(shè)置啟動頁面

　　loading動畫可以寫在一個單獨的html頁面，屬于靜態(tài)資源，electron-vue 官網(wǎng)推薦，把靜態(tài)資源存放在 /static 目錄下即可，創(chuàng)建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, // 無邊框（窗口、工具欄等），只包含網(wǎng)頁內(nèi)容
    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", //設(shè)置背景顏色
  mainWindow.loadURL(winURL); 
  mainWindow.once("ready-to-show", () => {
    loadingWindow.hide();
    loadingWindow.close();
    mainWindow.show();
app.on("ready", () => {
  showLoading(createWindow);
});

　　上面的代碼中，app在監(jiān)聽到ready事件時，執(zhí)行showLoading方法，傳入了createWindow 方法為參數(shù)，首先創(chuàng)建loadinWindow窗口，然后注冊show事件，loading窗口加載了loading.html 頁面后，去加載mainWindow窗口，改窗口加載了頁面app.vue（即index.html）內(nèi)容，并注冊了 " ready-to-show "事件，改事件用于關(guān)閉loading窗口，顯示mainWindow窗口。

　　注意：electron-vue 提供了一個名為__static的全局變量，它將產(chǎn)生一個指向static/目錄的正確路徑。

　　（3）在app.vue中調(diào)用 " 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>

　　然后打包測試結(jié)果如下：