第八节 Electron主进程和渲染进程之间的通信

系列文章目录

第一节 electron 介绍

第二节 创建electron项目并启动

第三节 Electron运行流程 、 主进程渲染进程并使用nodejs

第四节 Electron 调用H5事件结合node模块fs 实现文件拖拽读取

第五节 Electron 模块介绍 remote模块详细介绍

第六节 Electron安全策略

第七节 Electron顶部菜单及右键菜单

目录

前言

渲染进程通过事件执行主进程里的方法或者渲染进程通知主进程去处理事件，处理完成后广播一个事件给渲染进程，让渲染进程去处理。这就用到了主进程和渲染进程的通信。

实现方法

主进程和渲染进程的通信主要用到两个模块：ipcMain 和 ipcRenderer

ipcMain: 处理渲染进程发送过来的消息，或从主进程给渲染进程发送消息

ipcRenderer:渲染进程发送同步或者异步的消息给主进程  或者接受主进程的消息

渲染进程调用主进程方法并给主进程发送消息有三种情况

1、渲染进程给主进程执行主进程的方法并给主进程发送消息

知识点：

//渲染进程

const { ipcRenderer } = require('electron')

ipcRenderer.send("sendMsg", "i am renderer")//异步

// 主进程

const {ipcMain } = require("electron");

ipcMain.on("sendMsg",(e,data)=>{

  console.log("data",data)

})

2、渲染进程给主进程发送消息，主进程收到后回复给渲染进程

知识点：

//渲染进程

const { ipcRenderer } = require('electron')

ipcRenderer.send("sendMsgReplay", "i am ipcRenderer i hope your replay")//异步

ipcRenderer.on("mainReplay", (e, data) => {

    console.log(data)

  })

// 主进程

const {ipcMain } = require("electron");

ipcMain.on("sendMsgReplay",(e,data)=>{

  e.sender.send('mainReplay','我是主进程我已经收到你的信息了')

})

3、对情况2的改进  渲染进程给主进程发送同步消息

知识点：

//渲染进程

const { ipcRenderer } = require('electron')

ipcRenderer.sendSync("sendMsgReplaySync", "i am ipcRenderer i hope your replay")

// 主进程

const {ipcMain } = require("electron");

// 接收同步消息

ipcMain.on("sendMsgReplaySync",(e,data)=>{ 

  e.returnValue='我是主进程我已经收到你的信息了'

})  

主进程主动给渲染进程发送消息 

知识点：

//渲染进程

const { ipcRenderer } = require('electron')

ipcRenderer.on("memuReply", (e, data) => {

    console.log(data)

  })

// 主进程

const {BrowserWindow } = require("electron");

BrowserWindow.getFocusedWindow().webContents.send("memuReply","我是主进程要触发渲染进程的方法")

改进右键菜单

知识点：

渲染进程中获取当前窗口的方法 remote.getCurrentWindow()

主进程中获取当前窗口的方法 BrowserWindow.getFocusedWindow()

总结

以上就是今天要讲的内容，主要思路就是主进程和渲染进程通信所涉及的一些知识点，当做笔记记下来 。

每天记录一点，助力成长！

欢迎大家来浏览我的博客，如发现我有写错的地方，欢迎交流指正。

如果你觉得本文对你有帮助，欢迎点赞收藏转载，烦请注明出处，谢谢！