# electron-demo

**Repository Path**: sharetoyouclub/electron-demo

## Basic Information

- **Project Name**: electron-demo
- **Description**: Electron 入门到实战：一份可运行的示例仓库 + 知识点串讲，搞懂桌面端开发。

- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 5
- **Created**: 2025-12-31
- **Last Updated**: 2026-04-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Electron Demo

基于 [Electron](https://www.electronjs.org/) 的示例集合，覆盖 IPC、窗口、进程、安全、系统能力等，每个示例可独立运行，适合学习与面试复习。

---

## 介绍

本仓库是一系列 **Electron 桌面应用示例**，按功能拆成多个独立小项目，每个项目对应一个目录，内含完整可运行代码与说明文档。

- **适合**：学习 Electron、做桌面端开发、面试前复习（仓库内含 3 套 100 分面试卷+答案）。
- **使用方式**：进入任意案例目录，安装依赖后运行（见下方「快速开始」）。各案例互不依赖，可单独克隆或复制使用。
- **文档**：每个案例目录下均有 `readme.md`（或 `README.md`），包含功能说明、运行命令与实现要点。

---

## 运行环境

- **系统**：Windows 11（示例在 Windows 下验证；macOS / Linux 下大部分可直接运行）
- **Node.js**：22.14.0（推荐 18+）
- **npm**：10.9.2
- **Electron**：各子项目在各自 `package.json` 中声明版本

---

## 快速开始

```bash
# 克隆仓库后，进入任意案例目录
cd ipc
npm install
npm run start:1

# 或进入多案例项目，按对应脚本运行，例如：
cd efficiency-process
npm install
npm run start:2
```

每个案例的详细运行方式见该目录下的 **readme.md**。

---

## 案例目录

以下案例均带链接，点击目录名可**直达该案例的 readme**（无 readme 的则进入目录）。

### 入门

| 序号 | 目录 | 说明 |
|------|------|------|
| 1 | [tutorial-first-app](./tutorial-first-app/readme.md) | Electron 第一个应用示例（主进程、渲染进程、preload、IPC 入门） |

### 窗口与 UI

| 序号 | 目录 | 说明 |
|------|------|------|
| 2 | [darkmode](./darkmode/readme.md) | 黑暗模式 / 主题切换（nativeTheme、prefers-color-scheme） |
| 3 | [windows-taskbar](./windows-taskbar/readme.md) | Windows 任务栏自定义（JumpList、缩略图工具栏、叠加图标、闪烁） |
| 4 | [window-customization](./window-customization/readme.md) | 自定义窗口（无边框、自定义标题栏、拖拽区域） |
| 5 | [progressbar](./progressbar/readme.md) | 进度条（任务栏/Dock 进度显示） |

### 进程与通信

| 序号 | 目录 | 说明 |
|------|------|------|
| 6 | [ipc](./ipc/readme.md) | 进程间通信（渲染↔主进程 单向/双向、主→渲染） |
| 7 | [message-ports](./message-ports/readme.md) | 消息端口（MessageChannel、渲染直连、流式回复） |
| 8 | [efficiency-process](./efficiency-process/readme.md) | 效率进程（Utility Process：CPU 密集型、崩溃隔离、MessagePort 直连） |
| 9 | [multithreading](./multithreading/readme.md) | 多线程（Web Workers、耗时计算不卡界面） |
| 10 | [sandbox](./sandbox/readme.md) | 进程沙盒化（渲染进程默认沙盒、安全配置） |

### 系统与原生能力

| 序号 | 目录 | 说明 |
|------|------|------|
| 11 | [menus](./menus/readme.md) | 菜单（应用菜单、上下文菜单、托盘菜单） |
| 12 | [keyboardshortcut](./keyboardshortcut/readme.md) | 键盘快捷键（局部、全局、窗口内） |
| 13 | [notificationsDemo](./notificationsDemo/readme.md) | 系统通知（主进程/渲染进程通知） |
| 14 | [bluetooth](./bluetooth/README.md) | 设备访问（如蓝牙） |
| 15 | [deeplinks](./deeplinks/readme.md) | 深度链接（自定义协议、从外部链接唤起应用） |

### 文件与文档

| 序号 | 目录 | 说明 |
|------|------|------|
| 16 | [draganddrop](./draganddrop/readme.md) | 文件拖拽（原生拖出到桌面/资源管理器） |
| 17 | [recentdocuments](./recentdocuments/readme.md) | 最近文件（系统最近文档列表） |

### Web 与导航

| 序号 | 目录 | 说明 |
|------|------|------|
| 18 | [web-embeds](./web-embeds/readme.md) | Web 嵌入（iframe、webview、WebContentsView） |
| 19 | [navigationHistory](./navigationHistory/readme.md) | 导航历史（前进/后退、goBack/goForward） |
| 20 | [onlineofflineevents](./onlineofflineevents/readme.md) | 在线/离线事件探测 |

### 其他

| 序号 | 目录 | 说明 |
|------|------|------|
| 21 | [offscreenrendering](./offscreenrendering/readme.md) | 离屏渲染 |
| 22 | [spellchecker](./spellchecker/readme.md) | 拼写检查器 |

### 学习与面试

| 序号 | 目录 | 说明 |
|------|------|------|
| 23 | [paper](./paper) | Electron 面试试卷（3 套，各 100 分，含答案与解析） |

---

## 文档与参考

- 各案例说明：进入对应目录，查看 **readme.md**（或 **README.md**）。
- [Electron 官方文档](https://www.electronjs.org/zh/docs/latest)（中文）
- [Electron 官网](https://www.electronjs.org/)

---

## License

本项目采用 [MIT](./LICENSE) 许可。欢迎 Star、Fork，或提 Issue / PR。