Electron桌面端开发(进程间通信)

最新推荐文章于 2024-05-22 11:27:56 发布

碰磕

最新推荐文章于 2024-05-22 11:27:56 发布

阅读量1k

点赞数 1

分类专栏： Electron 文章标签： electron javascript 前端

本文链接：https://blog.csdn.net/m_xiaozhilei/article/details/125174974

版权

Electron 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Electron中的进程间通信

进程间通信
- 目的

进程间通信

🚀🚀首发:CSDN碰磕，分享自己的学习日志

☀☀☀晴

✊✊学无止境

📅2022/6/7

目的

通知事件
数据传输
共享数据

IPC模块通信

由主进程的的ipcMain和渲染进程的ipcRenderer进行通信

他们俩都是EventEmitter对象

🐟从渲染进程到主进程

📚写法

Callback写法

ipcRenderer.send(channel,…args)
ipcMain.on(channel,handler)

🚀示例

不要忘记初始化项目 npm init -y

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    进程间通信
</body>
<script src="./renderer.js"></script>
</html>

主进程

/**
 * 主进程
 */
 const {app,BrowserWindow,Notification, ipcMain} =require('electron')

 let win
 app.on('ready',()=>{
     win=new BrowserWindow({
         width:500,
         height:500,
         webPreferences:{
             nodeIntegration:true
         }
     })
     win.loadFile('index.html')
     handeIPC()
 })
 function handeIPC(){
     ipcMain.on('msg',(e,b,c)=>{
         console.log("hello world",b,c)//响应请求
     })
 }

渲染进程

/**
 * 渲染层
 */
const {ipcRenderer} =require("electron")
ipcRenderer.send('msg',1,2,3)//发送请求

除了第一个参数，剩下的就是传来的参数了~ on的第一个参数与send的第一个参数需保持一致

Promise写法

Electron7.0后,处理请求+响应模式

ipcRenderer.invoke(channel,…args)
ipcMain.handle(channel,handler)

🚀示例

顺便把Notifcation一起用上~

首页不变

主进程:

const {app,BrowserWindow,Notification,ipcMain}= require('electron')
let win
app.on("ready",()=>{
    win=new BrowserWindow({
        width:300,
        height:300,
        webPreferences:{
            nodeIntegration:true,
            contextIsolation: false
        }
    })
    win.loadFile('./index.html')
    handleIPC()
})
function handleIPC(){
    ipcMain.handle("work-notifcation",async function(a,b,c){
        console.log("hello world",b,c)//响应请求
    })
}

渲染进程

const {ipcRenderer}=require("electron")
let res=await ipcRenderer.invoke('work-notifcation',1,2)//发起请求

🐟从主进程到渲染进程

📚写法

ipcRenderer.on(channel,handler)
webContents.send(channel)

🚀示例

主要代码

//主进程
//win为窗口
//win.wenContents为获取窗口内容,.send()进行发送请求
win.wenContents.send('msg')

//渲染进程（记得引入ipcMain模块）
ipcMain.on('msg',()=>{
	alert('接收到数据')         
})

🐟从渲染进程到渲染进程

🦈通知事件

通过主进程转发(在5.0版本之前)
ipcRenderer.sendTo(在5.0版本之后)

🦈数据共享

使用web技术,像localStorage本地存储等等…
使用remote（不推荐）

🚀示例

//win表示窗口
//获取这个页面对应的webContents.id并放入到全局对象当中
global.shareObject={
    winId:win.webContents.id
}

//渲染进程1(记得引入ipcRenderer与remote)
let sharedObject=remote.getGlobal('shareObject')
let winId=sharedObject.winId
ipcRenderer.sendTo(winId,'msg',1)

//渲染进程2
ipcRenderer.on('msg',(a,b)=>{
	alert("拿到数据",b)
})

这样就学会了Electron中进程通信了~

碰磕

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Electron桌面端开发(进程间通信)

主进程渲染进程除了第一个参数，剩下的就是传来的参数了~ on的第一个参数与send的第一个参数需保持一致首页不变主进程:渲染进程🐟从主进程到渲染进程📚写法🚀示例主要代码🐟从渲染进程到渲染进程🦈通知事件🦈数据共享🚀示例这样就学会了Electron中进程通信了~...
复制链接

扫一扫