利用 IPC 通信

  • 主进程与渲染进程的区别

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

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

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

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

electron中文文档

  • 可以使用此方法来实现electron中复杂的页面通信。
          
  • 0
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
// 主进程 import { ipcMain } from 'electron'; // 以主进程为媒介实现渲染进程之间的通信 ipcMain.on('set-main', (e, data) => { e.sender.send('main-callBack', `callBack ${data}`); })

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

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

          
  • 0
  • 1
  • 2
  • 3
  • 4
// 渲染进程1 import { ipcRenderer } from 'electron'; ipcRenderer.send('set-main','ok');
          
  • 0
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
// 渲染进程2 import { ipcRenderer } from 'electron'; // 在其他渲染进程中获得反馈 ipcRenderer.on('main-callBack', (e, data) => { console.log(data) // callBack ok })

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

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

复用

  • 如果有很多的通信操作也不需要在主进程中写上大量的监听,只需要动一些手脚:
          
  • 0
  • 1
  • 2
  • 3
  • 4
  • 5
// 主进程 import { ipcMain } from 'electron'; ipcMain.on('set-main', (e, data) => { e.sender.send(data.key, data.data); })
          
  • 0
  • 1
  • 2
  • 3
// 渲染进程1 import { ipcRenderer } from 'electron'; ipcRenderer.send('set-main',{key:'main-callBack',data:'ok'});

全局变量

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

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

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