Electron 常见问题解答
为什么我安装 Electron 时遇到问题?
当运行 npm install electron
时,一些用户偶尔会遇到安装错误。
在绝大多数情况下,这些错误是由于网络问题引起的,而不是 electron
npm 包本身的问题。像 ELIFECYCLE
、EAI_AGAIN
、ECONNRESET
和 ETIMEDOUT
这样的错误都表明存在网络问题。最好的解决方法是尝试切换网络,或者等待片刻后再次尝试安装。
如果通过 npm
安装失败,您也可以尝试直接从 electron/electron/releases 下载 Electron。
Electron 何时会升级到最新的 Chrome 版本?
Electron 的 Chrome 版本通常在新稳定版 Chrome 发布后的一到两周内更新。这个估计不作保证,并且取决于升级所需的工作量。
仅使用 Chrome 的稳定版渠道。如果重要的修复存在于 beta 或 dev 渠道,我们会将其移植。
更多信息,请参阅 安全介绍。
Electron 何时会升级到最新的 Node.js 版本?
当新的 Node.js 版本发布时,我们通常会等待大约一个月再升级 Electron 中的版本。这样我们可以避免受到新 Node.js 版本中引入的 bug 的影响,这些 bug 发生的频率很高。
Node.js 的新功能通常是通过 V8 升级带来的,由于 Electron 使用的是 Chrome 浏览器提供的 V8,因此新 Node.js 版本中的闪亮新 JavaScript 功能通常已经在 Electron 中可用了。
如何在网页之间共享数据?
要在网页(渲染进程)之间共享数据,最简单的方法是使用浏览器中已有的 HTML5 API。不错的选择包括 Storage API、localStorage
、sessionStorage
和 IndexedDB。
另外,您也可以使用 Electron 提供的 IPC 原语。要在主进程和渲染进程之间共享数据,您可以使用 ipcMain
和 ipcRenderer
模块。要直接在网页之间进行通信,您可以将 MessagePort
从一个网页发送到另一个网页,可能通过主进程使用 ipcRenderer.postMessage()
。后续通过 message port 的通信是直接的,不需要绕经主进程。
我的应用程序的托盘图标在几分钟后消失了。
当用于存储托盘图标的变量被垃圾回收时,就会发生这种情况。
如果您遇到此问题,以下文章可能会有所帮助
如果您想要一个快速的修复方法,可以将变量设为全局变量,将您的代码从这样修改为
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
。这会导致一些库出现问题,因为它们也想插入同名符号。
要解决此问题,您可以在 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 屏幕上的字体看起来可能会模糊。例如
亚像素抗锯齿需要字体字形所在的图层具有非透明的背景。(有关更多信息,请参阅 此问题)。
为了实现此目标,请在 BrowserWindow 的构造函数中设置背景
const { BrowserWindow } = require('electron')
const win = new BrowserWindow({
backgroundColor: '#fff'
})
此效果仅在(某些?)LCD 屏幕上可见。即使您看不到区别,您的某些用户可能也会。最好始终这样设置背景,除非您有理由不这样做。
请注意,仅在 CSS 中设置背景不会达到预期的效果。
与 Electron 内置模块不兼容类继承
Electron 类不能使用 extends
关键字进行子类化(也称为类继承)。此功能从未在 Electron 中实现,因为它会增加 Electron 内部 C++/JavaScript 互操作的复杂性。
有关更多信息,请参阅 electron/electron#23。