Electron 常見問題 · Electron 中文文檔

# Electron 常見問題 ## Electron 會在什么時候升級到最新版本的 Chrome？通常來說，在穩定版的 Chrome 發布后兩周內，我們會更新 Electron 內的 Chrome 版本。我們只會使用 stable 版本的 Chrome。但如果在 beta 或 dev 版本中有一個重要的更新，我們會把補丁應用到現版本的 Chrome 上。 ## 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][storage]， [`localStorage`][local-storage]，[`sessionStorage`][session-storage] 或者 [IndexedDB][indexed-db]。你還可以用 Electron 內的 IPC 機制實現。將數據存在主進程的某個全局變量中，然后在多個渲染進程中使用 `remote` 模塊來訪問它。 ```javascript // 在主進程中 global.sharedObject = { someProperty: 'default value' }; ``` ```javascript // 在第一個頁面中 require('remote').getGlobal('sharedObject').someProperty = 'new value'; ``` ```javascript // 在第二個頁面中 console.log(require('remote').getGlobal('sharedObject').someProperty); ``` ## 為什么應用的窗口、托盤在一段時間后不見了？這通常是因為用來存放窗口、托盤的變量被垃圾收集了。你可以參考以下兩篇文章來了解為什么會遇到這個問題。 * [內存管理][memory-management] * [變量作用域][variable-scope] 如果你只是要一個快速的修復方案，你可以用下面的方式改變變量的作用域，防止這個變量被垃圾收集。從 ```javascript app.on('ready', function() { var tray = new Tray('/path/to/icon.png'); }) ``` 改為 ```javascript var tray = null; app.on('ready', function() { tray = new Tray('/path/to/icon.png'); }) ``` ## 在 Electron 中，我為什么不能用 jQuery、RequireJS、Meteor、AngularJS？因為 Electron 在運行環境中引入了 Node.js，所以在 DOM 中有一些額外的變量，比如 `module`、`exports` 和 `require`。這導致了許多庫不能正常運行，因為它們也需要將同名的變量加入運行環境中。我們可以通過禁用 Node.js 來解決這個問題，用如下的方式： ```javascript // 在主進程中 var mainWindow = new BrowserWindow({ webPreferences: { nodeIntegration: false } }); ``` 假如你依然需要使用 Node.js 和 Electron 提供的 API，你需要在引入那些庫之前將這些變量重命名，比如： ```html <head> <script> // 重命名 Electron 提供的 require 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` 的結果是 undefined？在使用 Electron 的提供的模塊時，你可能會遇到和以下類似的錯誤： ``` > require('electron').webFrame.setZoomFactor(1.0); Uncaught TypeError: Cannot read property 'setZoomLevel' of undefined ``` 這是因為你在項目中或者在全局中安裝了[npm 上獲取的 `electron` 模塊][electron-module]，它把 Electron 的內置模塊覆寫了。你可以通過以下方式輸出 `electron` 模塊的路徑來確認你是否使用了正確的模塊。 ```javascript console.log(require.resolve('electron')); ``` 確認以下它是不是像下面這樣的： ``` "/path/to/Electron.app/Contents/Resources/atom.asar/renderer/api/lib/exports/electron.js" ``` 假如輸出的路徑類似于 `node_modules/electron/index.js`，那么你需要移除或者重命名 npm 上的 `electron` 模塊。 ```bash npm uninstall electron npm uninstall -g electron ``` 如果你依然遇到了這個問題，你可能需要檢查一下拼寫或者是否在錯誤的進程中調用了這個模塊。比如， `require('electron').app` 只能在主進程中使用, 然而 `require('electron').webFrame` 只能在渲染進程中使用。 [memory-management]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management [variable-scope]: https://msdn.microsoft.com/library/bzt2dkta(v=vs.94).aspx [electron-module]: https://www.npmjs.com/package/electron [storage]: https://developer.mozilla.org/en-US/docs/Web/API/Storage [local-storage]: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage [session-storage]: https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage [indexed-db]: https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API