electron

何时使用此技能

在用户希望执行以下操作时使用此技能：

• 使用 Electron 构建跨平台桌面应用程序
• 了解 Electron 架构（主进程、渲染进程、预加载脚本）
• 实现进程间通信（IPC）
• 创建和管理 BrowserWindow 实例
• 实现菜单、托盘图标和原生功能
• 打包和分发 Electron 应用程序
• 使用 Electron Forge 搭建项目并进行构建
• 调试和测试 Electron 应用程序
• 实现安全最佳实践
• 使用 Electron API（app、BrowserWindow、ipcMain、ipcRenderer 等）

如何使用此技能

此技能按照 Electron 官方文档的结构组织（https://www.electronjs.org/zh/docs/latest/、https://www.electronjs.org/zh/docs/latest/api/app）。使用 Electron 时：

1. 根据用户的请求确定主题：

   • 入门/快速开始 → examples/getting-started/installation.md 或 examples/getting-started/quick-start.md
   • 主进程/主进程 → examples/processes/main-process.md
   • 渲染进程/渲染进程 → examples/processes/renderer-process.md
   • IPC 通信/IPC 通信 → examples/processes/ipc-communication.md
   • BrowserWindow/窗口 → examples/api/browser-window.md
   • 菜单/菜单 → examples/api/menu.md
   • 打包/打包 → examples/advanced/packaging.md
   • 安全/安全 → examples/advanced/security.md

2. 从 examples/ 目录加载相应的示例文件：

   快速开始 - examples/getting-started/：

   • examples/getting-started/installation.md - 安装 Electron 并进行基本设置
   • examples/getting-started/quick-start.md - 快速入门教程

   进程 - examples/processes/：

   • examples/processes/main-process.md - 主进程概念及用法
   • examples/processes/renderer-process.md - 渲染进程概念
   • examples/processes/preload-scripts.md - 预加载脚本用法
   • examples/processes/ipc-communication.md - IPC 通信模式

   API 示例 - examples/api/：

   • examples/api/browser-window.md - BrowserWindow 用法
   • examples/api/menu.md - 菜单和上下文菜单
   • examples/api/tray.md - 系统托盘
   • examples/api/dialog.md - 文件对话框
   • examples/api/ipc-main.md - ipcMain 用法
   • examples/api/ipc-renderer.md - ipcRenderer 用法

   高级 - examples/advanced/：

   • examples/advanced/packaging.md - 应用程序打包
   • examples/advanced/security.md - 安全最佳实践
   • examples/advanced/auto-updater.md - 自动更新程序
   • examples/advanced/native-modules.md - 原生模块

   工具 - examples/tools/：

   • examples/tools/electron-forge.md - Electron Forge 用法
   • examples/tools/electron-fiddle.md - Electron Fiddle 用法

3. 遵循相应示例文件中的具体说明，了解语法、结构和最佳实践

   重要说明：

   • 所有示例均遵循 Electron 最新 API
   • 示例同时使用 CommonJS（require）和 ES 模块（import）
   • 每个示例文件都包含关键概念、代码示例和要点
   • 请务必查看示例文件，了解最佳实践和常见模式
   • Electron 支持 Windows、macOS 和 Linux

4. 需要时参考 api/ 目录中的 API 文档：

   • api/app.md - app 模块 API
   • api/browser-window.md - BrowserWindow API
   • api/ipc-main.md - ipcMain API
   • api/ipc-renderer.md - ipcRenderer API
   • api/menu.md - Menu API
   • api/tray.md - Tray API

5. 使用 templates/ 目录中的模板：

   • templates/main-process.md - 主进程模板
   • templates/preload-script.md - 预加载脚本模板
   • templates/renderer-process.md - 渲染进程模板
   • templates/package-json.md - package.json 模板

文档映射（一对一对应官方文档）

• examples/ → https://www.electronjs.org/zh/docs/latest/
• api/ → https://www.electronjs.org/zh/docs/latest/api/app

快速入门示例

// main.js
const { app, BrowserWindow, ipcMain } = require('electron')
const path = require('path')

function createWindow() {
  const win = new BrowserWindow({
    width: 800, height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: false,  // Security: always disable
      contextIsolation: true    // Security: always enable
    }
  })
  win.loadFile('index.html')
}

app.whenReady().then(createWindow)

// IPC handler example
ipcMain.handle('get-data', async () => {
  return { message: 'Hello from main process' }
})

// preload.js
const { contextBridge, ipcRenderer } = require('electron')
contextBridge.exposeInMainWorld('api', {
  getData: () => ipcRenderer.invoke('get-data')
})

API 参考（api/）

• api/app.md - app 模块 API
• api/browser-window.md - BrowserWindow API
• api/ipc-main.md / api/ipc-renderer.md - IPC API
• api/menu.md / api/tray.md / api/dialog.md - UI API

最佳实践

1. 安全性：切勿在渲染进程中启用 nodeIntegration，应使用预加载脚本
2. 进程隔离：保持主进程和渲染进程相互隔离
3. IPC 通信：使用 IPC 在进程之间安全通信
4. 资源管理：妥善清理资源（窗口、监听器）
5. 错误处理：实现适当的错误处理和崩溃报告
6. 性能：优化性能，使用 webContents 进行调试
7. 打包：使用 Electron Forge 或 electron-builder 进行打包
8. 自动更新：为生产应用实现自动更新器
9. 原生模块：处理原生模块兼容性
10. 跨平台：在所有目标平台上进行测试

资源

• 官方网站：https://www.electronjs.org/zh/
• 文档：https://www.electronjs.org/zh/docs/latest/
• API 参考：https://www.electronjs.org/zh/docs/latest/api/app
• Electron Forge：https://www.electronforge.io
• Electron Fiddle：https://www.electronjs.org/zh/fiddle
• GitHub 仓库：https://github.com/electron/electron

关键词

Electron、桌面应用、主进程、渲染进程、预加载、IPC、BrowserWindow、Menu、Tray、Dialog、打包、electron-builder、electron-forge、electron-fiddle、跨平台、桌面应用、主进程、渲染进程、IPC 通信、窗口、菜单、托盘、打包