Electron 常见问题解答

🌐 Electron FAQ

为什么我在安装 Electron 时遇到问题？

🌐 Why am I having trouble installing Electron?

在运行 npm install electron 时，一些用户偶尔会遇到安装错误。

🌐 When running npm install electron, some users occasionally encounter installation errors.

几乎在所有情况下，这些错误都是网络问题导致的，而不是 electron npm 包本身的问题。像 ELIFECYCLE、EAI_AGAIN、ECONNRESET 和 ETIMEDOUT 这样的错误都是这类网络问题的表现。最好的解决方法是尝试切换网络，或者稍等一会儿再尝试安装。

🌐 In almost all cases, these errors are the result of network problems and not actual issues with the electron npm package. Errors like ELIFECYCLE, EAI_AGAIN, ECONNRESET, and ETIMEDOUT are all indications of such network problems. The best resolution is to try switching networks, or wait a bit and try installing again.

如果通过 npm 安装失败，你也可以尝试直接从 GitHub Releases 下载 Electron。

🌐 You can also attempt to download Electron directly from GitHub Releases if installing via npm is failing.

如果你需要通过自定义镜像或代理安装 Electron，请参阅高级安装文档以获取更多详细信息。

🌐 If you need to install Electron through a custom mirror or proxy, see the Advanced Installation documentation for more details.

Electron 二进制文件是如何下载的？

🌐 How are Electron binaries downloaded?

当你运行 npm install electron 时，对应版本的 Electron 二进制文件会通过 npm 的 postinstall 生命周期脚本下载到你项目的 node_modules 文件夹中。

🌐 When you run npm install electron, the Electron binary for the corresponding version is downloaded into your project's node_modules folder via npm's postinstall lifecycle script.

这个逻辑在幕后由 @electron/get 工具包处理。

🌐 This logic is handled by the @electron/get utility package under the hood.

Electron 何时会升级到最新的 Chromium 版本？

🌐 When will Electron upgrade to latest Chromium?

每个新的 Electron 主要版本都会随 Chromium 的主要版本升级而发布。通过每 8 周发布一次，Electron 能够在 Chromium 上游发布的同一天引入其他主要的 Chromium 版本。安全修复将提前回移到稳定的发布渠道。

🌐 Every new major version of Electron releases with a Chromium major version upgrade. By releasing every 8 weeks, Electron is able to pull in every other major Chromium release on the very same day that it releases upstream. Security fixes will be backported to stable release channels ahead of time.

有关更多详细信息，请参阅 Electron Releases 文档，或访问 releases.electronjs.org 查看我们的发布状态仪表板。

🌐 See the Electron Releases documentation for more details or releases.electronjs.org to see our Release Status dashboard.

Electron 什么时候升级到最新的 Node.js？

🌐 When will Electron upgrade to latest Node.js?

当 Node.js 发布新版本时，我们通常会等待大约一个月才升级 Electron 中的版本。这样可以避免受新 Node.js 版本中经常出现的漏洞影响。

🌐 When a new version of Node.js gets released, we usually wait for about a month before upgrading the one in Electron. So we can avoid getting affected by bugs introduced in new Node.js versions, which happens very often.

Node.js 的新功能通常由 V8 升级带来，由于 Electron 使用的是 Chrome 浏览器附带的 V8，因此新版本 Node.js 的闪亮 JavaScript 新功能通常已经存在于 Electron 中。

🌐 New features of Node.js are usually brought by V8 upgrades, since Electron is using the V8 shipped by Chrome browser, the shiny new JavaScript feature of a new Node.js version is usually already in Electron.

如何在网页之间共享数据？

🌐 How to share data between web pages?

在网页（渲染进程）之间共享数据的最简单方法是使用浏览器中已经可用的 HTML5 API。好的选择有 存储 API、localStorage、sessionStorage 和 索引数据库。

🌐 To share data between web pages (the renderer processes) the simplest way is to use HTML5 APIs which are already available in browsers. Good candidates are Storage API, localStorage, sessionStorage, and IndexedDB.

或者，你可以使用 Electron 提供的 IPC 原语。要在主进程和渲染进程之间共享数据，可以使用 ipcMain 和 ipcRenderer 模块。要在网页之间直接通信，可以从一个页面发送 MessagePort 到另一个页面，可能通过主进程使用 ipcRenderer.postMessage()。随后通过消息端口进行的通信是直接的，不会绕行主进程。

🌐 Alternatively, you can use the IPC primitives that are provided by Electron. To share data between the main and renderer processes, you can use the ipcMain and ipcRenderer modules. To communicate directly between web pages, you can send a MessagePort from one to the other, possibly via the main process using ipcRenderer.postMessage(). Subsequent communication over message ports is direct and does not detour through the main process.

几分钟后我的应用托盘消失了。

🌐 My app's tray disappeared after a few minutes.

当用于存储托盘的变量被垃圾回收时，就会发生这种情况。

🌐 This happens when the variable which is used to store the tray gets garbage collected.

如果你遇到此问题，以下文章可能会有所帮助：

🌐 If you encounter this problem, the following articles may prove helpful:

• 内存管理
• 闭包

如果你想快速解决问题，可以通过将变量设为全局来修改你的代码，方法如下：

🌐 If you want a quick fix, you can make the variables global by changing your code from this:

const { app, Tray } = require('electron')

app.whenReady().then(() => {
  const tray = new Tray('/path/to/icon.png')
  tray.setTitle('hello world')
})

对此：

🌐 to this:

const { app, Tray } = require('electron')

let tray = null
app.whenReady().then(() => {
  tray = new Tray('/path/to/icon.png')
  tray.setTitle('hello world')
})

我无法在 Electron 中使用 jQuery/RequireJS/Meteor/AngularJS。

🌐 I can not use jQuery/RequireJS/Meteor/AngularJS in Electron.

由于 Electron 集成了 Node.js，会在 DOM 中插入一些额外的符号，如 module、exports、require。这会导致一些库出现问题，因为它们希望插入同名的符号。

🌐 Due to the Node.js integration of Electron, there are some extra symbols inserted into the DOM like module, exports, require. This causes problems for some libraries since they want to insert the symbols with the same names.

为了解决这个问题，你可以关闭 Electron 中的节点集成：

🌐 To solve this, you can turn off node integration in Electron:

// In the main process.
const { BrowserWindow } = require('electron')

const win = new BrowserWindow({
  webPreferences: {
    nodeIntegration: false
  }
})
win.show()

但是，如果你想保留使用 Node.js 和 Electron API 的功能，你必须在引入其他库之前重命名页面中的符号：

🌐 But if you want to keep the abilities of using Node.js and Electron APIs, you have to rename the symbols in the page before including other libraries:

<head>
<script>
window.nodeRequire = require;
delete window.require;
delete window.exports;
delete window.module;
</script>
<script type="text/javascript" src="jquery.js"></script>
</head>

require('electron').xxx 未定义。

🌐 require('electron').xxx is undefined.

当使用 Electron 的内置模块时，你可能会遇到这样的错误：

🌐 When using Electron's built-in module you might encounter an error like this:

> require('electron').webFrame.setZoomFactor(1.0)
Uncaught TypeError: Cannot read property 'setZoomLevel' of undefined

你很可能在错误的进程中使用了该模块。例如，electron.app 只能在主进程中使用，而 electron.webFrame 仅在渲染进程中可用。

🌐 It is very likely you are using the module in the wrong process. For example electron.app can only be used in the main process, while electron.webFrame is only available in renderer processes.

字体看起来很模糊，这是什么？我该怎么办？

🌐 The font looks blurry, what is this and what can I do?

如果关闭了子像素抗锯齿，LCD 屏幕上的字体可能会显得模糊。例如：

🌐 If sub-pixel anti-aliasing is deactivated, then fonts on LCD screens can look blurry. Example:

次像素抗锯齿需要包含字体字形的图层具有不透明的背景。（更多信息请参阅此问题）。

🌐 Sub-pixel anti-aliasing needs a non-transparent background of the layer containing the font glyphs. (See this issue for more info).

要实现此目标，请在 浏览器窗口 的构造函数中设置背景：

🌐 To achieve this goal, set the background in the constructor for BrowserWindow:

const { BrowserWindow } = require('electron')

const win = new BrowserWindow({
  backgroundColor: '#fff'
})

这种效果仅在（某些？）液晶屏上可见。即使你没有看到差别，也可能有一些用户会注意到。除非有特殊原因，否则最好总是以这种方式设置背景。

🌐 The effect is visible only on (some?) LCD screens. Even if you don't see a difference, some of your users may. It is best to always set the background this way, unless you have reasons not to do so.

请注意，仅在 CSS 中设置背景并不能达到预期的效果。

🌐 Notice that just setting the background in the CSS does not have the desired effect.

类继承不适用于 Electron 内置模块

🌐 Class inheritance does not work with Electron built-in modules

Electron 类无法使用 extends 关键字（也称为类继承）进行子类化。由于在 Electron 内部的 C++/JavaScript 交互中会增加额外复杂性，这一功能从未在 Electron 中实现。

🌐 Electron classes cannot be subclassed with the extends keyword (also known as class inheritance). This feature was never implemented in Electron due to the added complexity it would add to C++/JavaScript interop in Electron's internals.

欲了解更多信息，请参阅 electron/electron#23。

🌐 For more information, see electron/electron#23.