What is Electron?Electron是什么?
Electron is a framework for building desktop applications using JavaScript, HTML, and CSS. 是一个使用JavaScript、HTML和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.通过将Chromium和Node.js嵌入其二进制文件,Electron允许您维护一个JavaScript代码库,并创建在Windows、macOS和Linux上工作的跨平台应用程序-无需本地开发经验。
Getting started开始
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.示例和API文档也是浏览和发现新事物的好地方。
Running examples with Electron Fiddle电子琴的运行示例
Electron Fiddle is a sandbox app written with Electron and supported by Electron's maintainers. 是一个用Electron编写的沙盒应用程序,由Electron的维护人员支持。We highly recommend installing it as a learning tool to experiment with Electron's APIs or to prototype features during development.我们强烈建议将其作为一种学习工具来安装,以便在开发过程中试验Electron的API或原型功能。
Fiddle also integrates nicely with our documentation. Fiddle还与文档很好地集成。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,此按钮将打开一个fiddle.electronjs.org
link that will automatically load the example into Fiddle, no copy-pasting required.fiddle.electronjs.org
链接,该链接将自动将示例加载到Fiddle中,无需复制粘贴。
- main.js
- preload.js
- index.html
const { app, BrowserWindow } = require('electron')
const path = require('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:以下是不同的类别,以及您对每个类别的期望:
- Tutorial
: An end-to-end guide on how to create and publish your first Electron application.:关于如何创建和发布第一个电子应用程序的端到端指南。 - Processes in Electron
: In-depth reference on Electron processes and how to work with them.:关于电子过程以及如何使用它们的深度参考。 - Best Practices
: Important checklists to keep in mind when developing an Electron app.:开发电子应用程序时要记住的重要检查表。 - Examples
: Quick references to add features to your Electron app.:为电子应用程序添加功能的快速参考。 - Development
: Miscellaneous development guides.:杂项开发指南。 - Distribution
: Learn how to distribute your app to end users.:了解如何将应用程序分发给最终用户。 - Testing And Debugging
: How to debug JavaScript, write tests, and other tools used to create quality Electron applications.:如何调试JavaScript、编写测试和其他用于创建高质量电子应用程序的工具。 - References
: Useful links to better understand how the Electron project works and is organized.:有用的链接,以更好地了解电子项目的工作方式和组织方式。 - 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:你被困在什么地方了吗?这里有几个链接,可以查看:
If you need help with developing your app, our community Discord server is a great place to get advice from other Electron app developers.如果您在开发应用程序时需要帮助,社区Discord服务器是从其他电子应用程序开发人员那里获得建议的好地方。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.electron
包中遇到了错误,请检查GitHub问题跟踪器,查看是否存在与您的问题匹配的问题。If not, feel free to fill out our bug report template and submit a new issue.如果没有,请填写错误报告模板并提交新问题。