Electron 知识模块 💻
使用 Web 技术构建跨平台桌面应用
学习路线
核心架构 → 安全实践 → 打包与分发 → 原生集成 → 调试与性能
│ │ │ │ │
▼ ▼ ▼ ▼ ▼
进程模型 上下文隔离 自动更新 托盘/菜单 DevTools
IPC 通信 权限控制 代码签名 对话框 electron-log
MessagePort 协议拦截 blockmap 快捷键 白屏排查
Utility Process 依赖审计核心篇
- 核心架构 🔥
- 进程模型（主进程 vs 渲染进程）
- IPC 通信机制、MessagePort、Utility Process
- Preload 脚本
- BrowserWindow 配置
深入篇 🔥
安全实践 ⭐
- 上下文隔离（Context Isolation）
- 权限控制与沙箱
- 远程内容安全、协议拦截、依赖审计
- CSP 配置
原生集成 ⭐
- 系统托盘（Tray）、原生菜单（Menu）
- 通知、对话框、剪贴板、全局快捷键
- 与 Web 页面交互模式
实践篇 🔥
打包与分发 ⭐
- electron-builder 配置
- 自动更新、blockmap 增量更新
- 代码签名与公证、多环境构建
- CI/CD 集成
调试与性能 ⭐
- DevTools、主进程调试、source map
- 多窗口内存、性能优化
- electron-log、崩溃上报
- 白屏、打包路径、ASAR 调试
代码示例
| 示例 | 说明 |
|---|---|
examples/ipc-demo/ | IPC 通信：send / invoke / webContents.send 三种方式 |
examples/preload-context-bridge/ | contextBridge 白名单 API，含主进程校验 |
examples/auto-update-demo/ | electron-updater 最小配置，GitHub Releases 发布流程 |
核心特点
- 跨平台：一套代码运行在 Windows/macOS/Linux
- Web 技术：使用 HTML/CSS/JS 构建 UI
- Node.js 能力：完整的文件系统、网络访问
- 原生 API：系统托盘、通知、菜单等
高频面试考点
- 主进程和渲染进程的区别？
- 什么是 Context Isolation？为什么需要？
- IPC 通信的几种方式？MessagePort 与 ipcMain 的区别？
- 如何实现自动更新？blockmap 增量更新原理？
- Utility Process 的用途？与主进程的区别？
- 打包后白屏常见原因？如何排查？