electron-vue 專案新增啟動loading動畫問題

丶Serendipity丶發表於2022-01-26
Vue動畫

前言

　　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", //設定背景顏色
    show: false,
  });

  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>

　　然後打包測試結果如下：

寫在最後

　　以上就是本文的全部內容，希望給讀者帶來些許的幫助和進步，方便的話點個關注，小白的成長之路會持續更新一些工作中常見的問題和技術點。

相關文章