跳至主要内容

使用 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 磁盘映像 (.dmg)、Windows 上的 Windows 安装程序 (.msi) 或 Linux 上的 RPM 软件包管理器 (.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 包。

为了获得生产就绪的体验,请安装最新的稳定版本。如果您想要更具实验性的东西,请尝试预发布或 nightly 通道。

  • 稳定版
  • 预发布版
  • Nightly 版
$ npm install --save-dev electron@latest
# Electron 34.0.0
# Node 20.18.1
# Chromium 132.0.6834.83
使用 API 进行试验

Electron Fiddle

Electron Fiddle 让您创建和把玩小型 Electron 实验。打开后,它会向您显示一个快速入门模板——更改一些内容,选择您要运行它的 Electron 版本,然后进行尝试。

将您的 Fiddle 保存为 GitHub Gist 或本地文件夹。一旦推送到 GitHub,任何人都可以通过在地址栏中输入它来快速尝试您的 Fiddle。

Screenshot of Electron Fiddle's main window

用户喜爱的应用,使用 Electron 构建

数千家跨越各个行业的组织使用 Electron 来构建跨平台软件。