electron主进程与渲染进程之间通信

背景需求

学习electron的核心就是主进程与渲染进程之间的通信，electron相当于只是套了一层windows桌面应用的外壳，而自己的vue项目和react项目该怎么写还是怎么写。重点就在于自己的vue项目和electron之间怎么进行通信。
例如：1.点击了前端页面中的放大缩小和最小化，桌面应用的壳子就要放大，缩小和最小化（渲染进行向主进程通信）
2.点击了托盘中的退出，但是退出时要在vue中修改用户的登录状态并清除登录信息（主进程向渲染进行进行通信）

概念理解：
主进程：指的是你的electron进程
预加载脚本：electron进程与vue项目通信的直接桥梁
渲染进程：就是你的vue项目或者react项目

1.预加载脚本

根据electron官网（https://www.electronjs.org/zh/docs/latest/tutorial/tutorial-preload）所说的，渲染进程与主进程之间的通信需要通过一个preload.js来进行。（总而言之这个preload.js的作用就是作为渲染进程与主进程之间的通信桥梁，做的事就是：1. 给渲染进程(可以说是你src下面的.vue文件和.js文件)暴露方法供渲染进程调用 2.渲染进程调用该方法，该方法中可以给主进程发送事件，然后在主进程中一般会监听该事件，再调用electron的api来改变应用的状态（比如改变窗口的外壳大小，让窗口最小化））

vue中调用

1.渲染进程向主进程通信（单向）

对于单向的理解：就是渲染进程只需要调用方法，而不需要从主进程中拿到东西。比如，我点击最小化，我只需要主进程去将窗口最小化就行了，而不依靠主进程返回什么东西。(简而言之：你让主进程去送快递，你让他去就去了)
对于双向的理解：渲染进程调用了方法之后，必须等待主进程处理完成返回了数据之后才能继续运行下面的代码（保证代码同步执行）。比如，你获取文件信息之后需要进行上传给后台，需要去调用electron获取文件信息的api，但是该api是异步的，此时你就需要使用双向的通信了。官方解释为：从渲染器进程代码调用主进程模块并等待结果 (简而言之：你要做饭，然后让主进程去买菜，但是你需要它的菜才能进行下一步做饭)
核心：a.渲染进程通过预加载脚本（preload.js）给主进程通信，使用ipcRenderer.send
b.主进程中：使用 ipcMain.on 监听事件
渲染进程调用预加载脚本中的方法

预加载脚本中使用ipcRenderer.send去给主进程发送事件

主进程中：使用 ipcMain.on 监听事件

2.渲染进程向主进程进行通信（双向）

关于双向通信的理解已经在上面写了：简而言之：你要做饭，然后让主进程去买菜，但是你需要它的菜才能进行下一步做饭
核心：a.渲染进程通过预加载脚本（preload.js）给主进程通信，使用ipcRenderer.invoke
b.主进程中：使用 ipcMain.handle 处理事件
渲染进程调用预加载脚本中的方法

预加载脚本中使用ipcRenderer.invoke去给主进程发送事件

主进程中：使用 ipcMain.on 监听处理事件，并将结果返回

3.主进程到渲染器进程进行通信

核心：a.主进程中：使用webContents.send 发送事件消息
b.预加载脚本中使用ipcRenderer.on监听该事件
c.渲染进程中调用预加载脚本中的方法，并且参数为一个callback供预加载脚本调用
主进程中使用webContents.send 发送事件消息(告诉渲染进程我要退出了，你要做什么事赶紧做)

在预加载脚本中监听该事件（托盘退出事件），如果事件触发了，则调用渲染进程中的方法

渲染进程的mounted中调用该事件，让预加载脚本中去监听