跳至主要内容

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 的影响,而这些 bug 非常常见。

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

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

在网页(渲染进程)之间共享数据的最简单方法是使用浏览器中已有的 HTML5 API。适合的 API 包括 Storage 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 中关闭节点集成

// 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 中设置背景不会产生预期效果。