跳到主内容

Electron 常见问题

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

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

在几乎所有情况下,这些错误都是网络问题造成的,而不是 electron npm 包的实际问题。ELIFECYCLEEAI_AGAINECONNRESETETIMEDOUT 等错误都表明存在此类网络问题。最好的解决方案是尝试切换网络,或者稍等片刻再尝试安装。

如果通过 npm 安装失败,您也可以尝试直接从 electron/electron/releases 下载 Electron。

Electron 何时会升级到最新的 Chrome?

Electron 的 Chrome 版本通常会在新的稳定版 Chrome 发布后一到两周内更新。此估算不作保证,具体取决于升级所需的工作量。

只使用 Chrome 的稳定通道。如果重要修复在 beta 或开发通道中,我们会将其回溯。

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

Electron 何时会升级到最新的 Node.js?

当 Node.js 的新版本发布时,我们通常会等待大约一个月,然后再在 Electron 中进行升级。这样可以避免受到新 Node.js 版本中引入的 Bug 的影响,这种情况经常发生。

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

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

要在网页(渲染器进程)之间共享数据,最简单的方法是使用浏览器中已有的 HTML5 API。不错的选择是 存储 APIlocalStoragesessionStorageIndexedDB

另外,您可以使用 Electron 提供的 IPC 原语。要在主进程和渲染器进程之间共享数据,您可以使用 ipcMainipcRenderer 模块。要直接在网页之间通信,您可以从一个页面向另一个页面发送一个 MessagePort,可能通过主进程使用 ipcRenderer.postMessage()。后续通过消息端口的通信是直接的,不会绕道主进程。

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

这发生在用于存储托盘的变量被垃圾回收时。

如果您遇到此问题,以下文章可能会有所帮助:

如果您想快速修复,可以通过将代码从这样

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

更改为这样,将变量设为全局变量

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。

由于 Electron 的 Node.js 集成,DOM 中会插入一些额外的符号,如 moduleexportsrequire。这给一些库带来了问题,因为它们也想插入同名符号。

要解决此问题,您可以在 Electron 中关闭 Node 集成:

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

但如果您想保留使用 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 未定义。

使用 Electron 内置模块时,您可能会遇到这样的错误:

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

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

字体看起来模糊,这是什么以及我能做什么?

如果 亚像素抗锯齿 被禁用,那么 LCD 屏幕上的字体可能会看起来模糊。例如:

Subpixel rendering example

亚像素抗锯齿需要包含字体字形的图层具有非透明背景。(有关更多信息,请参阅 此问题)。

要实现此目标,请在 BrowserWindow 的构造函数中设置背景:

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

此效果仅在(某些?)LCD 屏幕上可见。即使您没有看到区别,您的一些用户也可能会看到。最好始终以这种方式设置背景,除非您有理由不这样做。

请注意,仅在 CSS 中设置背景无法达到预期效果。

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

Electron 类不能使用 extends 关键字(也称为类继承)进行子类化。Electron 从未实现此功能,因为它会增加 Electron 内部 C++/JavaScript 互操作的复杂性。

更多信息请参阅 electron/electron#23