跳到主要内容

使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用

文档
web-tech 框架

Web 技术

Electron 嵌入了 Chromium 和 Node.js,使 Web 开发者能够创建桌面应用程序。

cross-platform 框架

跨平台

兼容 macOS、Windows 和 Linux,Electron 应用可在所有支持的架构上的这三个平台运行。

open-source 框架

开源

Electron 是一个开源项目,由 OpenJS 基金会 和活跃的社区贡献者共同维护。

备受一流应用信赖

流行的消费级应用和可靠的企业级应用都使用 Electron 来构建其桌面体验。

1Password logo
OpenAI ChatGPT logo
Slack logo
Anthropic Claude logo
Visual Studio Code logo
Figma logo
1Password logo
OpenAI ChatGPT logo
Slack logo
Anthropic Claude logo
Visual Studio Code logo
Figma logo

让桌面开发更轻松

Electron 处理繁重的工作,让您可以专注于应用程序的核心。

macOS operating system menu for VSCode. 'Code' menu item is selected, and its submenu has items 'About Visual Studio Code', 'Check for Updates...', 'Preferences', 'Services', 'Hide Visual Studio Code', 'Hide Others', 'Show All', 'Quit Visual Studio Code'.

原生图形用户界面

使用 Electron 的主进程 API 与操作系统的界面进行交互。定制您的 应用程序窗口 外观,控制应用程序 菜单,或通过 对话框 通知.

Dialog for Electron Fiddle's auto-update. The user is prompted to update to v0.27.3. 'A new version has been downloaded. Restart the application to apply the updates.' There are two buttons underneath: 'Later' and 'Restart'.

自动软件更新

无论何时发布新版本,都可通过 Electron 的 autoUpdater 模块,由 Squirrel.

Window on macOS for the WhatsApp Installer (DMG). Two icons are present: 'WhatsApp' and 'Applications'. The user is prompted to drag the WhatsApp app icon into the Applications folder.

应用程序安装程序

使用 社区支持的工具 来生成特定于平台的工具,例如 macOS 上的 Apple Disk Image (.dmg)、Windows 上的 Windows Installer (.msi) 或 Linux 上的 RPM Package Manager (.rpm)。

Mac App Store window open to the Rocket.Chat download page.

应用商店分发

将您的应用程序分发给更多用户。Electron 对以下商店提供一流的支持: Mac App Store (macOS), Microsoft Store (Windows),或 Snap Store (Linux)。

Screenshot of Sentry crash reporting (https://sentry.io). Shows the error message ('BrowserWindow Unresponsive'), user breadcrumbs, and user information.

崩溃报告

使用 crashReporter 模块自动收集用户的 JavaScript 和原生崩溃数据。可以使用第三方服务或设置自己的本地 Crashpad 服务器来收集这些数据。

使用您喜爱的工具

凭借现代 Chromium 的强大功能,Electron 为您提供了一个不受限制的空白画布来构建您的应用。您可以选择集成前端生态系统中您喜爱的库和框架,或使用自定义 HTML 代码开辟自己的道路。

React
Vue.js
Next.js
Tailwind CSS
Bootstrap
Three.js
Angular
TypeScript
webpack
Playwright
Testing Library
Sass
新增!

Electron Forge

Electron Forge 是一个内置了构建和发布 Electron 应用所需工具的工具包。通过对 JavaScript 打包的一流支持和可扩展的模块生态系统,以正确的方式开始您的 Electron 应用开发。

$ npm init electron-app@latest my-app
✔ Locating custom template: "base"
✔ Initializing directory
✔ Preparing template
✔ Initializing template
✔ Installing template dependencies
直接下载

安装

如果您想自行配置,可以直接从 npm 注册表安装 Electron 软件包。

为了获得生产环境就绪的体验,请安装最新的稳定版本。如果您想要尝试一些更具实验性的东西,请尝试预发布版或每夜构建版。

  • 稳定版
  • 预发布版
  • 每夜构建版
$ npm install --save-dev electron@latest
# Electron 36.1.0
# Node 22.14.0
# Chromium 136.0.7103.49
体验 API

Electron Fiddle

Electron Fiddle 允许您创建并体验小的 Electron 实验。打开后,它会提供一个快速启动模板——您可以修改一些内容,选择要运行的 Electron 版本,并进行尝试。

您可以将您的 Fiddle 保存为 GitHub Gist 或保存到本地文件夹。推送到 GitHub 后,任何人只需在地址栏中输入即可快速尝试您的 Fiddle。

Screenshot of Electron Fiddle's main window