Skip to main content

Electron FAQ

Why am I having trouble installing Electron?为什么我在安装Electron时遇到问题?

When running npm install electron, some users occasionally encounter installation errors.在运行npm install electron时,一些用户偶尔会遇到安装错误。

In almost all cases, these errors are the result of network problems and not actual issues with the electron npm package. 在几乎所有情况下,这些错误都是网络问题的结果,而不是electronnpm封装的实际问题。Errors like ELIFECYCLE, EAI_AGAIN, ECONNRESET, and ETIMEDOUT are all indications of such network problems. ELIFECYCLEEAI_AGAINECONNRESETETIMEDOUT等错误都表明存在此类网络问题。The best resolution is to try switching networks, or wait a bit and try installing again.最好的解决方案是尝试切换网络,或者等待一段时间再尝试安装。

You can also attempt to download Electron directly from electron/electron/releases if installing via npm is failing.如果通过npm安装失败,您也可以尝试直接从electron/electron/releases下载Electron。

When will Electron upgrade to latest Chrome?Electron什么时候升级到最新的Chrome?

The Chrome version of Electron is usually bumped within one or two weeks after a new stable Chrome version gets released. Electron的Chrome版本通常会在新的稳定Chrome版本发布后的一两周内推出。This estimate is not guaranteed and depends on the amount of work involved with upgrading.这一估计数无法保证,取决于升级所涉及的工作量。

Only the stable channel of Chrome is used. If an important fix is in beta or dev channel, we will back-port it.仅使用Chrome的稳定通道。如果一个重要的修复程序在beta或dev通道中,我们将支持移植它。

For more information, please see the security introduction.有关更多信息,请参阅安全简介

When will Electron upgrade to latest 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. 当Node.js的新版本发布时,我们通常要等一个月左右才能升级Electron中的版本。So we can avoid getting affected by bugs introduced in new Node.js versions, which happens very often.因此,我们可以避免受到新Node.js版本中引入的错误的影响,这种情况经常发生。

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.Node.js的新功能通常是由V8升级带来的,因为Electron使用的是Chrome浏览器附带的V8,所以新Node.js版本的新JavaScript功能通常已经在Electron中了。

How to share data between web pages?如何在网页之间共享数据?

To share data between web pages (the renderer processes) the simplest way is to use HTML5 APIs which are already available in browsers. 要在网页(渲染器进程)之间共享数据,最简单的方法是使用浏览器中已经可用的HTML5 API。Good candidates are Storage API, localStorage, sessionStorage, and IndexedDB.好的候选者是存储APIlocalStoragesessionStorageIndexedDB

Alternatively, you can use the IPC primitives that are provided by Electron. 或者,您可以使用Electron提供的IPC基元。To share data between the main and renderer processes, you can use the ipcMain and ipcRenderer modules. 要在主进程和渲染器进程之间共享数据,可以使用ipcMainipcRenderer模块。To communicate directly between web pages, you can send a MessagePort from one to the other, possibly via the main process using ipcRenderer.postMessage(). 要在网页之间直接通信,可以使用ipcRenderer.postMessage()通过主进程将MessagePort从一个发送到另一个。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')
})

I can not use jQuery/RequireJS/Meteor/AngularJS in Electron.我不能在Electron中使用jQuery/RequireJS/Metreor/AngularJS。

Due to the Node.js integration of Electron, there are some extra symbols inserted into the DOM like module, exports, require. 由于Electron的Node.js集成,有一些额外的符号被插入到DOM中,譬如moduleexportsrequireThis causes problems for some libraries since they want to insert the symbols with the same names.这会给某些库带来问题,因为它们希望插入具有相同名称的符号。

To solve this, you can turn off node integration in Electron:要解决此问题,可以关闭Electron中的节点集成:

// In the main process.
const { BrowserWindow } = require('electron')
const win = new BrowserWindow({
webPreferences: {
nodeIntegration: false
}
})
win.show()

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:但是,如果你想保持使用Node.js和Electron API的能力,你必须在包括其他库之前重命名页面中的符号:

<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 is undefined.

When using Electron's built-in module you might encounter an error like this:当使用Electron的内置模块时,您可能会遇到这样的错误:

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

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.例如,electron.app只能在主进程中使用,而electron.webFrame只能在渲染器进程中使用。

The font looks blurry, what is this and what can I do?字体看起来很模糊,这是什么?我能做什么?

If sub-pixel anti-aliasing is deactivated, then fonts on LCD screens can look blurry. 如果子像素抗锯齿被禁用,那么LCD屏幕上的字体可能看起来很模糊。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).(有关更多信息,请参阅本文)。

To achieve this goal, set the background in the constructor for BrowserWindow:要实现此目标,请在BrowserWindow的构造函数中设置背景:

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

The effect is visible only on (some?) LCD screens. 这种效果仅在(某些?)LCD屏幕上可见。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.最好总是这样设置背景,除非你有理由不这样做。

Notice that just setting the background in the CSS does not have the desired effect.请注意,仅仅在CSS中设置背景并没有达到所需的效果。