Electron学习大纲
Electron 实际工作学习大纲路线,结合技术原理、实战开发与工程化最佳实践,分为 5 大核心阶段,每个阶段包含关键知识点和实践目标,帮助快速掌握桌面应用开发能力:
阶段一:Electron 基础与环境搭建(1-2周)
- 核心概念与架构
- Electron 组成:
- 主进程(Main Process):控制应用生命周期、窗口、原生模块。
- 渲染进程(Renderer Process):基于 Chromium 的网页内容,与浏览器环境相同。
- IPC(进程间通信):
ipcMain
和ipcRenderer
的双向通信机制。
- 进程隔离原则:解释主进程与渲染进程的职责分离,避免常见错误(如在渲染进程中直接操作文件系统)。
- 开发环境配置
- 安装 Node.js 和 Electron:
npm install electron --save-dev
- Hello World 项目:
- 创建
main.js
(主进程入口)。 - 构建基本窗口:
BrowserWindow
的创建与生命周期管理。 - 运行命令:
npx electron .
- 创建
- 基础组件实践
- 窗口管理:
- 自定义窗口样式(无边框、透明背景)。
- 窗口拖动、最大化/最小化/关闭逻辑。
- 菜单与快捷键:
- 使用
Menu
模块创建自定义菜单栏。 - 绑定全局快捷键(如
Ctrl+C
自定义功能)。
- 使用