Electron: 主进程和渲染进程之间通信

复制代码
// 渲染进程 向 主进程 异步通信

// preload.js 预加载
const {ipcRenderer} = require('electron')
ipcRenderer.send('on-send-event', '这里是需要传递的参数') // 第一步

ipcRenderer.on('on-resend-event', (e, data) => {
    console.log(data) // 打印的是ipcMain.on传递过来的参数:这里还是传递的参数
}) // 第四步也就是最后一步



// main.js  主进程
const {ipcMain} = require('electron')
// 第二步
ipcMain.on('on-send-event', (e, data) => {
    console.log(data) // 打印的是ipcRenderer.send传递过来的参数:这里是需要传递的参数

    // 主进程主动给渲染进程传递信息(e.sender就是ipcMain)
    e.sender.send('on-resend-event', '这里还是传递的参数') // 第三步
})


// 渲染进程 向 主进程 同步通信

// preload.js 预加载
const {ipcRenderer} = require('electron')
const val = ipcRenderer.sendSync('on-send-event', '这里是需要传递的参数') // 第一步
console.log(val) // 第四步, 同步接收第三步传递过来的参数:来自于主进程的同步信息




// main.js  主进程
const {ipcMain} = require('electron')
// 第二步
ipcMain.on('on-send-event', (e, data) => {
    console.log(data) // 打印的是ipcRenderer.send传递过来的参数:这里是需要传递的参数

    // 主进程主动给渲染进程传递信息(e.sender就是ipcMain)
    e.returnValue = '来自于主进程的同步信息' // 第三步
})

主进程主动给渲染进程通信代码如下

复制代码
// 主进程 向 渲染进程 通信


// main.js  主进程
const {ipcMain, BroserWindow} = require('electron')
// 第一步,在自定义菜单Menu的click事件触发
click() {
    // BrowserWindow.getFocusedWindow:获取当前窗口
    BrowserWindow.getFocusedWindo().webContents.send('mtp', '来自主进程')
}


// preload.js 预加载
const {ipcRenderer} = require('electron')

// 第二步
ipcRenderer.on('mtp', (e, data) => {
    console.log(data) // 打印的是BrowserWindow.getFocusedWindo().webContents.send传递过来的参数:来自主进程


}) 

实现从子窗口点击按钮后传递数据给父窗口的渲染进程实现逻辑:由子窗口的渲染进程传递消息给主进程,然后再由主进程传递消息给主进程的html渲染进程

复制代码
// preload.js 预加载
const {ipcRenderer} = require('electron')

ipcRenderer.send('mtp', '我是参数') 
ipcRenderer.on('mti', (e, data) => {
    // 接收到数据data
}) 


// main.js  主进程
const {ipcMain, BroserWindow} = require('electron')

let mainWindowId = null;
function createWindow() {
    const mainWindow = new BrowserWindow({
        width: 1000,
        height: 800,
        webPreferences: {
 
        }
    })
    mainWindowId = mainWindow.id
}

ipcMain.on('mtp', (e, data) => {
    // data:我是参数
    let mainWin = BroserWindow.fromId(mainWinId)
    mainWin.webContents.send('mti', data) // 主进程给渲染进程html传递数据
})
相关推荐
ZengLiangYi4 小时前
Electron 入门:Web 应用打包成桌面软件
前端·electron
lqj_本人4 小时前
鸿蒙electron跨端框架PC想法卡片实战:把零散灵感做成能继续展开的卡片流
华为·electron·harmonyos
500847 小时前
HCCL 集合通信编程:多卡协同的正确姿势
java·flutter·性能优化·electron·wpf
蜡笔小电芯8 小时前
【Electron】第2章—BrowserWindow 与 Electron 窗口机制
前端·javascript·electron
蜡笔小电芯9 小时前
【Electron】第3章—HTML 页面与基础 UI 开发
ui·electron·html
蜡笔小电芯10 小时前
【Electron】第1章—新建工程(基于 Electron + Vite + JavaScript)
前端·javascript·electron
蜡笔小电芯12 小时前
【Electron】第4章—renderer.js 与页面交互逻辑
javascript·electron·交互
lqj_本人1 天前
鸿蒙electron跨端框架PC导出管家实战:把交付前的检查、复制和导出做成一个工坊
华为·electron·harmonyos
ai安歌1 天前
鸿蒙PC:鸿蒙electron跨端框架PC归档流水线实战:把散落文件整理成可追踪的桌面归档流程
华为·electron·harmonyos
lqj_本人1 天前
鸿蒙electron跨端框架PC课业板实战:课程、截止时间、提交物和风险都放到桌面上
服务器·electron·harmonyos