历史小剧场
呜呼！古有匈奴犯汉，晋室不纲，铁木夺宋，虏清入关，神舟陆沉二百年有余，中国之见灭于满清初非满人能灭之，能有之也因有汉奸以作虎怅，残同胞媚异种，始有吴三桂洪承畴，继有曾国藩袁世凯以为厉。今率堂堂之师，征讨汉贼袁氏筑共和之体，或免于我子子孙孙被异族奴役。---- 《讨汉贼袁世凯檄文》
基本使用
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, // 集成 Nodejs
contextIsolation: 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>
运行
npm run start
Electron案例