快捷導(dǎo)航

electron-vue?項(xiàng)目添加啟動(dòng)loading動(dòng)畫(huà)的實(shí)現(xiàn)思路

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

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

前言

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

正文

　　針對(duì)上訴問(wèn)題，產(chǎn)生的原因是在渲染進(jìn)程加載vue的時(shí)候，特別慢，為了提高用戶(hù)體驗(yàn)，我們的項(xiàng)目可以在啟動(dòng)的時(shí)候添加一個(gè)loading動(dòng)畫(huà)，然后再進(jìn)入app.vue的頁(yè)面。

實(shí)現(xiàn)思路

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

　?。?）設(shè)置啟動(dòng)頁(yè)面

　　loading動(dòng)畫(huà)可以寫(xiě)在一個(gè)單獨(dú)的html頁(yè)面，屬于靜態(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）修改主進(jìn)程的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頁(yè)面地址
    ? require("path").join(__static, "loading.html")
    : `file://${__static}/loading.html`;
const showLoading = (cb) => {
  loadingWindow = new BrowserWindow({
    show: false,
    frame: false, // 無(wú)邊框（窗口、工具欄等），只包含網(wǎng)頁(yè)內(nèi)容
    width: 200,
    height: 200,
    resizable: false,
    transparent: true, // 窗口是否支持透明，如果想做高級(jí)效果最好為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)聽(tīng)到ready事件時(shí)，執(zhí)行showLoading方法，傳入了createWindow 方法為參數(shù)，首先創(chuàng)建loadinWindow窗口，然后注冊(cè)show事件，loading窗口加載了loading.html 頁(yè)面后，去加載mainWindow窗口，改窗口加載了頁(yè)面app.vue（即index.html）內(nèi)容，并注冊(cè)了 " ready-to-show "事件，改事件用于關(guān)閉loading窗口，顯示mainWindow窗口。

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

　?。?）在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>

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

到此這篇關(guān)于electron-vue 項(xiàng)目添加啟動(dòng)loading動(dòng)畫(huà)問(wèn)題的文章就介紹到這了,更多相關(guān)electron vue啟動(dòng)動(dòng)畫(huà)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: