Electron中主进程（Main Process）与渲染进程 (Renderer Process) 通信的方式

最新推荐文章于 2025-03-25 10:50:19 发布

明天也要努力

最新推荐文章于 2025-03-25 10:50:19 发布

阅读量1.9k

点赞数 10

分类专栏： Electron 文章标签： electron 前端

本文链接：https://blog.csdn.net/ZYS10000/article/details/134764125

版权

Electron 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何在Electron应用中，通过preload.js和main.js文件实现主进程与渲染进程之间的双向通信，包括修改HTML内容、事件监听和数据传递等操作。

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

1. 渲染进程向主进程通信

修改 html 文件内容

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 解决控制台警告问题 -->
  <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline';">
  <title>electron</title>
</head>
<body>
  <input type="text" id="name">
  <button id="btn">send</button>
  <script src="./renderer/app.js"></script>
</body>
</html>

根目录下新增 renderer 文件夹
在 renderer 文件夹下新増 app.js 文件，此处的文件表示渲染进程的 js 文件，可以操作渲染进程（浏览器）中的dom。

const button = document.getElementById('btn');

button.addEventListener('click',() => {
  // 此处的electronAPI即为预加载中传递的命名空间，sendMainInfo为传递过来的回调函数
  const name = document.getElementById('name').value;
  electronAPI.sendMainInfo(name);
})

在根目录下新増 preload.js 文件

// 此文件为预加载文件，需在 main.js 文件中配置
const { ipcRenderer,contextBridge } = require('electron');

/*
* 搭建主进程和渲染进程的桥梁
*/ 
// render-info代表主进程可以监听的回调函数
const sendMainInfo = async (val) => {
  ipcRenderer.invoke('render-info',val);
}
// electronAPI 代表向渲染进程传递的对象命名，sendMainInfo表示向渲染进程传递一个回调函数
contextBridge.exposeInMainWorld('electronAPI',{
  platform: process.platform,
  sendMainInfo,
});

修改主进程（main.js）文件

const { app, BrowserWindow, ipcMain} = require('electron');
const path = require('path');

const createWindow = () => {
  const win = new BrowserWindow({
    width: 1200,
    height: 1000,
    webPreferences:{
      preload: path.resolve(__dirname,'./preload.js') // 渲染进程预加载
    }
  });
  // 加载静态资源
  win.loadFile('index.html');
  // 打开开发者工具
  win.webContents.openDevTools();
};

// 主进程监听渲染进程传递过来的回调函数
ipcMain.handle('render-info',(event,args) => {
  console.log(args)
})


// app.whenReady 表示主进程加载完成，返回 promise 
app.whenReady().then(() => {
  createWindow();
  app.on('activate', () => {
    // 此处解决mac系统关闭app后，但程序坞中还存在图标，再次点击可以重新创建进程
    if(BrowserWindow.getAllWindows.length === 0){
      createWindow();
    } 
  })
});


// 关闭所有窗口
app.on('window-all-closed', () => {
  // electron 运行在三个环境（win32 Windows系统、linux Linux系统、 darwin Mac系统）
  // 此处解决的是非mac系统，程序退出进程 (Mac系统关闭app会保留在程序坞中)
  if(process.platform !== 'darwin'){
    app.quit();
  } 
})

效果
在这里插入图片描述

2. 主进程向渲染进程通信

修改主进程（main.js）文件

const { app, BrowserWindow, ipcMain} = require('electron');
const path = require('path');

const createWindow = () => {
  const win = new BrowserWindow({
    width: 1200,
    height: 1000,
    webPreferences:{
      preload: path.resolve(__dirname,'./preload.js') // 渲染进程预加载
    }
  });
  // 加载静态资源
  win.loadFile('index.html');
  // 打开开发者工具
  win.webContents.openDevTools();
};


// 主进程监听渲染进程传递过来的回调函数
ipcMain.handle('main-info',async (event,args) => {
  return await getInfo();
})

// mock 一个接口
function getInfo() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('来自主进程的数据');
    }, 500)
  })
}

// app.whenReady 表示主进程加载完成，返回 promise 
app.whenReady().then(() => {
  createWindow();
  app.on('activate', () => {
    // 此处解决mac系统关闭app后，但程序坞中还存在图标，再次点击可以重新创建进程
    if(BrowserWindow.getAllWindows.length === 0){
      createWindow();
    } 
  })
});


// 关闭所有窗口
app.on('window-all-closed', () => {
  // electron 运行在三个环境（win32 Windows系统、linux Linux系统、 darwin Mac系统）
  // 此处解决的是非mac系统，程序退出进程 (Mac系统关闭app会保留在程序坞中)
  if(process.platform !== 'darwin'){
    app.quit();
  } 
})

修改 preload.js 文件

// 此文件为预加载文件，需在 main.js 文件中配置
const { ipcRenderer,contextBridge } = require('electron');

/*
* 搭建主进程和渲染进程的桥梁
*/ 
const mainToRender = async (res) => {
  const resData = await ipcRenderer.invoke('main-info',res);
  return resData;
};


// electronAPI 代表向渲染进程传递的对象命名
contextBridge.exposeInMainWorld('electronAPI',{
  platform: process.platform,
  mainToRender,
});

修改 renderer/app.js 文件

const button = document.getElementById('btn');

button.addEventListener('click',async () => {
  // 此处的electronAPI即为预加载中传递的命名空间，mainToRender为传递过来的回调函数
  let name = document.getElementById('name');
  const res = await electronAPI.mainToRender();
  name.value = res;
})