什么是 Electron?
Electron 是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。通过将 Chromium 和 Node.js 嵌入到其二进制文件中,Electron 允许您维护一个 JavaScript 代码库并创建跨平台应用程序,这些应用程序可在 Windows、macOS 和 Linux 上运行——无需任何原生开发经验。
入门
我们建议您从 教程 开始,该教程将指导您完成开发 Electron 应用程序并将其分发给用户的过程。 示例 和 API 文档 也是浏览和发现新事物的不错地方。
使用 Electron Fiddle 运行示例
Electron Fiddle 是一个使用 Electron 编写的沙盒应用程序,由 Electron 的维护者提供支持。我们强烈建议您将其安装为学习工具,以试验 Electron 的 API 或在开发过程中对功能进行原型设计。
Fiddle 也与我们的文档很好地集成。当浏览教程中的示例时,您经常会在代码块下方看到一个“在 Electron Fiddle 中打开”按钮。如果您安装了 Fiddle,此按钮将打开一个 fiddle.electronjs.org
链接,该链接将自动将示例加载到 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>
文档包含哪些内容?
所有官方文档都可以在侧边栏中找到。以下是不同的类别以及您可以在每个类别中找到的内容。
- 教程:关于如何创建和发布您的第一个 Electron 应用程序的端到端指南。
- Electron 中的进程:深入了解 Electron 进程以及如何使用它们。
- 最佳实践:开发 Electron 应用程序时需要牢记的重要清单。
- 示例:向您的 Electron 应用程序添加功能的快速参考。
- 开发:各种开发指南。
- 分发:了解如何将您的应用程序分发给最终用户。
- 测试和调试:如何调试 JavaScript、编写测试以及用于创建高质量 Electron 应用程序的其他工具。
- 参考资料:有助于更好地了解 Electron 项目的工作原理和组织方式的有用链接。
- 贡献:编译 Electron 和进行贡献可能令人生畏。在本节中,我们将尽力让这一过程变得更加容易。
获取帮助
您在任何地方遇到困难了吗?以下是一些可以参考的地方的链接。
- 如果您在开发应用程序时需要帮助,我们的 社区 Discord 服务器 是一个从其他 Electron 应用程序开发人员那里获得建议的好地方。
- 如果您怀疑遇到了
electron
包的错误,请检查 GitHub 问题追踪器,看看是否有任何现有问题与您的问题匹配。如果没有,请随时填写我们的错误报告模板并提交一个新问题。