⚡

Electron桌面应用开发指南Skill electron

此技能提供对Electron框架的全面指导，帮助用户构建跨平台桌面应用程序。涵盖主进程、渲染进程、IPC通信、窗口管理等关键概念，并包括最佳实践、安全建议和打包分发方法。关键词：Electron, 桌面应用, 跨平台开发, IPC, BrowserWindow, 安全, 打包。

前端开发 0 次安装 0 次浏览 更新于 3/21/2026

name: electron description: 提供对Electron框架的全面指导，包括主进程、渲染进程、IPC通信、窗口管理以及桌面应用开发。当用户询问Electron，需要创建桌面应用程序、实现Electron功能或构建跨平台桌面应用时使用。 license: Complete terms in LICENSE.txt

何时使用此技能

当用户希望：

  • 使用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通信 → 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 - 菜单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/ 目录中（见上述映射）。

使用示例：

  • 从用户请求中识别主题
  • 从上述映射加载适当的示例文件
  • 遵循该文件中的指令、语法和最佳实践
  • 将代码示例适应到您的特定用例

使用模板：

  • 参考 templates/ 目录中的模板以获取常见脚手架
  • 将模板适应到您的特定需求和编码风格

API参考

详细API文档在 api/ 目录中可用，组织以匹配官方Electron API文档结构：

核心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 - 菜单API
  • api/tray.md - Tray API
  • api/dialog.md - 对话框API

使用API参考：

  1. 识别您需要帮助的API
  2. 从 api/ 目录加载相应的API文件
  3. 查找API签名、参数、返回类型和示例
  4. 参考链接的示例文件以获取详细使用模式
  5. 所有API文件包括到 examples/ 目录中相关示例文件的链接

最佳实践

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

资源

关键词

Electron, 桌面应用, 主进程, 渲染进程, 预加载, IPC, BrowserWindow, 菜单, 托盘, 对话框, 打包, electron-builder, electron-forge, electron-fiddle, 跨平台