跳过主内容

Electron 常见问题

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

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

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

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

Electron 何时升级到最新 Chrome?

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

只使用 Chrome 的稳定通道。 如果有重要的修复在 beta 或 dev 通道中,我们会将其移植过来。

更多信息请参见安全介绍

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

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

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

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

要在网页(渲染进程)之间共享数据,最简单的方法是使用浏览器中已有的 HTML5 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 中关闭 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 中设置背景不会产生预期的效果。