electron渲染进程与主进程互相通信

思路

主进程监听一个事件
渲染进程触发事件向主进程发送消息
主进程收到渲染进程的消息，给予渲染进程以响应
渲染进程收到主进程的响应

代码实现

主进程监听一个事件, 并且响应渲染进程

const {ipcMain} = require("electron")

ipcMain.on("sendMessage", (event, args) => {
  console.log("收到渲染进程的消息",  args);
  win.webContents.send("receiveMessage", "我是主进程已收到消息" + args); // 响应渲染进程
});

渲染进程触发主进程事件，并且监听主进程响应事件

<body>
    <button id="btn">发送通知</button>
  </body>
<script>
    const { ipcRenderer } = require("electron");
    const oBtn = document.getElementById("btn");

    oBtn.onclick = function () {
        ipcRenderer.send("sendMessage", "我是渲染进程");
    };
    ipcRenderer.on('receiveMessage', (event, args)=>{
        console.log('接收到主进程的消息',args)
    })
</script>

注意

渲染进程需要集合node进程，否者会报Uncaught ReferenceError: require is not defined错误

const win = new BrowserWindow({
    // fullscreen: true,
    // transparent: true, // 窗口透明
    // frame: true, // 无边框
    // .......
    webPreferences: {
        nodeIntegration: true, // 集合node进程
    },
});

主进程console打出的中文乱码处理, start的时候加上chcp 65001

"scripts": {
   "start": "chcp 65001 && electron index.js",
   "build": "electron-packager ./ --all --win --out ./dist --arch=x64 --overwrite"
},

完整代码

主进程

// index.js
const path = require("path");
const { app, BrowserWindow, ipcMain } = require("electron");

function createWindow() {
  // 创建浏览器窗口
  const win = new BrowserWindow({
    // fullscreen: true,
    // transparent: true, // 窗口透明
    // frame: true, // 无边框
    webPreferences: {
      nodeIntegration: true, // 集合node进程
    },
  });

  win.loadFile("./app.html"); // 渲染进程网页

  ipcMain.on("sendMessage", (event, args) => {
    console.log("收到渲染进程的消息",  args);
    win.webContents.send("receiveMessage", "我是主进程已收到消息" + args);
  });
  win.webContents.openDevTools();  // 开启调试
}

app.whenReady().then(createWindow);

渲染进程

<!--app.html-->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="btn">发送通知</button>
  </body>
  <script>
    const { ipcRenderer } = require("electron");
    const oBtn = document.getElementById("btn");

    oBtn.onclick = function () {
      ipcRenderer.send("sendMessage", "我是渲染进程");
    };
    ipcRenderer.on('receiveMessage', (event, args)=>{
        console.log('接收到主进程的消息',args)
    })
  </script>
</html>

electron渲染进程与主进程互相通信

思路

代码实现

主进程监听一个事件, 并且响应渲染进程

渲染进程触发主进程事件，并且监听主进程响应事件

注意

完整代码

效果图

zpfei

引用和评论

安装nodejs准备开发的前期设置

Electron32-Vue3OS：基于vite5+electron32+arcoDesign仿win/mac桌面os模板

electron中采用配置文件，打包后路径变化的问题

记录react+electron开发单页应用SPA遇到的路由问题

「零基础到实战」：如何在 Electron 中实现本地化日志系统

electron实现窗体吸附功能

electron - 应用中的问题记录