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.js中引入vuex储存接口数据及调用的详细流程
这篇文章主要给大家介绍了关于在vue.js中引入vuex储存接口数据及调用的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
2017-12-12
浅谈vue3中effect与computed的亲密关系
这篇文章主要介绍了浅谈vue3中effect与computed的亲密关系，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-10-10
vue+elementUI面包屑组件封装方法详解
这篇文章主要为大家详细介绍了vue+elementUI面包屑组件封装方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
Vue2.x通用编辑组件的封装及应用详解
这篇文章主要为大家详细介绍了Vue2.x通用编辑组件的封装及应用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-05-05
vue插件draggable实现拖拽移动图片顺序
这篇文章主要为大家详细介绍了vue插件draggable实现拖拽移动图片顺序，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-12-12
vue使用axios导出后台返回的文件流为excel表格详解
这篇文章主要介绍了vue使用axios导出后台返回的文件流为excel表格方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
Element UI框架中巧用树选择器的实现
这篇文章主要介绍了Element UI框架中巧用树选择器的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-12-12
基于vue.js实现的分页
本文主要给大家介绍基于vue的分页原生写法，代码分为html部分和js部分，简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下吧
2018-03-03
Vue实现商品分类菜单数量提示功能
这篇文章主要介绍了Vue实战—商品分类菜单数量提示功能，本文通过项目实战给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-07-07
vue3通过render函数实现菜单下拉框的示例
本文主要介绍了vue3通过render函数实现菜单下拉框的示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-04-04