Electron 主进程与渲染进程通信

已于 2022-02-09 11:50:53 修改
阅读量1k 收藏 1
点赞数
分类专栏： Electron 桌面应用 文章标签： electron 前端 javascript
于 2022-02-09 09:40:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_38066007/article/details/122835621
版权

主进程与渲染进程之间通信

main.js

const { app, BrowserWindow, Menu, ipcMain } = require('electron')

console.log(process.platform)

// 创建窗口
function createWindow () {
  console.log('ready')
  // 创建主进程
  const mainWin = new BrowserWindow({
    title: '自定义菜单',
    show: false, // true：显示窗体，false: 不显示窗体
    width: 800,
    height: 400,
    webPreferences: {
      nodeIntegration: true, // 允许浏览器环境使用Node API
      enableRemoteModule: true, // 允许页面使用 remote
    }
  })

  // 定义自己需要的菜单项
  const menuTemp = [
    {
      label: 'send',
      click() {
        BrowserWindow.getFocusedWindow().webContents.send('mtp', '来自于自进程的消息')
      }
    },
    {
      label: 'tool',
      click() {
        mainWin.webContents.openDevTools() // 打开调试面板
      }
    }
  ]

  // 生成菜单
  const menu = Menu.buildFromTemplate(menuTemp)

  // 将菜单添加到应用里
  Menu.setApplicationMenu(menu)

  // 在当前窗口中加载指定界面让它显示具体的内容
  mainWin.loadFile('index.html')
  

  mainWin.on('ready-to-show', () => {
    mainWin.show() // 在窗体完全加载完成后，显示窗体，避免白页现象
  })

  mainWin.on('close', () => {
    console.log('close')
    //mainWin = null
  })
}

// 当 app 启动之后，执行窗口创建等操作
app.on('ready', createWindow)

app.on('window-all-closed', () => {
  console.log('window-all-closed')
  app.quit()
})


// 主进程接收渲染进程传递的消息
ipcMain.on('msg1', (e, data) => {
  console.log(data)
  e.sender.send('msg1Re', 'msg1Re')
})

ipcMain.on('msg2', (e, data) => {
  console.log(data)
  e.returnValue = 'msg2Re'
})

index.js

const { ipcRenderer } = require('electron')

window.addEventListener('DOMContentLoaded', () => {
  const aBtn = document.getElementsByTagName('button')

  // 使用 异步API 在渲染进程中发送消息
  aBtn[0].addEventListener('click', () => {
    ipcRenderer.send('msg1', 'msg1')
  })

  // 使用 同步API 在渲染进程中发送消息
  aBtn[1].addEventListener('click', () => {
    const res = ipcRenderer.sendSync('msg2', 'msg2')
    console.log(res)
  })

 
  // 接收消息
  ipcRenderer.on('msg1Re', (e, data) => {
    console.log(data)
  })

  ipcRenderer.on('mtp', (e, data) => {
    console.log(data)
  })
})

渲染进程之间通信

渲染进程之间通信需要借助第三方完成数据中转

 

基于本地存储的渲染进程通信

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
</head>

<body>
  <h2>渲染进程间通信</h2>
  <button id="btn">打开窗口2</button>
  <script src="index.js"></script>
</body>
</html>

main.js

const { app, BrowserWindow, Menu, ipcMain } = require('electron')

console.log(process.platform)

// 定义全局变量存放主窗口 id
let mainWinId = null

// 创建窗口
function createWindow () {
  console.log('ready')
  // 创建主进程
  const mainWin = new BrowserWindow({
    title: '自定义菜单',
    show: false, // true：显示窗体，false: 不显示窗体
    width: 800,
    height: 400,
    webPreferences: {
      nodeIntegration: true, // 允许浏览器环境使用Node API
      enableRemoteModule: true, // 允许页面使用 remote
    }
  })

  // 在当前窗口中加载指定界面让它显示具体的内容
  mainWin.loadFile('index.html')
  
  mainWinId = mainWin.id

  mainWin.on('ready-to-show', () => {
    mainWin.show() // 在窗体完全加载完成后，显示窗体，避免白页现象
  })

  mainWin.on('close', () => {
    console.log('close')
    //mainWin = null
  })
}

// 当 app 启动之后，执行窗口创建等操作
app.on('ready', createWindow)

app.on('window-all-closed', () => {
  console.log('window-all-closed')
  app.quit()
})


// 主进程接收渲染进程传递的消息
ipcMain.on('openWin2', () => {
  // 创建窗口
  const subWin1 = new BrowserWindow({
    width: 400,
    height: 300,
    parent: BrowserWindow.fromId(mainWinId),
    webPreferences: {
      nodeIntegration: true, // 允许浏览器环境使用Node API
      enableRemoteModule: true, // 允许页面使用 remote
    },
  })

  subWin1.loadFile('subWin1.html')
})

index.js

const { ipcRenderer } = require('electron')

window.addEventListener('DOMContentLoaded', () => {
  const oBtn = document.getElementById('btn')

  oBtn.addEventListener('click', () => {
    ipcRenderer.send('openWin2')

    // 打开窗口后，存储数据在本地
    localStorage.setItem('name', 'name1')
  })
})

subWin1.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>窗口2</title>
</head>

<body>
  <h2>当前窗口2</h2>
  获取到index.html中的数据： <input type="text" id="txt">
  <script src="subWin1.js"></script>
</body>
</html>

subWin1.js

window.addEventListener('DOMContentLoaded', () => {
  const oInput = document.getElementById('txt')
  const val = localStorage.getItem('name')
  oInput.value = val
})

基于主进程的渲染进程通信

subWin1.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>窗口2</title>
</head>

<body>
  <h2>当前窗口2</h2>
  获取到index.html中的数据： <input type="text" id="txt">
  <br><br>
  <button id="btn">发送数据</button>
  <script src="subWin1.js"></script>
</body>
</html>

subWin1.js

const { ipcRenderer } = require('electron')

window.addEventListener('DOMContentLoaded', () => {
  // 发送数据给 index.js
  const oBtn = document.getElementById('btn')
  oBtn.addEventListener('click', () => {
    ipcRenderer.send('stm', 'stm')
  })

  // 接收数据
  ipcRenderer.on('its', (e, data) => {
    console.log(data)
  })
})

main.js

const { app, BrowserWindow, Menu, ipcMain } = require('electron')

console.log(process.platform)

// 定义全局变量存放主窗口 id
let mainWinId = null

// 创建窗口
function createWindow () {
  console.log('ready')
  // 创建主进程
  const mainWin = new BrowserWindow({
    title: '自定义菜单',
    show: false, // true：显示窗体，false: 不显示窗体
    width: 800,
    height: 400,
    webPreferences: {
      nodeIntegration: true, // 允许浏览器环境使用Node API
      enableRemoteModule: true, // 允许页面使用 remote
    }
  })

  // 定义自己需要的菜单项
  const menuTemp = [
    {
      label: 'send',
      click() {
        BrowserWindow.getFocusedWindow().webContents.send('mtp', '来自于自进程的消息')
      }
    },
    {
      label: 'tool',
      click() {
        mainWin.webContents.openDevTools() // 打开调试面板
      }
    }
  ]

  // 生成菜单
  const menu = Menu.buildFromTemplate(menuTemp)

  // 将菜单添加到应用里
  //Menu.setApplicationMenu(menu)

  // 在当前窗口中加载指定界面让它显示具体的内容
  mainWin.loadFile('index.html')
  
  mainWinId = mainWin.id

  mainWin.on('ready-to-show', () => {
    mainWin.show() // 在窗体完全加载完成后，显示窗体，避免白页现象
  })

  mainWin.on('close', () => {
    console.log('close')
    //mainWin = null
  })
}

// 当 app 启动之后，执行窗口创建等操作
app.on('ready', createWindow)

app.on('window-all-closed', () => {
  console.log('window-all-closed')
  app.quit()
})


// 主进程接收渲染进程传递的消息
ipcMain.on('openWin2', (e, data) => {
  // 创建窗口
  const subWin1 = new BrowserWindow({
    width: 400,
    height: 300,
    parent: BrowserWindow.fromId(mainWinId),
    webPreferences: {
      nodeIntegration: true, // 允许浏览器环境使用Node API
      enableRemoteModule: true, // 允许页面使用 remote
    },
  })

  subWin1.loadFile('subWin1.html')

  // 窗口加载完成后执行数据发送
  subWin1.webContents.on('did-finish-load', () => {
    subWin1.webContents.send('its', data)
  })
})

ipcMain.on('stm', (e, data) => {
  // 当前我们需要将 data 经过 main 进程转交给指定的渲染进程
  // 此时我们可以依据指定的窗口 ID 来获取对应的渲染进程，然后执行消息的发送
  const mainWin = BrowserWindow.fromId(mainWinId)
  mainWin.webContents.send('mti', data)
})

index.js

const { ipcRenderer } = require('electron')

window.addEventListener('DOMContentLoaded', () => {
  const oBtn = document.getElementById('btn')

  oBtn.addEventListener('click', () => {
    ipcRenderer.send('openWin2', 'from index.js')
  })

  // 接收消息
  ipcRenderer.on('mti', (e, data) => {
    console.log(data)
  })
})

1

沿着路走到底
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
electron主进程和渲染进程通信
01-24
介绍：https://blog.csdn.net/applek_Case/article/details/86622059
Electron主进程渲染进程间通信的四种方式
老电影故事的博客
01-06 6082
在中进程使用和模块，通过开发人员定义的“通道”传递消息来进行通信。新的版本中推荐使用上下文隔离渲染器进程进行通信，这种方式的好处是无需在渲染进程中直接使用发送消息，这种在渲染进程中调用nodejs对象的方法对于渲染进程有侵入性。当我们使用或者其他前端框架开发界面时，上下文隔离方式使用起来更加方便，基本上感受不到对前端框架的影响。
electron 主进程与渲染进程通讯
嘿嘿
07-08 3007
Electron 基本应用
Electron主进程和渲染进程之间通信
duansamve的博客
08-31 2591
Electron发送和接收数据用到的是 ipcMain 和 ipcRenderer 两个对象：ipcMain 是用在主进程中的；ipcRenderer 是用在渲染进程中的。
electron主进程与渲染进程之间通信
weixin_43239880的博客
03-15 1790
主进程与渲染进程进行通总而言之这个preload.js的作用就是作为渲染进程与主进程之间的通信桥梁，做的事就是：1. 给渲染进程(可以说是你src下面的.vue文件和.js文件)暴露方法供渲染进程调用 2.渲染进程调用该方法，该方法中可以给主进程发送事件，然后在主进程中一般会监听该事件，再调用electron的api来改变应用的状态（比如改变窗口的外壳大小，让窗口最小化））官方解释为：从渲染器进程代码调用主进程模块并等待结果 (简而言之：你要做饭，然后让主进程去买菜，但是你需要它的菜才能进行下一步做饭)
electron 入门 第二篇 主进程与渲染进程通信
倔强的钢蛋
03-17 385
electron 第二篇 主进程与渲染进程通信
Electron进程间的通信，主进程与渲染进程之间的通信，渲染进程通过主进程与渲染进程之间的通信，渲染进程直接与渲染进程之间的通信
04-10
这个小Demo 实现了 Electron 程序 从0 开始搭建，没有用脚手架，实现了 Electron进程间的通信，主进程与渲染进程之间的通信，渲染进程通过主进程与渲染进程之间的通信，渲染进程直接与渲染进程之间的通信，几种实现...
electron-safe-ipc:在Electron中主进程和渲染器进程之间的安全通信
04-27
电子安全IPC electronic-safe-ipc是Electron中主进程与渲染器进程之间的安全通信库。 “安全”是指： 即使在渲染器进程中node-integration == false时也可以使用无需JS对象实例共享即可工作它用： JSON打包数据电子...
vue3+vite+pinia+electron实现桌面端应用-自定义收藏夹功能
最新发布
11-01
内容概要：通过vue3+electron实现一个基础的桌面端应用——收藏夹功能。使用了部分vue3的基本功能及方法，了解Electron的一下API的使用，...5、实现electron主进程与渲染进程间相互通信 6、使用element-plus构建UI界面
rpc:用于Electron和Node.js的类型安全的进程间通信
05-23
这是使用与渲染器的主要进程进行通信的方法： 安装npm install --save @wexond/rpc-electron @wexond/rpc-core 创建一个在主进程和渲染器进程中都导入的文件，例如ping-pong.ts ： import { RendererToMainChannel ...
【Electron】主进程和渲染进程之间如何通信
weixin_43343144的博客
05-22 205
【代码】【Electron】主进程和渲染进程之间如何通信。
electron主进程与渲染进程通信
weixin_43777074的博客
06-26 537
main.js中发送。
Electron入门宝典（四）主进程与渲染进程之间的通信
长夜漫漫，无心睡眠
04-23 2201
目录 一.介绍 二.渲染进程执行主进程里的方法（异步） 三.渲染进程执行主进程里的方法，主进程给渲染进程反馈处理结果（异步） 四.渲染进程和主进程通信（同步） 五.主进程通知渲染进程执行操作 六.通过主进程渲染进程的通信改造右键菜单 一.介绍 有时候我们想在渲染进程中通过-一个事件去执行主进程里面的方法。或者在渲染进程中通知主进程处理事件，主进程处理完成后广播-个事件让渲染进程去处理一-些事情。这个时候就用到了主进程和渲染进程之间的相互通信。 用到的两个模块： ipcMain : 当
Electron 中主进程与渲染进程之间的通信详解
越陌度阡
04-18 1978
Electron 主进程和渲染进程的通信主要用到两个模块：ipcMain 和 ipcRenderer。 ipcMain：当在主进程中使用时，它处理从渲染器进程发送出来的异步和同步信息，也可以从主进程向渲染进程发送消息。 ipcRenderer： 使用它提供的一些方法从渲染进程发送同步或异步的消息到主进程，也可以接收主进程回复的消息。 1. 渲染进程给主进程发送异步消息 渲染进程给主进程发送异步消息： // ipcRenderer.js const {ipcRenderer} =require("
Electron中主进程和渲染进程之间的通信
大草的博客
03-21 864
Electron中主进程和渲染进程之间的通信：内容介绍与demo演示。
electron 主进程和渲染进程的通信
Heartnottowake的博客
06-08 873
主进程给渲染进程发送消息，得用到ipcMain和ipcRenderer，流程和vue的父子通信很像1,渲染进程给主进程通信（异步）html里面定义一个按钮,并加载渲染进程 渲染进程被加载，先获取按钮，然后定义一个点击事件，触发ipcRenderer.send发送消息给主进程 主进程使用ipcMain.on进行监听，触发后打印this is Renderer 2,主进程给渲染进程通信（异步）上面主进程已经接收到了渲染进程的消息，那么我们也要给渲染进程回个消息，说我们收到了 同样的，我们在主进程使用e.send
electron主进程与渲染进程的通信
weixin_43301027的博客
03-09 257
互通一下Electron进程主进程和渲染进程的区别**ipcMain/ipcRenderer**demo 最近一直在用electron 这里记录写一下主进程和渲染进程之间的通信交流是怎么交流的怎么通信的 Electron electron是基于 Chromium 和 Node.js 让你可以使用 HTML,CSS ,JS,TS,VUE,React等构建的桌面应用。并且Electron 兼容 Mac、Windows 和 Linux，可以构建出三个平台的应用程序。 进程 Electron 的进程和我们计算机的进
Electron中通过ipcMain和ipcRender实现主进程和渲染进程之间的相互通信
BADAO_LIUMANG_QIZHI的博客
06-03 3874
场景 用HTML和CSS和JS构建跨平台桌面应用程序的开源库Electron的介绍以及搭建HelloWorld： https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106413828 Electron怎样进行渲染进程调试和使用浏览器和VSCode进行调试： https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106414541 在上面搭建好项目以及知道怎样进行调试后，那
Electron 入门，主进程向渲染进程发送事件，渲染进程向主进程发送事件
07-24 6614
Electron 入门 主进程 如何向 渲染进程发送事件，渲染进程向主进程发送事件 刚入门 electon ，整 electon + vue 整了好几天也没整明白。 我的需求是使用 Electron 做一个跨平台的能编辑指定文件的工具，其实有没有 Vue 没什么区别，Vue 也是需要 build 之后才能被 electron 使用。 最终放弃了，改用 electron + html 的方式，直接了当。 一、什么是 Electron electron 其实就是个壳子，一个可以展示网页内容的壳子，相当于一个独
electron主进程向渲染进程通信
03-07
可以使用 Electron 提供的 IPC (Inter-Process Communication) 模块来实现主进程和渲染进程之间的通信。具体实现方式可以参考 Electron 官方文档中的 IPC 部分。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值