electron主进程和渲染进程的通讯

渲染进程ipcRenderer.js

const {ipcRenderer}=require('electron')
window.onload=()=>{const sendMsgDom=document.querySelector('#sendMsg')// 1.1 渲染进程给主进程发送消息sendMsgDom.onclick=()=>{console.log('ipcRender')ipcRenderer.send('sendMsg','this is renderer msg')}// 2.1 渲染进程给主进程发送消息const sendMsgReply=document.querySelector('#sendMsgReply')sendMsgReply.onclick=()=>{console.log('ipcRender')ipcRenderer.send('sendMsgReply','this is sendMsgReply in renderer')}// 2.3监听主进程的反馈 ipcRenderer.on('replyRenderer',(e,data)=>{console.log(data)})// 3.1 渲染进程给主进程发送消息（同步）const sendMsgSync=document.querySelector('#sendMsgSync')sendMsgSync.onclick=()=>{console.log('sendMsgSync')let reply=ipcRenderer.sendSync('sendMsgSync','this is sendMsgSync')// 接收主进程的反馈信息console.log(reply)}
}

主进程ipcMain.js

const {ipcMain}=require('electron')// 1.2主进程接收渲染进程发送的消息
ipcMain.on('sendMsg',(e,data)=>{console.log(data)console.log(e)
})// 2.2 主进程接收渲染进程发送的消息，并向渲染进程反馈消息
ipcMain.on('sendMsgReply',(e,data)=>{console.log('sendMsgReply')e.sender.send('replyRenderer','收到了消息')
})// 3.2 接收渲染进程的同步消息
ipcMain.on('sendMsgSync',(e,data)=>{console.log('sendMsgSync')e.returnValue='我是主进程，同步消息已经收到'
})

主进程中主动向渲染进程广播消息

主进程中的menu.js模块

// Menu是主进程模块
const {Menu,BrowserWindow}=require('electron');
// 创建菜单模板
// https://www.electronjs.org/zh/docs/latest/api/menu-item
const menuTemplate=[{label:'文件',submenu:[{label:'触发渲染进程里面的方法',click:()=>{console.log('主进程主动触发渲染进程中的方法')// 4.1 主进程向渲染进程广播消息BrowserWindow.getFocusedWindow().webContents.send('renderMsg','触发渲染进程中的方法')}},{label:'新建',accelerator:'ctrl+n',//定义快捷键click:()=>{console.log('Ctrl+N')}},{label:'打开'},{label:'保存'}]},{label:'编辑',submenu:[{label:'复制',role:'copy',// accelerator:'ctrl+c',ctrl+c定义复制和系统快捷键冲突，所以无效,可以使用role定义click:()=>{console.log('复制')}},{type:'separator' //分割符},{label:'放大',role:'zoomin',// accelerator:'ctrl+c',ctrl+c定义复制和系统快捷键冲突，所以无效,可以使用role定义click:()=>{console.log('放大')}}]}
]
const menuBuilder=Menu.buildFromTemplate(menuTemplate);
Menu.setApplicationMenu(menuBuilder)

渲染进程监听模块

const {ipcRenderer}=require('electron')
window.onload=()=>{// 4.2 监听主进程主动menus.js发送的消息ipcRenderer.on('renderMsg',(e,data)=>{console.log(data)})
}

electron主进程和渲染进程的通讯相关推荐

electron 主进程与渲染进程通讯
主进程和渲染器进程 Electron 有两种进程:主进程和渲染进程. 主进程通过创建 BrowserWindow 实例来创建网页. 每一个 BrowserWindow 实例在其渲染过程中运行网页, ...
electron 主进程向渲染进程发送事件，渲染进程监听事件
主进程执行: //主进程向渲染进程发送消息win.webContents.send('ping', 'whoooooooh!') 渲染进程监听: <script>let ipcRender ...
Electron中通过ipcMain和ipcRender实现主进程和渲染进程之间的相互通信
场景用HTML和CSS和JS构建跨平台桌面应用程序的开源库Electron的介绍以及搭建HelloWorld: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/a ...
Electron主进程和渲染进程之间通信
Electron发送和接收数据用到的是 ipcMain 和 ipcRenderer 两个对象: ipcMain 是用在主进程中的: ipcRenderer 是用在渲染进程中的. 主进程用win.web ...
Electron：主进程、渲染进程以及通信
文章目录应用进程主进程渲染进程进程通信渲染进程访问主进程主进程访问渲染进程应用进程 Electron应用程序区分主进程和渲染进程. 主进程之前我们创建的引用中,electron.js中 ...
electron 主进程和渲染进程的通信
主进程给渲染进程发送消息,得用到ipcMain和ipcRenderer,流程和vue的父子通信很像 1,渲染进程给主进程通信(异步) html里面定义一个按钮,并加载渲染进程 <button i ...
第八节 Electron主进程和渲染进程之间的通信
系列文章目录第一节 electron 介绍第二节创建electron项目并启动第三节 Electron运行流程 . 主进程渲染进程并使用nodejs 第四节 Electron 调用H5事件结合 ...
Electron 主进程和渲染进程互相通信
对于渲染进程之间的通信,可见另一篇总结:Electron 渲染进程之间的通信_王俊的博客-CSDN博客_electron渲染进程之间通信下面总结一下主进程和渲染进程之间的通信. 说明: 自主到从 ...
Electron 主进程、渲染进程及进程间的通信
简介 Electron是由GIthub开发,用HTML.CSS.JS来构建跨平台桌面应用程序的一个开源库.Electron将Chromium和Nodejs合并到同一个运行时环境中,并将其打包为Mac. ...

electron主进程和渲染进程的通讯

渲染进程ipcRenderer.js

主进程ipcMain.js

主进程中主动向渲染进程广播消息

electron主进程和渲染进程的通讯相关推荐

最新文章

热门文章