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', function(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 查找窗口
let win = BrowserWindow.fromId(winId);
复制成功
1