LANTEN

electron进程与页面通信

2017-11-12

全局变量

想要在多个页面中共享数据,最简单的办法是将数据保存在全局,需要的时候调用。

1
2
3
4
// 在主进程中初始化一个全局变量
global.sharedObject = {
someProperty: 'default value'
}

首先在主进程 main.js 中初始化一个全局变量 sharedObject 在需要的时候调用它

1
2
3
// 在第一个页面中写一个新值
import { remote } from 'electron';
remote.getGlobal('sharedObject').someProperty = 'new value';
1
2
3
4
// 在其他页面中调用全局变量
import { remote } from 'electron';
let val = remote.getGlobal('sharedObject').someProperty;
console.log(val);

利用 IPC 通信,并获得反馈

主进程与渲染进程的区别

主进程使用 BrowserWindow 实例创建页面。每个 BrowserWindow 实例都在自己的渲染进程里运行页面。当一个 BrowserWindow 实例被销毁后,相应的渲染进程也会被终止。

主进程管理所有页面和与之对应的渲染进程。每个渲染进程都是相互独立的,并且只关心他们自己的页面。

由于在页面里管理原生 GUI 资源是非常危险而且容易造成资源泄露,所以在页面调用 GUI 相关的 APIs 是不被允许的。如果你想在网页里使用 GUI 操作,其对应的渲染进程必须与主进程进行通讯,请求主进程进行相关的 GUI 操作。

在 Electron,官方提供几种方法用于主进程和渲染进程之间的通讯。像 ipcRendereripcMain 模块用于发送消息, remote 模块用于 RPC 方式通讯。

electron中文文档

可以使用此方法来实现electron中复杂的页面通信。

1
2
3
4
5
6
7
// 主进程
import { ipcMain } from 'electron';

// 以主进程为媒介实现渲染进程之间的通信
ipcMain.on('set-main', (e, data) => {
e.sender.send('main-callBack', `callBack ${data}`);
})

在主进程 main.js 中使用 ipcMain 来创建一个类似监听方法。

注意 ipcMain 只适用于主进程中,同理 ipcRenderer 只适用于渲染进程中。

1
2
3
4
// 渲染进程1
import { ipcRenderer } from 'electron';

ipcRenderer.send('set-main','ok');
1
2
3
4
5
6
7
// 渲染进程2
import { ipcRenderer } from 'electron';

// 在其他渲染进程中获得反馈
ipcRenderer.on('main-callBack', (e, data) => {
console.log(data) // callBack ok
})

渲染进程1 中使用 ipcRenderer 向主进程中发送了消息。

主进程收到消息后将消息转发给了 渲染进程2 ,这里起到媒介的作用,当然也可以直接操作主进程。

复用

如果有很多的通信操作也不需要在主进程中写上大量的监听,只需要动一些手脚:

1
2
3
4
5
6
// 主进程
import { ipcMain } from 'electron';

ipcMain.on('set-main', (e, data) => {
e.sender.send(data.key, data.data);
})
1
2
3
4
// 渲染进程1
import { ipcRenderer } from 'electron';

ipcRenderer.send('set-main',{key:'main-callBack',data:'ok'});

如此一来,主进程中的监听就可以复用了

扫描二维码,分享此文章