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 编写的沙箱应用，并由 Electron 的维护者支持。我们强烈建议将其作为学习工具安装，以便尝试 Electron 的 API 或在开发进程中进行功能原型设计。

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 (40.6.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 应用的端到端指南。
Electron 中的进程：关于 Electron 进程及其操作方法的深入参考资料。
最佳实践：在开发 Electron 应用时需要记住的重要清单。
示例：快速参考，用于向你的 Electron 应用添加功能。
开发：各类开发指南。
分发：了解如何将你的应用分发给终端用户。
测试与调试：如何调试 JavaScript、编写测试，以及用于创建高质量 Electron 应用的其他工具。
参考资料：有助于更好地理解 Electron 项目的工作原理及其组织结构的有用链接。
贡献：编译 Electron 并做出贡献可能令人生畏。我们在本节中尽量让它变得更容易。

寻求帮助

🌐 Getting help

你遇到困难了吗？这里有一些可以查看的链接：

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

如果你在开发应用时需要帮助，我们的社区 Discord 服务器是向其他 Electron 应用开发者寻求建议的好地方。
如果你怀疑自己遇到了 electron 包的 bug，请先查看 GitHub 问题跟踪器，看看是否已有的相关问题与你遇到的情况相符。如果没有，请随时填写我们的错误报告模板并提交新的问题。

入门​

使用 Electron Fiddle 运行示例​

文档中有什么？​

寻求帮助​

入门

使用 Electron Fiddle 运行示例

文档中有什么？

寻求帮助