1. 原理:创建一个加载窗口用以加载loading.html加载页面动画,然后创建主项目窗口,当主窗口启动时(或者首页请求成功数据之后),关闭加载窗口显示主项目窗口。
1.1 再src/main/index.js主线程中:
import { app, BrowserWindow, Menu, ipcMain } from 'electron'
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(__dirname, '../../static/loading/loading.html')
: `file://${__dirname}/index.html`
function createLoadingWindow() { //加载页面窗口
loadingWindow = new BrowserWindow({
height: 200,
useContentSize: true,
width: 200,
show: true,
transparent:false,
maximizable: false, //禁止双击放大
frame: false // 去掉顶部操作栏
loadingWindow.loadURL(loadingURL)
Menu.setApplicationMenu(null)
loadingWindow.on('closed', () => {
loadingWindow = null
function createWindow() { //主项目加载窗口
mainWindow = new BrowserWindow({
height: 540,
minHeight: 540,
useContentSize: true,
width: 820,
show:false,
minWidth: 820,
maximizable: false, //禁止双击放大
frame: false // 去掉顶部操作栏
mainWindow.loadURL(winURL)
Menu.setApplicationMenu(null)
ipcMain.on('on-window-top', (res) => {
mainWindow.focus();
mainWindow.on('closed', () => {
mainWindow = null
app.on('ready', () => {
createLoadingWindow()
createWindow()
ipcMain.on('close-loading-window', (e,res) => {
console.log('e', e)
console.log('res', res)
if (res.isClose) {
loadingWindow.close()
mainWindow.show()
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
app.on('activate', () => {
if (mainWindow === null) {
createWindow()
1.2 主项目App.vue中:
const {ipcRenderer} = require('electron');
created(){
ipcRenderer.send('close-loading-window',{
isClose:true
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...
https://edu.csdn.net/course/detail/36074
Python实战量化交易理财系统
https://edu.csdn.net/course/detail/35475
electron-vue脚手架搭建的项目,在开发阶段可能你注意不到项目启动慢的问题,但是在build 生成的exe可执行文件,启动后,要反应很久才能进入到app.vue 中加载的页面,体验性很差。
针对上诉问题,产生的原因是在渲染进程加载vue的时候,特别慢,为了
该入门工具包旨在为带有不同类型的嵌入式后端运行的应用程序提供示例设置或模板(不仅仅是NodeJS)。
需要make , mvn和npm /(节点)。 只需使用npm install来提供依赖关系,然后使用npm start来编译和运行启动程序框架应用程序。
概念验证:当前版本提供了最简单的基于Spring-Boot的JAR应用程序(“ Hello World!”),并仅显示了一个小的启动画面/加载器如何过渡到Java-App。 这个想法是在将来通过一些流行的开发堆栈的启动器来扩展它。 玩得开心!
在源码里面翻到了:
https://github.com/
electron-userland/
electron-forge/blob/master/packages/api/cli/src/util/check-system.ts#L94-L100
在home目录下
对应windows下的C:\Users\yourusername
在里面建一个文件.skip-forge-system-check就可以跳过了。
主要加了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
思路:只需要先把loading的盒子摆在正中间,然后,里面的每个item都使用绝对定位,并且水平垂直居中,然后先旋转,再位移,就可以呈现一个环状,接着指定
动画,并设置延迟即可。(其实,下边并不需要给loading指定大小,这样就不用设置上下左右都是0,margin是auto了)
<style lang="scss">
body {
margin: 0;
.modal {
background: #202020;
使用Electron开发的时候,会发现安装后第一次启动会出现短暂的空白大概是1~3秒不等。起初是以为在创建窗口的时候会去加载html页面,在加上vue组件的渲染,导致在启动的时候会出现几秒的空白页面,然后渲染之后,就能正常显示。之后的下次启动也不会出现这种问题。如果是这样的话,应该是缓存才会出现第二次启动没有空白页面的情况。
在github的electron上看到了一个类似的问题,开发者给出的解释是:
他认为是Chrome的版本升级导致的问题,然后给出了一个变通的方式去解决这个问题。
解决办法就是:创建窗