跳转到主内容

Electron 常见问题 (FAQ)

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

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

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

如果通过 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 API,localStorage,sessionStorage或者IndexedDB

或者,您可以使用 Electron 提供的原始版 IPC 。 若要主进程和渲染进程之间共享数据,您可以使用 ipcMain 和 ipcRenderer 两个模块。 若要直接在网页之间直接共享,您可以从其中一个页面发送一个 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 中有一些额外的变量,比如 module、exports 和 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。