electron 研究笔记

最新推荐文章于 2025-06-16 18:19:19 发布

原创

最新推荐文章于 2025-06-16 18:19:19 发布 · 1.4w 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#nodejs #electron

这篇博客探讨了在 Electron 开发中遇到的问题，包括渲染进程如何模拟浏览器环境、渲染进程与主进程间的通信、Mac系统下的快捷键问题及系统快捷键冲突的解决方案。在渲染进程中，通过设置为`nodeIntegration: true`来启用浏览器环境。通信主要依靠`ipcRenderer`和`ipcMain`。Mac系统下，快捷键需通过创建应用菜单映射。对于快捷键冲突，采取监听`focus`和`blur`事件动态注册和取消注册快捷键的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用electron有一阵子了，随着项目推进，需要研究的东西也逐渐多起来。总结了以下，问题主要出现在：
- 跨平台兼容性
- 新的功能需求

`electron` 渲染进程模拟浏览器环境

electron渲染进程默认为nodejs环境，在里面你可以调用require引入第三方模块，但有时候我们想要的是一个真实的浏览器环境。electron需要做的配置如下：


    var mainWindow = new BrowserWindow({
        resizable: true,
        width: size.width,
        height: size.height,
        title: 'HolaStudio',
        webPreferences:
        {
            nodeIntegration: false,
            preload: path.join(__dirname, 'tangide', 'expose-window-apis.js')
        }
    });

创建BrowserWindow的时候指定nodeIntegration为false。这样在electron内置浏览器里面不会有module和require全局变量。

渲染进程与主进程之间的通信

electron下主进程与渲染进程之间的通信主要有如下几种方式：
- 使用remote模块
- 使用ipc做进程间通信

这里我选择了第二种方式：


// In main process.
const ipcMain = require('electron').ipcMain;
ipcMain.on('asynchronous-message', function(event, arg) {
   
   
  console.log(arg);  // prints "ping"
  event.sender.send('asynchronous-reply', 'pong');
});

ipcMain.on('synchronous-message',