之前，我们知道了如何快速将一个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}/i
const 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) continue
for (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)
})
简单介绍了常用的几种通信方式，如有更多需求，可参考文档（链接）