• Electron 常见问题
    • Electron 会在什么时候升级到最新版本的 Chrome？
    • Electron 会在什么时候升级到最新版本的 Node.js？
    • 如何在两个网页间共享数据？
    • 为什么应用的窗口、托盘在一段时间后不见了？
    • 在 Electron 中，我为什么不能用 jQuery、RequireJS、Meteor、AngularJS？
    • 为什么 require('electron').xxx 的结果是 undefined？

    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，
    localStorage，sessionStorage 或者 IndexedDB。

    你还可以用 Electron 内的 IPC 机制实现。将数据存在主进程的某个全局变量中，然后在多个渲染进程中使用 remote 模块来访问它。

    1. // 在主进程中
    2. global.sharedObject = {
    3.   someProperty: 'default value'
    4. };
    1. // 在第一个页面中
    2. require('remote').getGlobal('sharedObject').someProperty = 'new value';
    1. // 在第二个页面中
    2. console.log(require('remote').getGlobal('sharedObject').someProperty);

    为什么应用的窗口、托盘在一段时间后不见了？

    这通常是因为用来存放窗口、托盘的变量被垃圾收集了。

    你可以参考以下两篇文章来了解为什么会遇到这个问题。

    • 内存管理
    • 变量作用域

    如果你只是要一个快速的修复方案，你可以用下面的方式改变变量的作用域，防止这个变量被垃圾收集。

    从

    1. app.on('ready', function() {
    2.   var tray = new Tray('/path/to/icon.png');
    3. })

    改为

    1. var tray = null;
    2. app.on('ready', function() {
    3.   tray = new Tray('/path/to/icon.png');
    4. })

    在 Electron 中，我为什么不能用 jQuery、RequireJS、Meteor、AngularJS？

    因为 Electron 在运行环境中引入了 Node.js，所以在 DOM 中有一些额外的变量，比如 module、exports 和 require。这导致
    了许多库不能正常运行，因为它们也需要将同名的变量加入运行环境中。

    我们可以通过禁用 Node.js 来解决这个问题，用如下的方式：

    1. // 在主进程中
    2. var mainWindow = new BrowserWindow({
    3.   webPreferences: {
    4.     nodeIntegration: false
    5.   }
    6. });

    假如你依然需要使用 Node.js 和 Electron 提供的 API，你需要在引入那些库之前将这些变量重命名，比如：

    1. <head>
    2. <script>
    3. // 重命名 Electron 提供的 require
    4. window.nodeRequire = require;
    5. delete window.require;
    6. delete window.exports;
    7. delete window.module;
    8. </script>
    9. <script type="text/javascript" src="jquery.js"></script>
    10. </head>

    为什么 require('electron').xxx 的结果是 undefined？

    在使用 Electron 的提供的模块时，你可能会遇到和以下类似的错误：

    1. > require('electron').webFrame.setZoomFactor(1.0);
    2. Uncaught TypeError: Cannot read property 'setZoomLevel' of undefined

    这是因为你在项目中或者在全局中安装了npm 上获取的 electron 模块，它把 Electron 的内置模块覆写了。

    你可以通过以下方式输出 electron 模块的路径来确认你是否使用了正确的模块。

    1. console.log(require.resolve('electron'));

    确认以下它是不是像下面这样的：

    1. "/path/to/Electron.app/Contents/Resources/atom.asar/renderer/api/lib/exports/electron.js"

    假如输出的路径类似于 node_modules/electron/index.js，那么你需要移除或者重命名 npm 上的 electron 模块。

    1. npm uninstall electron
    2. npm uninstall -g electron

    如果你依然遇到了这个问题，你可能需要检查一下拼写或者是否在错误的进程中调用了这个模块。比如，
    require('electron').app 只能在主进程中使用, 然而 require('electron').webFrame 只能在渲染进程中使用。