跳到主要內容

Electron 常見問題

為什麼我安裝 Electron 時遇到問題?

當執行 npm install electron 時,有些使用者偶爾會遇到安裝錯誤。

幾乎在所有情況下,這些錯誤都是網路問題造成的,而不是 electron npm 套件的實際問題。像是 ELIFECYCLEEAI_AGAINECONNRESETETIMEDOUT 等錯誤都表示有網路問題。最好的解決方案是嘗試切換網路,或稍等片刻再試一次安裝。

您也可以嘗試直接從 electron/electron/releases 下載 Electron,如果透過 npm 安裝失敗的話。

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 API、localStoragesessionStorage 和 IndexedDB。

或者,您可以使用 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.js 整合

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