electron-vue 项目添加启动loading动画的实现思路
前言
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", //设置背景颜色
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>
然后打包测试结果如下：
到此这篇关于electron-vue 项目添加启动loading动画问题的文章就介绍到这了,更多相关electron vue启动动画内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
如何启动一个Vue.js项目
一. Node.js与Vue 1.1 Node.js Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境. Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型. [Node 是一个让 JavaScript 运行在服务端的开发平台,它让 JavaScript 成为与PHP.Python.Perl.Ruby 等服务端语言平起平坐的脚本语言. 发布于2009年5月,由Ryan Dahl开发,实质是对Chrome V8引擎进行了封装. Node对一些特殊用例
-
vue项目中添加electron的详细代码
1.在package.json中添加 "main": "electron.js", 在 "scripts": {添加: "package": "electron-packager ./ appName --overwrite" 在"dependencies": {添加: "electron-share-memory": "^1.0.1", &quo
-
vue + Electron 制作桌面应用的示例代码
1.vue打包 这里使用vue原生打包命令,对vue项目进行打包 npm run build 2.配置 Electron 使用 Electron 制作桌面应用需要两个配置文件 1.package.json 创建一个package.json文件,将以下代码放入 { "name": "demo", //项目名称 "productName": "demo", "author": "作者", &
-
electron-vue 项目添加启动loading动画的实现思路
前言 electron-vue脚手架搭建的项目,在开发阶段可能你注意不到项目启动慢的问题,但是在build 生成的exe可执行文件,启动后,要反应很久才能进入到app.vue 中加载的页面,体验性很差. 正文 针对上诉问题,产生的原因是在渲染进程加载vue的时候,特别慢,为了提高用户体验,我们的项目可以在启动的时候添加一个loading动画,然后再进入app.vue的页面. 实现思路 我们可以通过一个单独的启动窗口来创建loading页面,在项目中其他准备工作未完成时出现在用户的视野中给用户一定
-
如何为老vue项目添加vite支持详解
1.前言 接手公司的某个项目已经两年了,现在每次启动项目都接近1分钟,hmr也要好几秒的时间,but vite2发布之后就看到了曙光,但是一直没有动手进行升级,昨天终于忍不住了,升级之后几秒钟就完成了. vite -- 一个由 vue 作者尤雨溪开发的 web 开发工具,它具有以下特点: 快速的冷启动 即时的模块热更新 真正的按需编译 2.开始升级 注:只是升级了开发环境,打包依旧是webpack(也试过打包也用vite,但是打包后发现iview的字体图标出现问题了,初步验证是静态资源的问题,v
-
Vue项目添加动态浏览器头部title的方法
0. 直接上 预览链接 + 效果图 Vue项目添加动态浏览器头部title 1. 实现思路 ( 1 ) 从路由router里面得到组件的title ( 2 ) title存vuex (本项目已经封装h5的sessionStorage和localStorage也可以存在这里面) ( 3 ) 设置 title (1)从路由router里面得到组件的title 在 router.beforeEach((to, from, next) => {} 里面 const browserHeaderTitle
-
vue项目添加多页面配置的步骤详解
公司使用 vue-cli 创建的 vue项目 在初始化时并没有做多页面配置,随着需求的不断增加,发现有必要使用多页面配置.看了很多 vue多页面配置 的文章,基本都是在初始化时就配置了多页面.而且如果使用这些实现,需要调整当前项目的目录结构,这点也是不能接受的. 最后,参考这些文章,在不调整当前项目目录结构实现了多页面的配置的添加.这里做下记录.总结,方便以后复用.如果还能有幸帮助到有同样需求的童鞋的话,那就更好了. 实现步骤 1.添加新增入口相关文件; 2.使用变量维护多入口: 3.开发环境读
-
electron + vue项目实现打印小票功能及实现代码
一 需求: 公司项目需要通过electron调用系统打印机,实现打印小票的功能. 二.分析: electron打印大概有两种: 第一种:通过window的webcontent对象,使用此种方式需要单独开出一个打印的窗口,可以将该窗口隐藏,但是通信调用相对复杂. 第二种:使用页面的webview元素调用打印,可以将webview隐藏在调用的页面中,通信方式比较简单. 两个对象调用打印方法的使用方式都一样. 本文是通过第二种方法实现静默打印. 三.实现过程: 1.要实现打印功能,首先要知道我们的设备
-
解决vue项目本地启动时无法携带cookie的问题
解决vue项目打包部署到服务器上可以正常登录,本地启动时无法携带cookie 说一下问题:公司的老项目,从gitLab上克隆下来,启动之后登录,接口返回登录成功,然后又调用其他的接口的时候返回未登录,查看请求头,未携带cookie,因此调用接口的时候提示未登录. 但是同样的代码打包部署之后一切正常,调接口的时候是携带cookie的,一通百度之后终于解决了. 我用的是谷歌chrome浏览器 解决步骤如下: 1.在浏览器地址栏访问chrome://flags 2.搜索框内搜索SameSite,然后把
-
Vue项目中添加锁屏功能实现思路
1. 实现思路 ( 1 ) 设置锁屏密码 ( 2 ) 密码存localStorage (本项目已经封装h5的sessionStorage和localStorage) ( 3 ) vuex设置 SET_LOCK state.isLock = true (为true是锁屏状态) ( 4 ) 在路由里面判断vuex里面的isLock(为true锁屏状态不能让用户后退url和自行修改url跳转页面否则可以) (1)设置锁屏密码 handleSetLock() { this.$refs['form'].v
-
vue 项目中使用Loading组件的示例代码
什么是vue插件? 从功能上说,插件是为Vue添加全局功能的一种机制,比如给Vue添加一个全局组件,全局指令等: 从代码结构上说,插件就是一个必须拥有install方法的对象,这个方法的接收的第一个参数是Vue构造函数,还可以接收一个可选的参数,用于配置插件: var myplugin = { install:function(Vue, options){ ... } } 从意义上来说,正如jQuery的$.fn使jQuery有了一个庞大的生态一样,Vue的插件机制使Vue形成了一个生态系统,你
-
详解Vue项目中出现Loading chunk {n} failed问题的解决方法
最近有个Vue项目中会偶尔出现Loading chunk {n} failed的报错,报错来自于webpack进行code spilt之后某些bundle文件lazy loading失败.但是这个问题的根本原因没有被找到,因为这个问题出现的偶然性太高了,而且有的手机上会出现,有的不会,用模拟器不会出现,用真机又会出现,不知道是网络原因还是webpack的bug.在github.stackoverflow等各种地方也找不到原因和解决方案,这是github上关于这个问题的讨论:Loading chu
-
给vue项目添加ESLint的详细步骤
eslint配置方式有两种: 1.注释配置:使用js注释来直接嵌入ESLint配置信息到一个文件里 2.配置文件:使用一个js,JSON或者YAML文件来给整个目录和它的子目录指定配置信息.这些配置可以写在一个文件名为.eslintrc.*的文件或者在package.json文件里的eslintConfig项里,这两种方式ESLint都会自动寻找然后读取,或者你也可以在命令行里指定一个配置文件. 有几种东西是可以配置的: 环境:你的脚本会在哪种环境下运行.每个环境带来了一组特定的预定义的全局变量