跳至主要內容

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 版本中引入的錯誤影響,這種情況很常發生。

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 中設定背景不會產生預期的效果。