Electron 主进程和渲染进程通信
有时候我们想在渲染进程中通过一个事件去执行主进程里面的方法。或者在渲染进程中通知 主进程处理事件，主进程处理完成后广播一个事件让渲染进程去处理一些事情。这个时候就 用到了主进程和渲染进程之间的相互通信。
Electron 主进程，和渲染进程的通信主要用到两个模块：ipcMain 和 ipcRenderer
ipcMain：当在主进程中使用时，它处理从渲染器进程（网页）发送出来的异步和同步信息, 当然也有可能从主进程向渲染进程发送消息。
ipcRenderer： 使用它提供的一些方法从渲染进程 (web 页面) 发送同步或异步的消息到主 进程。 也可以接收主进程回复的消息。
场景 1：渲染进程给主进程发送异步消息：
// 渲染进程
const { ipcRenderer } = require('electron')
ipcRenderer.send('msg', { name: '张三' }) // 异步
1
2
3
2
3
//主进程
const { ipcMain } = require('electron');
ipcMain.on(''msg'',(event,arg) => {
// 处理业务
})
1
2
3
4
5
2
3
4
5
场景 2：渲染进程给主进程发送异步消息，主进程接收到异步消息以后通知渲染进程：
// 渲染进程
const { ipcRenderer } = require('electron')
ipcRenderer.send('msg', { name: '张三' })
// 异步
// 主进程
const { ipcMain } = require('electron')
ipcMain.on('msg', (event, arg) => {
event.sender.send('reply', 'pong')
})
// 渲染进程
const { ipcRenderer } = require('electron')
ipcRenderer.on('reply', (event, arg) => {
console.log(arg)
// prints "pong"
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
场景 3：渲染进程给主进程发送同步消息：
// 渲染进程
const { ipcRenderer } = require('electron')
const msg = ipcRenderer.sendSync('msg-a')
console.log(msg)
// 主进程
ipcMain.on('msg-a', (event) => {
event.returnValue = 'hello'
})
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
Electron渲染进程通过 localstorage给另一个渲染进程传值
localStorage.setItem(key, value)
localStorage.getItem(key)
1
2
2
通过 BrowserWindow 和 webContents 模块实现渲染进程和渲染进程的通信。
webContents 是一个 事件发出者.它负责渲染并控制网页，也是 BrowserWindow 对象的属性。
需要了解的几个知识点：
1、获取当前窗口的 id：
const winId = BrowserWindow.getFocusedWindow().id
1
2、监听当前窗口加载完成的事件
win.webContents.on('did-finish-load', (event) => { })
1
3、同一窗口之间广播数据
win.webContents.on('did-finish-load', (event) => {
win.webContents.send('msg', winId, '我是 index.html 的数据')
})
1
2
3
2
3
4、通过 id 查找窗口
const win = BrowserWindow.fromId(winId)
1