跳轉到主要內容

使用 JavaScript、HTML 和 CSS 構建跨平臺桌面應用

由 Web 提供支援

Electron 嵌入 Chromium 和 Node.js,將 JavaScript 帶到桌面。

跨平臺

Electron 應用可在所有支援的架構的 macOS、Windows 和 Linux 上原生執行。

對所有人開放

Electron 是一個開源專案,由 OpenJS 基金會 維護,並擁有活躍的貢獻者社群。

穩定

Electron 捆綁的 Chromium 構建可確保您的應用擁有穩定的渲染目標,並具有所有最新的 Web 平臺功能。

安全

Electron 的主要版本與 Chromium 保持同步,因此您可以儘快獲得安全修復。

可擴充套件

使用來自豐富的 npm 生態系統中的任何包,或編寫您自己的 原生附加程式碼 以擴充套件 Electron。

受一流應用的信賴

流行的消費者應用和堅實的的企業應用使用 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 和 Windows 使用者傳送軟體更新。

應用程式安裝程式 使用 社群支援的工具

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

生成特定於平臺的工具,例如 macOS 上的 Apple 磁碟映像 (.dmg)、Windows 上的 Windows 安裝程式 (.msi) 或 Linux 上的 RPM 包管理器 (.rpm)。

應用商店分發 將您的應用程式分發給更多使用者。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 40.0.0
# Node 24.11.1
# Chromium 144.0.7559.60
試驗 API

Electron Fiddle

Electron Fiddle 允許您建立和使用小的 Electron 實驗。開啟後,它會向您問候一個快速入門模板 - 更改一些內容,選擇您想要執行它的 Electron 版本,然後進行試驗。

將您的 Fiddle 儲存為 GitHub Gist 或本地資料夾。推送到 GitHub 後,任何人都可以透過在位址列中輸入它來快速嘗試您的 Fiddle。

Screenshot of Electron Fiddle's main window

使用者喜愛的應用,使用 Electron 構建

成千上萬的組織跨越所有行業使用 Electron 構建跨平臺軟體。