Skip to main content

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 安装失败，你还可以尝试直接从 electron/electron/releases 下载 Electron。

¥You can also attempt to download Electron directly from electron/electron/releases if installing via npm is failing.

Electron 什么时候升级到最新的 Chrome？​

¥When will Electron upgrade to latest Chrome?

Electron 的 Chrome 版本通常会在新的稳定 Chrome 版本发布后一到两周内更新。该估计值无法得到保证，并且取决于升级所涉及的工作量。

¥The Chrome version of Electron is usually bumped within one or two weeks after a new stable Chrome version gets released. This estimate is not guaranteed and depends on the amount of work involved with upgrading.

仅使用 Chrome 的稳定通道。如果重要的修复是在测试版或开发版通道中，我们将向后移植它。

¥Only the stable channel of Chrome is used. If an important fix is in beta or dev channel, we will back-port it.

欲了解更多信息，请参阅 安全介绍。

¥For more information, please see the security introduction.

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.

由于 Node.js 集成了 Electron，因此在 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:

Subpixel rendering example

子像素抗锯齿需要包含字体字形的图层的不透明背景。（更多信息请参见 这个问题）。

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

为了实现这个目标，在构造函数中为 BrowserWindow 设置背景：

¥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.