electron-vue 项目添加启动loading动画问题_electron loading

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

Python实战量化交易理财系统

https://edu.csdn.net/course/detail/35475

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>Documenttitle>
 <style>
 body{
 margin: 0;
 padding: 0;
 overflow: hidden;
 background:rgba(0,0,0,.5)
 body::-webkit-scrollbar{
 display: none;
 width: 200px;
 height: 200px;
 style>
 <img src="./\_.gif" alt="" srcset="">
（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>
template>
<script>
export default {
 name: "person-clsoe-system",
 created() {
 this.$electron.ipcRenderer.send("ready-to-show");
script>
<style>
/* CSS */
style>
然后打包测试结果如下： 
以上就是本文的全部内容，希望给读者带来些许的帮助和进步，方便的话点个关注，小白的成长之路会持续更新一些工作中常见的问题和技术点。 
                                    主要加了initApp方法；以及有关loading的；
background.js:
import { app, protocol, BrowserWindow, shell, dialog,Menu } from 'electron'
import {
  createProtocol
} from 'vue-cli-plugin-electron-builder/lib'
const isDevelopment = process.env.NODE_ENV !== 'production'
let w
electron+vuecli3 实现设置打印机，静默打印小票功能
git clone https://github.com/sunniejs/electron-vue-print-demo.git
npm install
npm  run electron:serve
1.用户点击打印
2.查询本地 electron-store(用来向本地存储，读取数据)是否存打印机名称
3.已经设置，直接打印
4.没有设置，弹出设置打印机框
5.用户设置好确认后打印
问题反馈
有什么问题可以提 issue 或扫描微信二维码跟我联系，项目持续优化，加群获取最新更新消息
您可以扫描添加下方的微信并备注 Sol 加交流群，给我提意见，交流学习。
如果对你有帮助送我一颗小星星（づ￣3￣）づ╭:red_heart:～
Electron + vue3 + vite2 + ant-design-vue2 整合
:bug: 已知问题
项目打包后仍有问题 待解决... 暂时通过集成 webpack 解决打包问题
How and Why
写这个 Demo 项目主要有两个目的
[email protected] 发布了，想试试新功能
工作中用的 umi+electron 项目大了，启动速度并不理想；
用 vite 试试，算一个储备方案 ^_^
Command
npm run dev
npm run build
如果只需要最基础的集成 Demo 请使用  或  分支
Note 踩坑记
import { write } from 'fs' 的这种形式会被 vite 编译成 /@modules/fs?import
const { write } = require('fs') 这种形式就能用了 :winking_face:
const {
                                    1. 原理：创建一个加载窗口用以加载loading.html加载页面动画，然后创建主项目窗口，当主窗口启动时（或者首页请求成功数据之后），关闭加载窗口显示主项目窗口。
  1.1再src/main/index.js主线程中：
import { app, BrowserWindow, Menu, ipcMain } from 'electron'
if (process.env.NODE_ENV !== 'development') {
  global.__static = requir...
                                    文章目录导读开发环境渲染进程中报错 electron require is not define渲染进程中 创建子窗口安装 @electron/remote主进程开启 remote功能渲染进程 index.html 中创建按钮渲染进程 renderer.js 直接引用remote的BrowserWindow功能参考资料
                                    比如酷狗音乐，导航是比较好看。做法是隐藏原生菜单，用自己的 html 代替。下面我们将原生菜单功能改为自定义菜单。首先通过frame// frame boolean (可选) - 设置为 false 时可以创建一个无边框窗口 默认值为 true。// 去除边框，菜单也不可见了})Tip: frame boolean (可选) - 设置为 false 时可以创建一个无边框窗口 默认值为 true接着在 html 页面实现自己的菜单。新建窗口span>
                                    Electron如何加载vue页面的呢
第一步 createWindow()，创建窗口
在src/main/index.js中的createWindow()函数中，Electron-vue已经为我们写好了创建窗口的实例。在这里调用到了BrowserWindow，具体的参数设置以及使用参考官方文档。这里我们先引入BrowserWindow：
import { BrowserWindow } from...
                                    7.did-frame-finish-load 最后一个是主框架frame 加载完成blog。6.did-frame-finish-load frame 加载完成cdn。4.dom-ready 主页面 dom 加载完成electron。1.did-start-loading 页面开始加载web。10.did-stop-loading 页面中止加载文档。8.did-finish-load 页面加载完成事件。2.load-commit 主页面文档加载框架。
npm config set ELECTRON_MIRROR "https://npm.taobao.org/mirrors/electron/"
改为淘宝下载源，速度会很快，免得你痛苦焦躁的等待。
                                    放眼望去，又是好久没写文章了，最近在学习electron 一圈下来坑也不少，在此记录一下。这里的图标涉及多个1是安装后的图标，2是安装过程中原生的那个很丑的动画,3是窗口界面的小图标packagerConfig icon 的设置，我这里只是windows 平台其他平台注意不同平台图标的规范。