目录
- [一、Electron 概述](#一、Electron 概述)
- [二、Electron 架构](#二、Electron 架构)
-
- [1、Main 进程](#1、Main 进程)
- [2、Renderer 进程](#2、Renderer 进程)
- [3、Preload 脚本](#3、Preload 脚本)
- [三、Electron 核心 API](#三、Electron 核心 API)
- [四、Electron 安全最佳实践（重点难点）](#四、Electron 安全最佳实践（重点难点）)
-
- [1、禁用 NodeIntegration](#1、禁用 NodeIntegration)
- [2、开启 Context Isolation](#2、开启 Context Isolation)
- [3、使用 Preload 安全桥接](#3、使用 Preload 安全桥接)
- 4、防止远程代码执行
- 5、内容安全策略（CSP）
- 五、性能优化与打包
- [六、Electron 高级应用场景](#六、Electron 高级应用场景)
- 七、项目实战
-
- [1、Vue + Electron 最小项目实践](#1、Vue + Electron 最小项目实践)
- [2、React + Electron 最小项目实践](#2、React + Electron 最小项目实践)
- 八、常见坑（重点）
一、Electron 概述
Electron 是一个使用 Web 技术（HTML、CSS、JS） 来构建跨平台桌面应用的框架。它本质上是 Chromium + Node.js 的组合，允许你在桌面端使用 Node API，同时渲染网页 UI。
优点：
- 跨平台：Windows、macOS、Linux。
- Web 技术栈：前端开发者门槛低。
- 丰富生态：Node.js 模块可直接使用。
缺点：
- 大体积：每个应用都打包 Chromium (~50MB+)。
- 性能消耗：高内存占用，尤其是多窗口应用。
- 安全性：混合了 Node 环境，需要注意防护。
核心：
- 多进程架构（Main vs Renderer）
- 安全隔离（Context Isolation + Preload）
- IPC 通信与异步处理
- 跨平台资源管理
难点：
- 安全防护（XSS + Node 权限）
- 高性能内存管理（多窗口 + 重渲染）
- 自动更新 & 签名问题
- 跨平台文件和系统 API 差异
二、Electron 架构
Electron 的核心是 多进程架构：
- Main 进程
- Renderer 进程
- Preload 脚本
1、Main 进程
负责：
- 创建和管理窗口 (BrowserWindow)。
- 系统级 API 调用（文件、剪贴板、通知）。
与渲染进程通信（IPC）。
特点：
- Node.js 完全可用。
- 只能有一个 Main 进程。
2、Renderer 进程
每个窗口对应一个 Renderer 进程（Chromium 渲染进程）。
负责：
- 渲染 UI。
- 响应用户交互。
特点：
- 类似浏览器环境。
- 默认 Node.js 受限，需要开启 nodeIntegration 才能访问 Node API（安全隐患）。
3、Preload 脚本
介于 Main 和 Renderer 之间，提供安全桥接。
常用作 IPC 通信的安全层：
cpp
// preload.js
const { contextBridge, ipcRenderer } = require('electron');
contextBridge.exposeInMainWorld('electronAPI', {
sendData: (data) => ipcRenderer.send('data', data),
onData: (callback) => ipcRenderer.on('data-reply', callback)
});安全重点：
- 不要在 Renderer 中直接开启 Node，推荐使用 contextBridge + IPC。
- 防止 XSS 导致本地文件被随意访问。
三、Electron 核心 API
1、窗口管理
BrowserWindow：主窗口类。
cpp
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
nodeIntegration: false, // 安全
contextIsolation: true, // 强制隔离
}
});多窗口时：
- 要注意内存泄漏。
- 可以用 BrowserView 实现复杂布局。
2、IPC 通信
Main ↔ Renderer 通信：
- ipcMain：Main 端监听
- ipcRenderer：Renderer 端发送
cpp
// Main
ipcMain.on('msg', (event, arg) => {
event.reply('reply', '收到: ' + arg);
});难点：
- 异步通信、跨窗口通信，容易产生回调混乱，需要用 Promise 封装。
3、文件与系统操作
Node API 可直接用：
cpp
const fs = require('fs');
const { dialog } = require('electron');
dialog.showOpenDialog(win, { properties: ['openFile'] })
.then(result => console.log(result.filePaths));重点难点：
- 文件路径跨平台差异（Windows \ vs Linux /）。
- 权限问题：macOS 需要用户授权访问。
四、Electron 安全最佳实践（重点难点）
安全配置示例：
cpp
// 安全的配置
const mainWindow = new BrowserWindow({
webPreferences: {
nodeIntegration: false, // 关键：禁用 Node.js 集成
contextIsolation: true, // 关键：启用上下文隔离
preload: path.join(__dirname, 'preload.js') // 使用预加载脚本
}
})
mainWindow.loadURL('https://your-trusted-site.com') // 即使加载远程内容也安全1、禁用 NodeIntegration
cpp
nodeIntegration: false这是为了安全性，防止远程代码执行等严重漏洞。
2、开启 Context Isolation
cpp
contextIsolation: true这会将你的预加载脚本和渲染进程的代码运行在独立的世界（Context）中，防止它们互相篡改。
3、使用 Preload 安全桥接
封装 API，不直接暴露 Node。
4、防止远程代码执行
- 禁止 eval()、new Function()。
- 阻止加载外部 URL。
5、内容安全策略（CSP）
尽量只加载本地文件。
五、性能优化与打包
1、内存优化
- 避免多余窗口。
- 使用 BrowserView 而非大量 BrowserWindow。
- 回收无用对象和事件监听。
2、打包优化
Electron-builder / Electron-forge：
- 支持自动签名、压缩。
- 支持多平台打包。
ASAR 打包：
- 将资源打包成单文件，提高读写效率。
瘦身技巧：
- 剔除 devDependencies。
- 压缩 Chromium（electron-rebuild）。
六、Electron 高级应用场景
1、多窗口/多标签页应用
使用 BrowserView 或 webContents 动态管理内容。
2、原生通知和系统托盘
new Tray() + new Notification()。
3、自动更新
electron-updater + GitHub Release。
4、原生模块兼容
node-gyp 构建，注意跨平台问题。
5、集成前端框架
- React / Vue / Svelte + Webpack/Vite 构建 UI。
- 渲染进程用 SPA 或 SSR。
七、项目实战
1、Vue + Electron 最小项目实践
2、React + Electron 最小项目实践
八、常见坑（重点）
| 场景 | 问题 | 解决 |
|---|---|---|
| NodeIntegration 开启 | 安全隐患 XSS | 使用 Preload + contextBridge |
| ipcRenderer 回调 | 回调混乱 | 使用 ipcRenderer.invoke / async await |
| 多窗口 | 内存泄漏 | 每个窗口关闭要清理对象 |
| macOS 打包 | 权限问题 | info.plist 配置文件访问权限 |
| 自动更新 | 签名 & 沙箱 | Windows 使用 Squirrel，macOS 使用 notarize |