electron：ipcRenderer和ipcMain进程通信

高考我军

已于 2022-09-14 15:38:45 修改

阅读量1.9k

点赞数 1

分类专栏： electron 文章标签： electron p2p xml

于 2021-12-11 11:14:23 首次发布

本文链接：https://blog.csdn.net/u011461601/article/details/121870253

版权

electron 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本文详细介绍如何使用Electron的ipcRenderer和ipcMain在主进程和渲染进程中进行双向通信，包括创建事件监听和消息传递。通过`data1`和`data2`示例展示了如何在Vue应用中实现数据交换。

摘要由CSDN通过智能技术生成

electron提供ipcRender和ipcMain进行主进程和渲染进程进行通信

package.json

{
  ...
  "dependencies": { 
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "electron": "^11.5.0",
    "electron-builder": "^22.10.4",
    "electron-devtools-installer": "^3.1.0",
    "electron-prebuilt": "^1.4.13"
    
  }
}

主进程发送消息

...

var mainWindow = new BrowserWindow({
    width: 1280,
    height: 750,
    webPreferences: {
      contextIsolation: false,
      enableRemoteModule: true,
      nodeIntegration: true 
    }
})

var data1 = '123'
var data2 = '456'
mainWindow.webContents.send('db_link_history', data1, data2) 

...

渲染进程接收主进程的消息

const { ipcRenderer } = window.require('electron') 

...

ipcRenderer.on('db_link_history', async (event, ...args) => {
    var data1 = args[0]  // data1 = '123'
    var data2 = args[1]  // data2 = '456'
})

...

渲染进程发送消息

const { ipcRenderer } = window.require('electron') 

...

var data1 = '123'
var data2 = '456'
ipcRenderer.invoke('link_create', data1, data2)

...

主进程接收渲染进程消息

const { ipcMain} = window.require('electron') 

...

ipcMain.handle('link_create', async (event, ...args) => {
  var data1= args[0] // data1 = '123'
  var data2= args[1] // data2 = '456'
})

...