Electron 学习示例项目

这是一个适合入门学习的 Electron demo。项目刻意保持简单，并在关键代码中加入了大量中文注释。

如何运行

先安装依赖：

npm install

启动应用：

npm start

文件说明

• package.json：项目配置，main 指向 Electron 主进程入口，scripts.start 用来启动应用。
• main.js：主进程入口，负责创建窗口/子窗口、创建菜单栏、管理应用生命周期、调用系统原生能力、系统通知、原生主题、处理 IPC、读写文件。
• preload.js：安全桥梁，负责把有限、明确的 API 暴露给网页。
• index.html：应用界面结构和样式。
• renderer.js：渲染进程脚本，负责页面交互和调用 window.electronAPI。

第一阶段：基础概念

你会先学习：

• Electron 主进程和渲染进程的分工。
• 如何创建桌面应用窗口。
• 为什么需要 preload.js。
• 如何通过 IPC 让页面调用系统能力。
• 如何调用系统原生弹窗和文件选择框。

第二阶段：新增小功能

这次新增了几个适合继续学习的小功能：

1. 菜单栏

   • 在 main.js 中使用 Menu.buildFromTemplate() 创建应用菜单。
   • 点击菜单后，主进程通过 webContents.send() 给页面发送消息。

2. 窗口控制

   • 页面点击按钮后，通过 IPC 请求主进程执行窗口最小化、最大化/恢复、居中。
   • 学习重点：BrowserWindow 属于主进程，不应该直接暴露给页面。

3. 本地文本文件读写

   • 页面里提供一个小型文本编辑器。
   • 主进程负责打开文件选择框、读取文件、保存文件。
   • 学习重点：涉及磁盘读写的敏感操作放在主进程中处理。

4. 主题偏好保存

   • 点击按钮可以切换浅色/深色主题。
   • 主题会保存到 Electron 的 userData 目录中。
   • 重启应用后会读取上一次保存的主题。

第三阶段：新增小功能

这次新增了几个更接近真实桌面应用的小功能：

1. 多窗口

   • 主进程新增 createAboutWindow()。
   • 点击页面按钮或菜单栏，可以打开一个“关于/帮助”子窗口。
   • 学习重点：一个 Electron 应用可以有多个 BrowserWindow。

2. 外部链接

   • 使用 shell.openExternal() 调用系统默认浏览器打开 Electron 官网。
   • 学习重点：不要把任意 URL 直接暴露给页面，示例里使用主进程白名单固定打开官网。

3. 窗口大小与位置持久化

   • 主窗口关闭时会保存 getBounds()。
   • 下次启动时会读取保存过的窗口大小和位置。
   • 学习重点：用户体验不仅是功能，还包括记住用户上次的工作状态。

4. 同一个 HTML 页面按模式复用

   • 子窗口复用 index.html。
   • 主进程通过 query: { mode: 'about' } 告诉页面切换到 about 模式。
   • 学习重点：多窗口不一定每个窗口都要新建一个 HTML 文件。

第四阶段：进一步进阶

这一阶段开始关注更像真实应用的体验和架构：

1. 系统原生通知

   • 使用 Notification 在操作系统层面显示提醒。
   • 适合任务完成、消息到达、下载完成等场景。

2. 长耗时任务进度

   • 主进程用 setInterval() 模拟耗时任务。
   • 主进程通过 webContents.send('task:progress', payload) 持续把进度推送给渲染进程。
   • 学习重点：不是所有 IPC 都是请求-响应，也有事件推送型 IPC。

3. 任务取消

   • 页面可以请求主进程取消正在运行的模拟任务。
   • 学习重点：长任务通常需要状态管理，例如 running、done、cancelled。

4. 原生主题 nativeTheme

   • 使用 nativeTheme.themeSource 控制应用跟随系统、强制浅色、强制深色。
   • 使用 nativeTheme.on('updated') 监听主题变化。

建议学习顺序

1. 阅读 package.json，理解 npm start 如何启动 Electron。
2. 阅读 main.js，重点理解 app.whenReady()、BrowserWindow、Menu、webPreferences.preload、ipcMain.handle()。
3. 阅读 preload.js，理解 contextBridge.exposeInMainWorld() 和 IPC 白名单。
4. 阅读 renderer.js，理解页面如何调用主进程能力。
5. 修改页面按钮或新增一个 IPC 示例，比如保存窗口大小、打开第二个窗口、增加托盘图标等。

后续可以继续扩展的练习

• 增加第二个窗口：学习多窗口通信。
• 增加托盘图标：学习 Tray 模块。
• 记录窗口大小和位置：学习更完整的用户配置保存。
• 打包应用：学习 electron-builder 或 electron-forge。
• 拆分 CSS 文件和前端组件：学习更接近真实项目的组织方式。