Back to Details

electron

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

When to use this skill

何时使用此技能

Use this skill whenever the user wants to:
  • Build cross-platform desktop applications with Electron
  • Understand Electron architecture (main process, renderer process, preload)
  • Implement IPC (Inter-Process Communication) between processes
  • Create and manage BrowserWindow instances
  • Implement menus, tray icons, and native features
  • Package and distribute Electron applications
  • Use Electron Forge for project scaffolding and building
  • Debug and test Electron applications
  • Implement security best practices
  • Use Electron APIs (app, BrowserWindow, ipcMain, ipcRenderer, etc.)
当用户有以下需求时，可使用此技能：
  • 使用Electron构建跨平台桌面应用
  • 了解Electron架构（主进程、渲染进程、预加载脚本）
  • 实现进程间的IPC（进程间通信）
  • 创建和管理BrowserWindow实例
  • 实现菜单、托盘图标及原生功能
  • 打包和分发Electron应用
  • 使用Electron Forge进行项目脚手架搭建和构建
  • 调试和测试Electron应用
  • 实施安全最佳实践
  • 使用Electron API（app、BrowserWindow、ipcMain、ipcRenderer等）

How to use this skill

如何使用此技能

This skill is organized to match the Electron official documentation structure (https://www.electronjs.org/zh/docs/latest/, https://www.electronjs.org/zh/docs/latest/api/app). When working with Electron:
  1. Identify the topic from the user's request:
    • Getting started/快速开始 → 
      examples/getting-started/installation.md
      or 
      examples/getting-started/quick-start.md
    • Main process/主进程 → 
      examples/processes/main-process.md
    • Renderer process/渲染进程 → 
      examples/processes/renderer-process.md
    • IPC communication/IPC 通信 → 
      examples/processes/ipc-communication.md
    • BrowserWindow/窗口 → 
      examples/api/browser-window.md
    • Menu/菜单 → 
      examples/api/menu.md
    • Packaging/打包 → 
      examples/advanced/packaging.md
    • Security/安全 → 
      examples/advanced/security.md
  2. Load the appropriate example file from the 
    examples/
    directory:
    Getting Started (快速开始) - 
    examples/getting-started/
    :
    • examples/getting-started/installation.md
      - Installing Electron and basic setup
    • examples/getting-started/quick-start.md
      - Quick start tutorial
    Processes (进程) - 
    examples/processes/
    :
    • examples/processes/main-process.md
      - Main process concepts and usage
    • examples/processes/renderer-process.md
      - Renderer process concepts
    • examples/processes/preload-scripts.md
      - Preload scripts usage
    • examples/processes/ipc-communication.md
      - IPC communication patterns
    API Examples (API 示例) - 
    examples/api/
    :
    • examples/api/browser-window.md
      - BrowserWindow usage
    • examples/api/menu.md
      - Menu and context menu
    • examples/api/tray.md
      - System tray
    • examples/api/dialog.md
      - File dialogs
    • examples/api/ipc-main.md
      - ipcMain usage
    • examples/api/ipc-renderer.md
      - ipcRenderer usage
    Advanced (高级) - 
    examples/advanced/
    :
    • examples/advanced/packaging.md
      - Application packaging
    • examples/advanced/security.md
      - Security best practices
    • examples/advanced/auto-updater.md
      - Auto updater
    • examples/advanced/native-modules.md
      - Native modules
    Tools (工具) - 
    examples/tools/
    :
    • examples/tools/electron-forge.md
      - Electron Forge usage
    • examples/tools/electron-fiddle.md
      - Electron Fiddle usage
  3. Follow the specific instructions in that example file for syntax, structure, and best practices
    Important Notes:
    • All examples follow Electron latest API
    • Examples use both CommonJS (require) and ES modules (import)
    • Each example file includes key concepts, code examples, and key points
    • Always check the example file for best practices and common patterns
    • Electron supports Windows, macOS, and Linux
  4. Reference API documentation in the 
    api/
    directory when needed:
    • api/app.md
      - app module 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. Use templates from the 
    templates/
    directory:
    • templates/main-process.md
      - Main process template
    • templates/preload-script.md
      - Preload script template
    • templates/renderer-process.md
      - Renderer process template
    • templates/package-json.md
      - package.json template
本技能的组织结构与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
      - 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模板

Doc mapping (one-to-one with official documentation)

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

Examples and Templates

示例与模板

This skill includes detailed examples organized to match the official documentation structure. All examples are in the 
examples/
directory (see mapping above).
To use examples:
  • Identify the topic from the user's request
  • Load the appropriate example file from the mapping above
  • Follow the instructions, syntax, and best practices in that file
  • Adapt the code examples to your specific use case
To use templates:
  • Reference templates in 
    templates/
    directory for common scaffolding
  • Adapt templates to your specific needs and coding style
本技能包含详细的示例，组织结构与官方文档一致。所有示例均位于
examples/
目录（见上述映射）。
使用示例的方法:
  • 从用户请求中确定主题
  • 根据上述映射加载对应的示例文件
  • 遵循文件中的说明、语法和最佳实践
  • 根据具体用例调整代码示例
使用模板的方法:
  • 参考
    templates/
    目录中的模板进行通用脚手架搭建
  • 根据具体需求和编码风格调整模板

API Reference

API参考

Detailed API documentation is available in the 
api/
directory, organized to match the official Electron API documentation structure:
详细的API文档位于
api/
目录，组织结构与Electron官方API文档一致:

Core APIs (
api/
)

核心API (
api/
)

  • api/app.md
    - app module 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
  • api/dialog.md
    - Dialog API
To use API reference:
  1. Identify the API you need help with
  2. Load the corresponding API file from the 
    api/
    directory
  3. Find the API signature, parameters, return type, and examples
  4. Reference the linked example files for detailed usage patterns
  5. All API files include links to relevant example files in the 
    examples/
    directory
  • 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
  • api/dialog.md
    - Dialog API
使用API参考的方法:
  1. 确定所需的API
  2. 从
    api/
    目录加载对应的API文件
  3. 查找API签名、参数、返回类型和示例
  4. 参考关联的示例文件获取详细使用模式
  5. 所有API文件均包含指向
    examples/
    目录中相关示例文件的链接

Best Practices

最佳实践

  1. Security: Never enable nodeIntegration in renderer process, use preload scripts
  2. Process separation: Keep main and renderer processes separate
  3. IPC communication: Use IPC for safe communication between processes
  4. Resource management: Properly clean up resources (windows, listeners)
  5. Error handling: Implement proper error handling and crash reporting
  6. Performance: Optimize for performance, use webContents for debugging
  7. Packaging: Use Electron Forge or electron-builder for packaging
  8. Auto updates: Implement auto-updater for production apps
  9. Native modules: Handle native module compatibility
  10. Cross-platform: Test on all target platforms
  1. 安全: 切勿在渲染进程中启用nodeIntegration，使用预加载脚本
  2. 进程分离: 保持主进程与渲染进程分离
  3. IPC通信: 使用IPC实现进程间的安全通信
  4. 资源管理: 正确清理资源（窗口、监听器）
  5. 错误处理: 实施完善的错误处理和崩溃报告
  6. 性能: 优化性能，使用webContents进行调试
  7. 打包: 使用Electron Forge或electron-builder进行打包
  8. 自动更新: 为生产应用实现自动更新功能
  9. 原生模块: 处理原生模块的兼容性问题
  10. 跨平台: 在所有目标平台上进行测试

Resources

资源

Keywords

关键词

Electron, desktop app, main process, renderer process, preload, IPC, BrowserWindow, Menu, Tray, Dialog, packaging, electron-builder, electron-forge, electron-fiddle, cross-platform, 桌面应用, 主进程, 渲染进程, IPC 通信, 窗口, 菜单, 托盘, 打包
Electron, 桌面应用, 主进程, 渲染进程, 预加载, IPC, BrowserWindow, 菜单, 托盘, 对话框, 打包, electron-builder, electron-forge, electron-fiddle, 跨平台, 桌面应用, 主进程, 渲染进程, IPC通信, 窗口, 菜单, 托盘, 打包