想学 Electron？这份「能跑的示例集」一篇搞懂
VS Code、钉钉、Slack、Figma 桌面版......这些你熟悉的软件，背后都有同一个名字：Electron 。用前端技术（HTML/CSS/JS）就能做桌面应用，是很多团队的选择。但官方文档知识点多、自己从零搭又容易踩坑，有没有一份「按主题拆好、每个都能直接跑」的示例？ 有。本文就介绍这样一份示例仓库，并帮你把 Electron 的核心知识点串一遍，看完一篇，知道学什么、去哪看代码。
一、Electron 是什么？这个仓库能帮你什么？
一句话： Electron 让你用写网页的技术（HTML/CSS/JavaScript）来开发桌面软件，一套代码可跑在 Windows、macOS、Linux 上。
这个仓库做什么： 把 Electron 常见能力拆成 23 个独立小项目 ，每个项目一个文件夹，里面是可运行代码 + 说明文档。你不需要从零搭环境，克隆下来进目录、装依赖、运行命令就能看到效果。适合：
- 想学 Electron 的人：按主题边看边跑，比光看文档好懂；
- 做桌面端开发的人：遇到「窗口、菜单、通知、IPC」等问题，可以对着对应示例改；
- 面试前突击的人：仓库里还带 3 套 Electron 面试卷（含答案），可用来自查。
二、怎么跑起来？（3 步）
环境准备： 本机装好 Node.js（建议 18 及以上），示例在 Windows 11 下验证过，macOS / Linux 下大多也可直接运行。
运行任意一个示例：
- 克隆仓库；
- 进入想玩的案例目录（例如
ipc、darkmode）； - 在该目录下执行：
npm install→npm run start或npm run start:1（具体看该目录的 readme）。
每个案例的详细命令和说明 都在对应目录的 readme.md 里，进去就能看到。
三、Electron 知识点串讲（对应仓库怎么用）
下面按「从入门到进阶」的顺序，把主要概念过一遍，并标出仓库里哪一类示例可以对照着看。不展开代码细节，只帮你建立地图。
1. 入门：第一个应用长什么样？
Electron 应用至少有两个「角色」：主进程 （负责创建窗口、系统 API）和渲染进程 （你看到的页面）。两者不能直接互相调函数，要通过 preload 脚本 安全地暴露接口，或用 IPC（进程间通信）传消息。
仓库对应： tutorial-first-app ------ 第一个应用、主进程 / 渲染进程 / preload / IPC 入门。
2. 进程与通信：页面和「后台」怎么配合？
- IPC：渲染进程和主进程互相发消息（单向、双向、主进程主动推给页面等）。
- MessagePort：更灵活的通道，适合「渲染进程直连」「流式回复」等场景。
- Utility Process（效率进程）：跑 CPU 重活或容易崩的逻辑，和主进程隔离，用 MessagePort 通信。
- 多线程：在渲染进程里用 Web Worker，避免大量计算卡住界面。
- 沙盒：渲染进程默认沙盒、安全配置，减少安全风险。
仓库对应： ipc、message-ports、efficiency-process、multithreading、sandbox。
3. 窗口与 UI：桌面应用「长什么样」？
- 暗色模式 ：用系统主题或自己切换，和 CSS 的
prefers-color-scheme配合。 - 任务栏：Windows 上的 JumpList、缩略图工具栏、进度条、图标闪烁等。
- 窗口定制：无边框、自定义标题栏、拖拽区域。
- 进度条：在任务栏 / Dock 上显示进度（如下载、处理任务）。
仓库对应： darkmode、windows-taskbar、window-customization、progressbar。
4. 系统与原生能力：和操作系统打交道
- 菜单：应用菜单、右键菜单、托盘菜单。
- 快捷键：绑定在菜单上的、全局的、窗口内自己监听的。
- 系统通知：像微信/邮件那样在系统通知栏弹出，而不是只在页面里弹个提示。
- 设备访问：例如蓝牙（Web Bluetooth API）。
- 深度链接：自定义协议，从浏览器或别的应用点链接唤起你的应用。
仓库对应： menus、keyboardshortcut、notificationsDemo、bluetooth、deeplinks。
5. 文件与文档、Web 与导航
- 文件拖拽：把文件从应用拖到桌面或资源管理器。
- 最近文档：系统「最近打开」列表的集成。
- Web 嵌入：在窗口里嵌网页（iframe、webview、WebContentsView）。
- 导航历史：窗口内前进/后退（goBack / goForward）。
- 在线/离线：检测网络状态，做离线提示或缓存策略。
仓库对应： draganddrop、recentdocuments、web-embeds、navigationHistory、onlineofflineevents。
6. 其他常用能力
- 离屏渲染：在不可见的画布上渲染（例如生成图、PDF）。
- 拼写检查：系统级拼写检查集成。
仓库对应： offscreenrendering、spellchecker。
7. 学习与面试
仓库内带 paper 目录：3 套 Electron 面试卷，各 100 分，含答案与解析，适合考前自查。
四、案例目录一览（按需进目录看 readme 和代码）
下面表格里的目录名 ，在仓库里对应一个文件夹，点进去有 readme 和可运行代码 。不同子项目可能有不同启动命令（如 npm run start:1、start:2），以该目录下的 readme 为准。
| 分类 | 序号 | 目录 | 说明 |
|---|---|---|---|
| 入门 | 1 | tutorial-first-app | 第一个应用（主进程、渲染进程、preload、IPC 入门） |
| 窗口与 UI | 2 | darkmode | 黑暗模式 / 主题切换 |
| 3 | windows-taskbar | Windows 任务栏（JumpList、缩略图、叠加图标、闪烁） | |
| 4 | window-customization | 自定义窗口（无边框、自定义标题栏、拖拽区域） | |
| 5 | progressbar | 任务栏/Dock 进度条 | |
| 进程与通信 | 6 | ipc | 进程间通信（单向/双向、主→渲染） |
| 7 | message-ports | 消息端口（MessageChannel、流式回复） | |
| 8 | efficiency-process | 效率进程（Utility Process、MessagePort） | |
| 9 | multithreading | 多线程（Web Workers） | |
| 10 | sandbox | 进程沙盒与安全配置 | |
| 系统与原生 | 11 | menus | 菜单（应用菜单、上下文菜单、托盘） |
| 12 | keyboardshortcut | 键盘快捷键（局部、全局、窗口内） | |
| 13 | notificationsDemo | 系统通知（主进程/渲染进程） | |
| 14 | bluetooth | 设备访问（如蓝牙） | |
| 15 | deeplinks | 深度链接（自定义协议、从链接唤起应用） | |
| 文件与文档 | 16 | draganddrop | 文件拖拽（拖出到桌面/资源管理器） |
| 17 | recentdocuments | 最近文件（系统最近文档列表） | |
| Web 与导航 | 18 | web-embeds | Web 嵌入（iframe、webview、WebContentsView） |
| 19 | navigationHistory | 导航历史（前进/后退） | |
| 20 | onlineofflineevents | 在线/离线事件 | |
| 其他 | 21 | offscreenrendering | 离屏渲染 |
| 22 | spellchecker | 拼写检查器 | |
| 学习与面试 | 23 | paper | Electron 面试卷（3 套，含答案与解析） |
五、去哪看代码？仓库在这里
以上所有示例的完整代码、运行命令和说明都在下面这个仓库里，每个案例独立可运行，按目录即可找到对应 readme 和代码。
仓库地址： [gitee.com/sharetoyouc...]
克隆后，进入任意目录执行 npm install，再按该目录 readme 的脚本运行即可。MIT 许可，欢迎 Star、Fork，或提 Issue / PR。
本文基于 Electron 官方文档与示例整理，旨在帮助初学者和开发者快速建立知识地图并找到可运行示例。