主进程与渲染进程通过ipc进行通信

如何在渲染进程中使用IPC?

使用preload

• 在项目目录下新建preload.js，具体位置可以自己配置

• 主进程在窗口创建选项中添加preload文件位置

  win = new BrowserWindow({
      minWidth: 974,
      minHeight: 577,
      webPreferences: {
        nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
        contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,
        preload: path.join(__dirname, 'preload.js'),
      },
    });
  

• preload.js

  const { contextBridge: bridge, ipcRenderer } = require('electron');
  const fs = require('fs');
  bridge.exposeInMainWorld('ipcRenderer', {
    send: (channel, data) => ipcRenderer.send(channel, data),
    on: (channel, fun) => ipcRenderer.on(channel, fun),
    selectFolder: () => ipcRenderer.invoke('dialog:openDirectory')
  });
  
  bridge.exposeInMainWorld('node', {
    fs
  });
  

  在preload.js中可以添加任何自己想要操作的主进程api，或者node的api,这一步会将这些api注入到渲染进程的window对象中

• 渲染进程中使用

  window.ipcRenderer.xxx
  window.node.xxx
  

主进程如何与渲染进程通信？

• 主进程

  import { ipcMain } from 'electron';
  //主进程给渲染进程发消息
  win.webContents.send('closeWindow',args);
  
  //主进程接收渲染进程消息
  ipcMain.on('toMain', () => {
      log.info('接收到渲染进程的消息');
   });
  

• 渲染进程

  //渲染进程接收消息
  window.ipcRenderer.on('closeWindow',(e,args)=> {
  		//第二个参数args才是主进程传过来的参数
  } 
  
  //渲染进程发消息给主进程
  window.ipcRenderer.send('toMain',args)