Electron进程间通信

本文使用的程序是webpack+electron+react，搭建过程参考使用Webpack创建Electron应用，并配置React-CSDN博客

electron应用有主进程和渲染进程两种进程

主进程：只有一个，属于node环境

渲染进程：可以有多个，最直观的理解就是一个窗口就是一个渲染进程，属于浏览器环境

那么为什么需要进程间通信呢

因为有的时候我们需要在渲染进程中做只有主进程才能实现的操作，比如，点击页面的一个按钮实现创建一个文件并写入一些内容的功能，而创建文件并写入内容只有在node环境中才能实现，渲染进程显然无法做到，这是就需要渲染进程通知主进程去实现该操作，这就是进程间的通信

如何实现进程间的通信呢

这就需要预加载脚本的介入了

预加载脚本：在渲染进程中运行，属于浏览器环境，但能访问部分Node API

如何使用预加载脚本？

主进程中创建窗口时有一个配置项，配置后预加载脚本即可执行（本程序在搭建时就已配置完成）

怎么看预加载脚本是否执行呢

另外，主进程、预加载脚本、渲染进程的执行顺序是：主进程->预加载脚本->渲染进程

（改动渲染进程的内容，只需刷新，改动主进程的内容需重启项目）

需要在预加载脚本中做一些操作使其与渲染进程联系起来

contextBridge.exposeInMainWorld(key,value)会将key挂载到window上，在主进程中可以使用

注意value是一个对象

 到现在，我们已经知道了主进程与预加载进程，以及预加载进程如何与渲染进程联系的，那么接下来学习进程间的通信吧

无法直接在预加载脚本中将进程通信需要使用到的electron相关API挂载到window上（原因在篇末说明），所以在渲染进程中只能调用preload.js文件中提供的函数来完成操作

进程间的通信方式可分为以下四种：

官网描述如下：进程间通信 | Electron

• 渲染进程——>主进程
  
  ipcRenderer.send         ipcMain.on
  
  例子如下：
  
• 渲染进程<——>主进程
  
  ipcRenderer.invoke     ipcMain.handle
  
  例子如下：
  
  注意看，此时读取的内容输出是一个promise对象，需要进行await处理
  
• 渲染进程<——主进程
  
  ipcRenderer.on      mainWindow.webContents.send
  
  例子如下：
  
• 渲染进程<——>渲染进程
  
  个人人为这块是比较难一点的，需要借助主进程来实现
  渲染进程1——>主进程——>渲染进程2
  ipcRenderer.send     ipcMain.on，mainWindow.webContents.send     ipcRenderer.on
  
  首先创建一个新的窗口
  
  
  最终代码如下：
  
  
  
  
  有个踩坑的点，为什么在preload.js文件中不直接将ipcRenderer暴露出去
  
  因为版本问题，旧的版本支持，但较新的版本则不支持，官网解释如下：
  官网说明：重大更改 | Electron
• 
  错误示例如下：