Electron 是什么？

¥What is Electron?

Electron 是一个使用 JavaScript、HTML 和 CSS 构建桌面应用的框架。通过将 Chromium 和 Node.js 嵌入到其二进制文件中，Electron 允许你维护一个 JavaScript 代码库并创建可在 Windows、macOS 和 Linux 上运行的跨平台应用 - 无需原生开发经验。

¥Electron is a framework for building desktop applications using JavaScript, HTML, and CSS. By embedding Chromium and Node.js into its binary, Electron allows you to maintain one JavaScript codebase and create cross-platform apps that work on Windows, macOS, and Linux — no native development experience required.

入门

¥Getting started

我们建议你从教程开始，它会指导你完成开发 Electron 应用并将其分发给用户的过程。示例和 API 文档也是浏览和发现新事物的好地方。

¥We recommend you to start with the tutorial, which guides you through the process of developing an Electron app and distributing it to users. The examples and API documentation are also good places to browse around and discover new things.

使用 Electron Fiddle 运行示例

¥Running examples with Electron Fiddle

Electron Fiddle 是一个用 Electron 编写的沙箱应用，并由 Electron 的维护者提供支持。我们强烈建议将其安装为学习工具，以试验 Electron 的 API 或在开发过程中对功能进行原型设计。

¥Electron Fiddle is a sandbox app written with Electron and supported by Electron's maintainers. We highly recommend installing it as a learning tool to experiment with Electron's APIs or to prototype features during development.

Fiddle 还与我们的文档很好地集成。浏览我们教程中的示例时，你经常会在代码块下方看到 "在 Electron Fiddle 中打开" 按钮。如果你安装了 Fiddle，此按钮将打开一个 fiddle.electronjs.org 链接，该链接将自动将示例加载到 Fiddle 中，无需复制粘贴。

¥Fiddle also integrates nicely with our documentation. When browsing through examples in our tutorials, you'll frequently see an "Open in Electron Fiddle" button underneath a code block. If you have Fiddle installed, this button will open a fiddle.electronjs.org link that will automatically load the example into Fiddle, no copy-pasting required.

docs/fiddles/quick-start (33.2.0)Open in Fiddle

main.js
preload.js
index.html

const { app, BrowserWindow } = require('electron/main')
const path = require('node:path')

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

window.addEventListener('DOMContentLoaded', () => {
  const replaceText = (selector, text) => {
    const element = document.getElementById(selector)
    if (element) element.innerText = text
  }

  for (const type of ['chrome', 'node', 'electron']) {
    replaceText(`${type}-version`, process.versions[type])
  }
})

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body>
    <h1>Hello World!</h1>
    <p>
        We are using Node.js <span id="node-version"></span>,
        Chromium <span id="chrome-version"></span>,
        and Electron <span id="electron-version"></span>.
    </p>
</body>
</html>

文档中有什么？

¥What is in the docs?

所有官方文档都可以从侧边栏获得。以下是不同的类别以及你对每个类别的期望：

¥All the official documentation is available from the sidebar. These are the different categories and what you can expect on each one:

教程：有关如何创建和发布第一个 Electron 应用的端到端指南。

¥Tutorial: An end-to-end guide on how to create and publish your first Electron application.
Electron 中的进程：有关 Electron 进程以及如何使用它们的深入参考。

¥Processes in Electron: In-depth reference on Electron processes and how to work with them.
最佳实践：开发 Electron 应用时要记住的重要清单。

¥Best Practices: Important checklists to keep in mind when developing an Electron app.
示例：向 Electron 应用添加功能的快速参考。

¥Examples: Quick references to add features to your Electron app.
开发：各种开发指南。

¥Development: Miscellaneous development guides.
分配：了解如何将你的应用分发给终端用户。

¥Distribution: Learn how to distribute your app to end users.
测试与调试：如何调试 JavaScript、编写测试和其他用于创建高质量 Electron 应用的工具。

¥Testing And Debugging: How to debug JavaScript, write tests, and other tools used to create quality Electron applications.
参考：有用的链接可以更好地了解 Electron 项目的工作和组织方式。

¥References: Useful links to better understand how the Electron project works and is organized.
贡献：编译 Electron 并做出贡献可能是令人畏惧的。我们试图让本节变得更容易。

¥Contributing: Compiling Electron and making contributions can be daunting. We try to make it easier in this section.

寻求帮助

¥Getting help

你是否被困在任何地方？以下是一些可以查看的地方的链接：

¥Are you getting stuck anywhere? Here are a few links to places to look:

如果你在开发应用时需要帮助，我们的社区 Discord 服务器是从其他 Electron 应用开发者那里获取建议的好地方。

¥If you need help with developing your app, our community Discord server is a great place to get advice from other Electron app developers.
如果你怀疑 electron 软件包遇到错误，请检查 GitHub 问题跟踪器以查看是否有任何现有问题与你的问题相符。如果没有，请随时填写我们的错误报告模板并提交新问题。

¥If you suspect you're running into a bug with the electron package, please check the GitHub issue tracker to see if any existing issues match your problem. If not, feel free to fill out our bug report template and submit a new issue.

入门​

使用 Electron Fiddle 运行示例​

文档中有什么？​

寻求帮助​

入门

使用 Electron Fiddle 运行示例

文档中有什么？

寻求帮助