跳转到主内容

Electron 常见问题 (FAQ)

为什么我在安装 Electron 的时候遇到了问题?

在运行 npm install electron 时,有些用户会偶尔遇到安装问题。

在大多数情况下,这些错误都是由网络问题导致,而不是因为 electron npm 包的问题。 如 ELIFECYCLEEAI_AGAINECONNRESETETIMEDOUT 等错误都是此类网络问题的标志。 最佳的解决方法是尝试切换网络,或是稍后再尝试安装。

如果通过 npm 安装失败,您可以尝试直接从 GitHub Releases 直接下载 Electron。

如果您需要通过自定义镜像或代理安装Electron,请参阅 高级安装指南 文档以了解更多详情。

如何下载 Electron 二进制文件?

运行 npm install electron后,会先下载主脚本 bin。 当它开始运行时(例如通过 npx electron 运行),对应版本的 Electron 二进制文件就会通过 install-electron 脚本动态下载到您项目里的 node_modules 文件夹中。

这个下载逻辑是由 @electron/get 实用软件包在后台处理的。

您也可以手动调用 install-electron 脚本来执行。

Electron会在什么时候升级到最新版本的 Chronium?

每次 Electron 重大版本更新时都会同步升级 Chromium 至它的一个大版本。 Electron 通过8周的发版周期,来和每隔一个发行版的 Chromium 上游发布日期对齐进行更新。 安全修复可以提前向后移植到稳定发行版。

请参阅 Electron 发行版 以了解更多详细信息,或 releases.electronjs.org 以查看我们的发布状态仪表板。

Electron 会在什么时候升级到最新版本的 Node.js?

我们通常会在最新版的 Node.js 发布后一个月左右将 Electron 更新到这个版本的 Node.js。 我们通过这种方式来避免新版本的 Node.js 带来的 bug(这种 bug 太常见了)。

Node.js 的新特性通常是由新版本的 V8 带来的。由于 Electron 使用的是 Chrome 浏览器中附带的 V8 引擎,所以 Electron 内往往已经有了部分新版本 Node.js 才有的崭新特性。

如何在两个网页间共享数据?

在两个网页(渲染进程)间共享数据最简单的方法是使用浏览器中已经实现的 HTML5 API。 比较好的方式是使用Storage APIlocalStoragesessionStorage或者IndexedDB

或者,您可以使用 Electron 提供的原始版 IPC 。 若要主进程和渲染进程之间共享数据,您可以使用 ipcMainipcRenderer 两个模块。 若要直接在网页之间直接共享,您可以从其中一个页面发送一个 MessagePort 到另一个页面, 可通过主进程使用 ipcRenderer.postMessage() 来实现。 通过消息端口进行的后续通信是直连的,不会绕过主进程。

几分钟后我应用的 Tray 消失了。

当用来存储 Tray 的变量被垃圾回收时,就会发生这种情况。

你可以参考以下两篇文章来了解为什么会遇到这个问题:

如果你只是要一个快速的修复方案,你可以用下面的方式改变变量的作用域,防止这个变量被垃圾回收。

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 中有一些额外的变量,比如 moduleexports require。 这导致 了许多库不能正常运行,因为它们也需要将同名的变量加入运行环境中。

我们可以通过禁用 Node.js 来解决这个问题,在Electron里用如下的方式:

// 在主进程中.
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 只能在渲染进程中使用。

文字看起来很模糊,这是什么原因造成的?怎么解决这个问题呢?

如果 sub-pixel anti-aliasing已被禁用,那么 LCD 屏幕上的字体可能会看起来模糊。 示例:

子像素渲染示例

子像素反锯齿需要一个包含字体光图的图层的非透明背景。 (详情请参阅这个问题

要实现这一目标,请在 BrowserWindow 的构造函数内设置背景:

const { BrowserWindow } = require('electron')

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

效果仅可见于(一些) LCD 屏幕。 即使您没有看到差别,您的一些用户可能会看到。 最好始终以这种方式确定背景,除非你有理由不这样做。

注意到,仅设置 CSS 背景并不具有预期的效果。

无法在 Electron 内置模块中使用类继承

Electron 类不可以通过 extends 关键词设置为子类(又称类继承)。 由于这个特性会增加 Electron 内部 C++/JavaScript 互操作的复杂度,因而从未在 Electron 中实装。

更多信息,请查阅 electron/electron#23