1. 核心概念
- 架构：
- 主进程：控制应用生命周期（如创建窗口、处理系统事件），运行
main.js。
- 渲染进程：每个 Web 页面（窗口）一个进程，负责 UI 渲染，可访问 DOM 和 Node.js API。
- 进程通信：通过
ipcMain（主进程）和 ipcRenderer（渲染进程）实现双向通信。
- 应用结构：
package.json：配置应用入口、脚本和依赖。main.js：主进程入口，管理窗口和应用事件。renderer.js：渲染进程逻辑，处理 UI 交互。
2. 应用开发
窗口管理
- BrowserWindow：创建和管理应用窗口，支持自定义配置（尺寸、透明度、无边框等）。
- 多窗口应用：主窗口、模态框、托盘菜单等，通过
webContents 通信。
UI 与渲染
- 前端技术：HTML、CSS、JavaScript，可集成框架（React/Vue/Angular）。
- 原生 UI 组件：通过
@electron/remote 或自定义模块调用系统对话框、文件选择器等。
系统集成
- 文件操作：使用 Node.js 的
fs 模块读写文件。
- 托盘图标：通过
Tray 类实现系统托盘应用。
- 菜单与快捷键：自定义应用菜单（
Menu）和全局快捷键（globalShortcut）。
数据存储
- 本地存储：
localStorage：Web API，存储简单数据。electron-store：基于 JSON 文件的键值存储。- SQLite：通过
better-sqlite3 等模块实现结构化存储。
3. 进程通信
- IPC（进程间通信）：
- 主进程 → 渲染进程：
webContents.send() 发送消息，渲染进程监听 ipcRenderer.on()。
- 渲染进程 → 主进程：
ipcRenderer.send() 发送消息，主进程监听 ipcMain.on()。
- 远程模块（Remote）：通过
@electron/remote 在渲染进程中直接调用主进程 API（需谨慎使用，存在安全风险）。
4. 打包与分发
- 打包工具：
electron-builder：支持多平台（Windows/macOS/Linux），自动生成安装程序。electron-packager：生成可执行文件，需手动配置安装程序。
- 应用签名：为 macOS 和 Windows 应用签名，提升安全性和用户信任度。
5. 性能优化
- 内存管理：避免内存泄漏，及时销毁不再使用的窗口和对象。
- 懒加载：延迟加载非关键资源，提升启动速度。
- WebWorker：在渲染进程中使用 WebWorker 处理耗时任务，避免 UI 卡顿。
- 代码分割：通过 Webpack 等工具分割代码，减少主进程和渲染进程的启动时间。
6. 安全实践
- 禁用 Node.js 集成：在渲染进程中使用
nodeIntegration: false，通过预加载脚本（preload.js）安全暴露 API。
- 沙箱模式：启用
sandbox: true 限制渲染进程权限。
- 内容安全策略（CSP）：通过
webPreferences.contentSecurityPolicy 限制页面加载资源的来源。
- 输入验证：对用户输入和外部资源进行严格验证，防止代码注入攻击。
7. 调试与测试
- 调试工具：
- Chrome DevTools：调试渲染进程。
- VS Code 调试：通过配置
launch.json 调试主进程和渲染进程。
- 自动化测试：
- 单元测试：Jest/Mocha 测试独立模块。
- 端到端测试：Playwright/Puppeteer/Electron Fiddle 测试用户交互流程。
8. 高级特性
- 自动更新：使用
electron-updater 实现应用自动更新。
- 原生模块：通过
node-gyp 编译 C++ 模块扩展功能。
- 硬件访问：通过 Node.js 模块访问串口、USB 设备等。