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;
})

效果

总结

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

您可能感兴趣的文章:

vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
这篇文章主要介绍了vue2.0嵌套路由实现豆瓣电影分页功能(附demo),这里整理了详细的代码,有需要的小伙伴可以参考下。
2017-03-03
Vue中组件递归及使用问题
这篇文章主要介绍了Vue中组件的递归和使用问题，本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
2022-03-03
antd select 多选限制个数的实现代码
这篇文章主要介绍了antd select 多选限制个数,实现思路和核心代码都很简单，其中核心代码在于disabled，代码简单易懂需要的朋友可以参考下
2022-11-11
安装@vue/cli 报错npm WARN deprecated request
这篇文章主要介绍了安装@vue/cli 报错npm WARN deprecated request@2.88.2问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03
详解vue中使用vue-quill-editor富文本小结（图片上传）
这篇文章主要介绍了详解vue中使用vue-quill-editor富文本小结（图片上传），文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
vue实现消息无缝滚动效果
这篇文章介绍了vue实现消息无缝滚动效果的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-06-06
浅谈Vuex@2.3.0 中的 state 支持函数申明
这篇文章主要介绍了浅谈Vuex@2.3.0 中的 state 支持函数申明，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-11-11
浅析Vue中自定义指令的用法
在Vue中,有两种类型的自定义指令：局部指令和全局指令,但是除了这些指令 Vue也允许我们自己定义自己的指令,下面我们就来学习一下Vue中自定义指令的用法吧
2023-08-08
elementUI el-radio 无法点击的问题解决
本文主要介绍了elementUI el-radio 无法点击的问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-07-07
详解Vue 实例中的生命周期钩子
这篇文章主要介绍了详解Vue 实例中的生命周期钩子，在Vue的整个生命周期中，它提供了一些生命周期钩子，给了我们执行自定义逻辑的机会。
2017-03-03