Electron主进程与渲染进程通过IPC组件通信

本文主要是介绍Electron主进程与渲染进程通过IPC组件通信，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

IPC=inter-process communication=进程间通信

仍然以Electron读取本地文件并显示中的原始代码作为基础。

例子1

preload.js（渲染进程向主进程发送hello）：

  const { ipcRenderer } = require('electron');
  let sendMsgToMainProcess = (str) => {
    ipcRenderer.send("line1", str); // 默认就是异步
  }

  document.querySelector('#btn2').addEventListener("click", event => {
    // 点击按钮发送信息
    sendMsgToMainProcess('hello from renderer1');
  })

main.js（主进程接收该消息并回复）：

  ipcMain.on("line1", (event, arg) => {
    console.log(arg);
    event.reply("line1-reply", "helle from main process");
  })

preload.js（渲染进程监听并处理主进程返回的消息）：

  ipcRenderer.on("line1-reply", (event, args) => {
    console.log(args); // 打印主线程的回复
  })

例子2

渲染进程中点击按钮创建一个新的窗口。如果在渲染进程中直接使用electron主进程模块的API将抛出类似于BrowserWindow is not a constructor的异常.

preload.js

  document.querySelector('#btn3').addEventListener("click", event => {
    ipcRenderer.send("line2", "createWindow"); 
  })

main.js

  ipcMain.on("line2", (event, arg) => {
    if (arg == "createWindow") {
      const newWindow = new BrowserWindow({
        width: 300,
        height: 300,
      }) 
      newWindow.loadURL('https://baidu.com')
    }
  })

这篇关于Electron主进程与渲染进程通过IPC组件通信的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！