Electron主进程(Main Process)与渲染进程(Renderer Process)通信详解

更新时间：2024年03月11日 14:22:50 作者：明天也要努力

这篇文章主要介绍了Electron主进程(Main Process)与渲染进程(Renderer Process)通信,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

渲染进程向主进程通信

修改 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();
  } 
})

效果

主进程向渲染进程通信

修改主进程（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;
})

效果

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue-admin-template 添加、跳转子页面问题
这篇文章主要介绍了Vue-admin-template 添加、跳转子页面问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
Vue中mapMutations传递参数方式
这篇文章主要介绍了Vue中mapMutations传递参数方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
Vue3 defineModel的使用示例详解
文章介绍了vue中向子组件传值并允许修改的机制,通过defineModel实现双向绑定,它返回一个ref,并且可以配置底层prop的选项,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
2025-01-01
一文带你掌握Vue中的路由守卫
路由守卫（Route Guards）是 Vue Router 的一个功能,它允许我们在路由发生之前执行逻辑判断,这篇文章主要为大家介绍了Vue中路由守卫的具体应用,需要的可以了解下
2024-03-03
Vue如何接入hls/m3u8的直播视频详解
项目中有一个需求,需要实现直播功能,后端接口返回的是m3u8数据流,下面这篇文章主要给大家介绍了关于Vue如何接入hls/m3u8直播视频的相关资料,需要的朋友可以参考下
2022-07-07
基于vue-video-player自定义播放器的方法
这篇文章主要介绍了基于vue-video-player自定义播放器的方法，主要是基于video.js开发的vue-video-player的使用，以及如何操作video.js中的api。需要的朋友可以参考下
2018-03-03
Vue生命周期区别详解
这篇文章主要介绍了Vue生命周期区别详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
2021-07-07
vue使用jsMind思维导图的实战指南
jsMind是一个显示/编辑思维导图的纯javascript类库,其基于 html5的canvas进行设计,这篇文章主要给大家介绍了关于vue使用jsMind思维导图的相关资料,需要的朋友可以参考下
2023-01-01
详解vue路由篇(动态路由、路由嵌套)
这篇文章主要介绍了详解vue路由篇(动态路由、路由嵌套)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-01-01
Vue3中如何使用Three.js详解(包括各种样例、常见场景、问题及解决方案)
Three.js是一个常见的需求,Three.js是一个用于在浏览器中创建和显示动画3D计算机图形的JavaScript库,这篇文章主要介绍了Vue3中如何使用Three.js的相关资料,包括各种样例、常见场景、问题及解决方案,需要的朋友可以参考下
2025-04-04