# electron - 快速入门
# 1. 什么是 Electron？
Electron 是⼀个跨平台桌⾯应⽤开发框架，
开发者可以使⽤：HTML、CSS、JavaScript 等 Web 技术来构建桌⾯应⽤程序，
它的本质是结合了 Chromium 和 Node.js，现在⼴泛⽤于桌⾯应⽤程序开发
官网: https://www.electronjs.org/
# 2. Electron 的优势
- 可跨平台：同⼀套代码可以构建出能在：Windows、macOS、Linux 上运⾏的应⽤程序。
- 上⼿容易：使⽤ Web 技术就可以轻松完成开发桌⾯应⽤程序。
- 底层权限：允许应⽤程序访问⽂件系统、操作系统等底层功能，从⽽实现复杂的系统交互。
- 社区⽀持：拥有⼀个庞⼤且活跃的社区，开发者可以轻松找到⽂档、教程和开源库。
# 3. Electron 技术架构
# 3.1. 技术架构
# 3.2. 进程模型
# 4. 搭建⼀个⼯程
说明:
- entry point should be main.js (you will be creating that file soon).
- author, license, and description can be any value, but will be necessary for packaging later on.
依赖:
npm i -D electron
package.json:
{
"name": "electron-proj",
"version": "1.0.0",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"author": "wuqinfei",
"license": "ISC",
"description": "this is electron app",
"devDependencies": {
"electron": "^37.3.0"
}
}
main.js:
const { app, BrowserWindow } = require("electron");
app.on('ready', () => {
let browserWindow = new BrowserWindow({
width: 800,
height: 600,
// 隐藏菜单栏
// https://www.electronjs.org/docs/latest/api/browser-window#winautohidemenubar-linux-windows
autoHideMenuBar: true,
// x: 0, // 初始位置
// y: 0, // 初始位置
alwaysOnTop: true, // 置顶
});
})
运行:
npm start
# 5. 加载本地页面
目录:
electron-proj/
index.js
pages/
index.html
index.css
index.js:
browserWindow.loadFile('./pages/index.html')
index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:;">
<title>Document</title>
</head>
<body>
<h1>Hello</h1>
</body>
</html>
# 6. 完善窗口行为
const { app, BrowserWindow } = require("electron");
function createWindow() {
let browserWindow = new BrowserWindow({
width: 800,
height: 600,
// 隐藏菜单栏
// https://www.electronjs.org/docs/latest/api/browser-window#winautohidemenubar-linux-windows
autoHideMenuBar: true,
// x: 0, // 初始位置
// y: 0, // 初始位置
alwaysOnTop: true, // 置顶
});
browserWindow.loadFile('./pages/index.html')
}
// 当app准备好后，执⾏createWindow创建窗⼝
app.on('ready',()=>{
createWindow()
// 2. mac 应⽤即使在没有打开任何窗⼝的情况下也继续运⾏，并且在没有窗⼝可⽤的情况下激活应⽤时会打开新的窗⼝。
// 当应⽤被激活时
app.on('activate', () => {
//如果当前应⽤没有窗⼝，则创建⼀个新的窗⼝
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
// 1. Windows 和 Linux 平台窗⼝特点是：关闭所有窗⼝时退出应⽤。
// 当所有窗⼝都关闭时
app.on('window-all-closed', () => {
// 如果所处平台不是mac(darwin)，则退出应⽤。
if (process.platform !== 'darwin') app.quit()
})
# 7. 配置⾃动重启
安装 nodemon:
npm i nodemon -D
修改 package.json 命令:
"scripts": {
"start": "nodemon --exec electron ."
},
配置 nodemon.json 规则:
{
"ignore": [
"node_modules",
"dist"
],
"restartable": "r",
"watch": ["*.*"],
"ext": "html,js,css"
}
# 8. 主进程与渲染进程
# 8.1. 主进程
入口点 main.js
每个 Electron 应⽤都有⼀个单⼀的主进程，作为应⽤程序的⼊⼝点。
主进程在 Node.js 环境中运⾏，它具有 require 模块和使⽤所有 Node.js API 的能⼒，主进程的核⼼就是：使用 BrowserWindow 创建和管理窗口
# 8.2. 渲染进程
页面通过
<script>引入的 JS
每个 BrowserWindow 实例都对应⼀个单独的渲染器进程，运⾏在渲染器进程中的代码，必须遵守⽹⻚标准，这也就意味着：渲染进程无法访问 node API
# 9. preload
预加载（Preload）脚本是运⾏在渲染进程中的， 但它是在⽹⻚内容加载之前执⾏的，这意味着它具有⽐普通渲染器代码更⾼的权限，可以访问 Node.js 的 API，同时⼜可以与⽹⻚内容进⾏安全的交互。
简单说：它是 Node.js 和 Web API 的桥梁，Preload 脚本可以安全地将部分 Node.js 功能暴露给⽹⻚，从⽽减少安全⻛险。
在主进程里创建窗口时加载 preload.js:
let browserWindow = new BrowserWindow({
// ...
webPreferences: {
preload: path.resolve(__dirname, './preload.js')
},
});
在 preload.js 里将数据挂载到 window 对象:
const { contextBridge} = require('electron')
// 暴露数据给渲染进程
contextBridge.exposeInMainWorld('myAPI',{
// 传递数据
nodeVersion: process.version,
// 供渲染进程调用
sayHello(name) {
console.log(`${name}, hello`);
},
})
在 render.js 里访问:
console.log(window.myAPI);
/* =>
{
"name": "张三",
"nodeVersion": "v22.18.0"
}
*/
document.getElementById('btn1').onclick = () => {
window.myAPI.sayHello("张三")
};
# 10. 进程通信（IPC）
IPC 全称为： InterProcess Communication ，即：进程通信。
IPC 是 Electron 中最为核⼼的内容，它是从 UI 调⽤原⽣ API 的唯⼀⽅法！
Electron 中，主要使⽤ ipcMain 和 ipcRenderer 来定义“通道”，进⾏进程通信。
# 10.1. 渲染进程 给 主进程 发送消息（单向）
preload.js:
const { ipcRenderer} = require('electron')
ipcRenderer.send("channel-1", data)
main.js:
const { ipcMain } = require("electron");
ipcMain.on('channel-1', (event, data) => {
// 需要将 CMD 设置成 UTF-8 编码，执行如下命令
// chcp 65001
console.log('channel-1', data);
})
# 10.2. 渲染进程 调用 主进程 的方法（双向）
preload.js:
const { ipcRenderer } = require('electron')
ipcRenderer.invoke("channel-2", data)
.then((res) => {
// ...
})
main.js:
const { ipcMain } = require("electron");
ipcMain.handle('channel-2', (event, data) => {
const res = `${data}, 猜猜我是谁。`;
return res;
})
# 10.3. 主进程 给 渲染进程 发送消息（单向）
main.js:
browserWindow.webContents.send('channel-3', '我是老大');
preload.js:
ipcRenderer.on('channel-3', (event, data) => {
console.log(`收到主进程的消息: `, data)
})
# 11. 打包应⽤
以管理员权限打开 CMD
安装 electron-builder:
npm i -D electron-builder
在 package.json 中进⾏相关配置，具体配置如下:
{
"name": "mytest", // 应⽤程序的名称
"version": "1.0.0", // 应⽤程序的版本
"main": "main.js", // 应⽤程序的⼊⼝⽂件
"scripts": {
"start": "electron .", // 使⽤ `electron .` 命令启动应⽤程序
"build": "electron-builder" // 使⽤ `electron-builder` 打包应⽤程序，⽣成安装包
},
"build": {
"appId": "org.example.mytest", // 应⽤程序的唯⼀标识符
// 打包windows平台安装包的具体配置
"win": {
"icon":"./logo.ico", //应⽤图标
"target": [
{
"target": "nsis", // 指定使⽤ NSIS 作为安装程序格式
"arch": ["x64"] // ⽣成 64 位安装包
}
]
},
"nsis": {
"oneClick": false, // 设置为 `false` 使安装程序显示安装向导界⾯，⽽不是⼀ 键安装
"perMachine": true, // 允许每台机器安装⼀次，⽽不是每个⽤户都安装
"allowToChangeInstallationDirectory": true // 允许⽤户在安装过程中选择 安装⽬录
}
},
"devDependencies": {
"electron": "^30.0.0", // 开发依赖中的 Electron 版本
"electron-builder": "^24.13.3" // 开发依赖中的 `electron-builder` 版本
},
"author": "tianyu", // 作者信息
"license": "ISC", // 许可证信息
"description": "A video processing program based on Electron" // 应⽤程序的描述
}
执⾏打包命令:
npm run build
# 12. electron-vite
官网: https://cn-evite.netlify.app/
electron-vite 是⼀个新型构建⼯具，旨在为 Electron 提供更快、更精简的体验。
主要由五部分组成：
- ⼀套构建指令，它使⽤ Vite 打包你的代码，并且它能够处理 Electron 的独特环境，包括 Node.js 和浏览器环境。
- 集中配置主进程、渲染器和预加载脚本的 Vite 配置，并针对 Electron 的独特环境进⾏预配置。
- 为渲染器提供快速模块热替换（HMR）⽀持，为主进程和预加载脚本提供热重载⽀持，极⼤地提⾼了开发效率。
- 优化 Electron 主进程资源处理。
- 使⽤ V8 字节码保护源代码。
上一篇: 下一篇:
本章目录