初识Electron，创建桌面应用

历史小剧场

呜呼！古有匈奴犯汉，晋室不纲，铁木夺宋，虏清入关，神舟陆沉二百年有余，中国之见灭于满清初非满人能灭之，能有之也因有汉奸以作虎怅，残同胞媚异种，始有吴三桂洪承畴，继有曾国藩袁世凯以为厉。今率堂堂之师，征讨汉贼袁氏筑共和之体，或免于我子子孙孙被异族奴役。---- 《讨汉贼袁世凯檄文》

基本使用

1、初始项目

注意：main: 改为 main.js

npm init

2、安装electron

npm install --save-dev electron

3、修改package.json

{"name": "electron-app-cycle","version": "1.0.0","description": "","main": "main.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","start": "nodemon --watch main.js --exec npm run build","build": "electron ."},"author": "","license": "ISC","devDependencies": {"electron": "^30.0.1"}
}

4、编写main.js

const { app, BrowserWindow, ipcMain } = require('electron')// 创建窗口
let mainWin = null;
function createWindow() {mainWin = new BrowserWindow({x: 100,y: 100,show: false,width: 1000,height: 600,maxWidth: 1000,maxHeight: 800,minWidth: 400,minHeight: 200,resizable: false, // 可缩放movable: true, // 可移动frame: true, // 无边框title: "Electron 学习",icon: "logo.png",// transparent: true, // 透明autoHideMenuBar: true, // 隐藏菜单栏webPreferences: {nodeIntegration: true, // 集成 NodejscontextIsolation: false, // 隔离上下文}})mainWin.loadFile('index.html')mainWin.on("ready-to-show", () => {mainWin.show()})mainWin.webContents.on('dom-ready', () => {console.log("22222 ---> dom-ready")})mainWin.webContents.on('did-finish-load', () => {console.log("33333 ---> did-finish-load")})// 当前窗口关闭时触发mainWin.on("closed", () => {console.log("88888 ---> this window is closed")mainWin = null;})
}// 监听来自渲染进程的 openListWindow 事件
ipcMain.on("openListWindow", () => {const chidlWin = new BrowserWindow({x: 400,y: 300,width: 400,height: 200,parent: mainWin,webPreferences: {nodeIntegration: true,}})chidlWin.loadFile('list.html')chidlWin.on("closed", () => {chidlWin = null})
})app.on('ready', () => {console.log("11111 ---> app is ready")createWindow()
})app.on('window-all-closed', () => {console.log("44444 ---> all windows are closed")app.quit()
})app.on('before-quit', () => {console.log("55555 ---> before-quit")
})app.on('will-quit', () => {console.log("66666 ---> will-quit")
})app.on('quit', () => {console.log("77777 ---> quit")
})

补充知识：Electron 生命周期

ready: app 初始化完成
dom-ready: 一个窗口中的文本加载完成
did-finish-load: 导航完成时触发
window-all-closed: 所有窗口都被关闭时触发
before-quit: 在关闭窗口之前触发
will-quit: 在窗口关闭并且应用退出时触发
quit: 当所有窗口被关闭时触发
closed: 当窗口关闭时触发，此时应删除窗口引用

5、编写主窗口页面 index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title></title>
</head>
<body><h2>Electron生命周期</h2><button id="open-list-window">点击打开新窗口</button><script src="index.js"></script>
</body>
</html>

index.js

const { ipcRenderer } = require('electron')window.addEventListener("DOMContentLoaded", () => {const btn = document.getElementById("open-list-window");btn.onclick = () => {// 当按钮被点击时，发送消息到主进程ipcRenderer.send('openListWindow')}
})

补充知识
- DOMContentLoaded事件：此时浏览器已经完全加载了HTML文件，并且DOM树已经生成好了。但是其他外部资源，比如样式文件、图片、字体等并没有加载好；
- Load事件：此时浏览器已经将所有的资源都加载完毕，可以正确读取页面中的资源。

6、编写子窗口 list.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>新窗口</title>
</head>
<body><div>新窗口</div>
</body>
</html>