之前，我们知道了如何快速将一个web项目转化为桌面端应用，同时也知道了针对某些行业如何添加副屏。不过，在有些场景下，可能需要通过Electron获取一些桌面端（系统）信息，传递给网页，或者副屏需要需要接收主屏传过来的数据等等场景，此时，我们就需要通过通信解决。

1、以前

以前，通过 Electron 构建的构建的项目，会在网页环境中提供 require 函数，用来加载 electron 的一些模块，进而解决一些问题，不过后面统一改成使用 IPC 通道（也保留了原有方式，不过需要简单配置下，这里不在叙述） 去实现通信。

2、理解

之前我们说过，electron 是分为主进程和渲染进程，可以简单这样理解，渲染进程就是类似浏览器，帮你渲染你指定的网页地址，主进程则是 electron 相关代码。

假设，网页需要通过 electron 获取电脑mac地址，从而完成登录，那么问题可以分为两步：

1、网页告诉主进程，我要获取mac地址
2、主进程接收到信息，获取mac地址，并返回它

也就是 渲染进程----->主进程的过程

3、渲染进程----->主进程的过程

// ======================electron 中====================================
// =========preload.js中=======const { contextBridge, ipcRenderer } = require('electron')
// 这一步，会在 window 环境下，注册一个 testElectronAPI 对象，里面就放着你写的通信api
contextBridge.exposeInMainWorld('testElectronAPI',{getMacInfo: () => ipcRenderer.invoke('get-mac')
})// =========main.js中=======
app.whenReady().then(() => {// 添加处理函数ipcMain.handle('get-mac', async function () {const os = require("os")const macRegex = /(?:[a-z0-9]{1,2}[:-]){5}[a-z0-9]{1,2}/iconst zeroRegex = /(?:[0]{1,2}[:-]){5}[0]{1,2}/let info = {mac: []}const list = os.networkInterfaces()for (const [key, parts] of Object.entries(list)) {if (!parts) continuefor (const part of parts) {if (zeroRegex.test(part.mac) === false) {info.mac.indexOf(part.mac) == -1 ? info.mac.push(part.mac) : ''}}}return info})...
})// 这一步，就完成了在主进程中，事件的注册，那么接下来就是在渲染进程中触发了// ======================网页中====================================btn.addEventListener('click', async () => {const res = await window.electronAPI.getMacInfo()....
})

上述是比较推荐的做法，在Electron 7 之前，也可以采用 send、sendSync两种方式，不过这两种性能不是很好，尤其是 sendSync 同步方法，必须等到返回信息，如果一直没返回，容易造成卡死

4、假如我是要与副屏通信呢？

上面我们是解决了 渲染进程----->主进程 的问题，对于副屏这种问题其实就是 渲染进程(主) ----> 主进程----->渲染进程(副)，人话就是：

1、主屏告诉 electron，我这里有个副屏的快递，我先给你
2、electron 拿到快递，告诉副屏，你的快递
3、副屏，拿到快递了

上面这个例子可以知道，相当于 electron 只是在充当了一次中转的角色，把主屏的内容，交给了副屏

这里可以联合运用
渲染器进程到主进程（单向）+ 主进程到渲染器进程

以下为，将主屏中的购物车信息，同步到副屏中

// 实现 渲染器进程到主进程（单向）// =========== 老规矩 electron 中 ===========
// preload.js
const { contextBridge, ipcRenderer } = require('electron')
contextBridge.exposeInMainWorld('mainScreen', {setViceGoods: (data) => ipcRenderer.send('set-goods', data)
})
// main.js
ipcMain.on('set-goods', (event, data) => {// viceWindow 为副屏窗口viceWindow.webContents.send('update-goods-msg', data)})// 主屏传递window.mainScreen.setViceGoods(goodsData)// 副屏注册事件 
// 副屏的 preload.js 
const { contextBridge, ipcRenderer } = require('electron')
contextBridge.exposeInMainWorld('viceScreen', {onGoods: (callback) => ipcRenderer.on('update-goods-msg', callback)
})// 副屏网页中
// 可以理解为注册了一个回调函数
window.viceScreen.onGoods((event, data) => {console.log('传递过来的数据',data)
})

简单介绍了常用的几种通信方式，如有更多需求，可参考文档（链接）