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

2022-01-27 09:59:04 作者：Serendipity

electron-vue脚手架搭建的项目，在开发阶段可能你注意不到项目启动慢的问题，但是在build 生成的exe可执行文件，启动后，要反应很久才能进入到app.vue 中加载的页面，体验性很差，本文给大家介绍electron 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">
    <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;
            width: 200px;
            height: 200px;
    </style>
</head>
    <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", //设置背景颜色
  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>
</template>
<script>
export default {
  name: "person-clsoe-system",
  created() {
    this.$electron.ipcRenderer.send("ready-to-show");
</script>
<style>
/* CSS */
</style>
　　然后打包测试结果如下：
到此这篇关于electron-vue 项目添加启动loading动画问题的文章就介绍到这了,更多相关electron vue启动动画内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
vue+electron实现创建多窗口及窗口间的通信(实施方案)
electron + vue项目实现打印小票功能及实现代码
使用electron将vue-cli项目打包成exe的方法
vue-electron项目创建记录及问题小结解决方案
解决VUE的对话框el-dialog点击外部消失问题
2024-02-02
Win11&Win10配置vue开发环境详细图文教程
2024-02-02
vant-Dialog 弹出框的使用小结
2024-02-02
vue-electron项目创建记录及问题小结解决方案
2024-03-03
vue-electron项目创建记录及问题小结解决方案
2024-03-03
Vue中import from@符号指的是什么意思
2024-03-03
vue如何直接获取url中的参数
2024-03-03
vue使用urlEncode问题
2024-03-03
美国设下计谋,用娘炮文化重塑日本,已影响至中国
2021-11-19
时空伴随者是什么意思?时空伴随者介绍
2021-11-09
工信部称网盘企业免费用户最低速率应满足基本下载需求，天翼云盘回应：坚决支持，始终
2021-11-05
2022年放假安排出炉：五一连休5天 2022年所有节日一览表
2021-10-26
电脑版 - 返回首页
2006-2024 脚本之家 JB51.Net , All Rights Reserved.
苏ICP备14036222号