跳至主要內容

使用 JavaScript、HTML 和 CSS 建構跨平台桌面應用程式

文件
web-tech

網頁技術

Electron 嵌入 Chromium 和 Node.js,讓網頁開發人員能夠建立桌面應用程式。

cross-platform

跨平台

Electron 應用程式與 macOS、Windows 和 Linux 相容,可在所有支援的架構上跨三個平台執行。

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 模組向您的 macOS 和 Windows 使用者發送軟體更新,該模組由 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 套件。

為了獲得生產就緒的體驗,請安裝最新的穩定版本。如果您想要更具實驗性的版本,請嘗試預發行或每夜版本管道。

  • 穩定版
  • 預發行版
  • 每夜版
$ 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 來建構跨平台軟體。