electron进程通信

electron进程通信

模式 1:渲染器进程到主进程(单向) send和on

1.渲染器进程调用方法

复制代码
@click = setTitle

2.预加载进程暴露setTile方法

复制代码
setTitle: (title) => ipcRenderer.send('set-title', title),

3.主进程监听到方法

复制代码
  ipcMain.on('set-title',()=>{

  })

模式 2:渲染器进程到主进程(双向)invoke和handle

场景:双向 IPC 的一个常见应用是从渲染器进程代码调用主进程模块并等待结果。invoke(恳求-希望得到回应)

例子:从渲染器进程打开一个原生的文件对话框,并返回所选文件的路径。

步骤:

1.渲染器进程:

复制代码
<button @click="getFilePath">获取文件路径</button>

  async function getFilePath(){

   filePath.value =await window.api.getFilePath()

}

2.预加载暴露getFilePath方法(invoke)

复制代码
getFilePath:()=>ipcRenderer.invoke('get-file-path')

3.主进程监听处理

复制代码
ipcMain.handle('get-file-path',showFilePath)
  async function showFilePath(){
  const { canceled, filePaths } = await dialog.showOpenDialog({})
  if (!canceled) {
    return filePaths[0]
  }else{
    return false
  }
  }

模式 3:主进程到渲染器进程 webContents.send ipcRenderer.on

1.主进程通过webContents发消息给渲染进程

复制代码
  const menu = Menu.buildFromTemplate([
    {
      label: app.name,
      submenu: [
        {
          click: () => mainWindow.webContents.send('update-counter', 1),
          label: 'Increment'
        },
        {
          click: () => mainWindow.webContents.send('update-counter', -1),
          label: 'Decrement'
        }
      ]
    }
  ])
  Menu.setApplicationMenu(menu)

2.预加载进程监听到,然后暴露给渲染进程

复制代码
 getMainValue:(callback)=>ipcRenderer.on('update-counter',(_event,value)=>callback(value))

3.渲染进程获取

复制代码
window.api.getMainValue((value)=>{
    count.value+=value
})

对于从主进程到渲染器进程的 IPC,没有与 ipcRenderer.invoke 等效的 API。 不过,您可以从 ipcRenderer.on 回调中将回复发送回主进程。即模式一

模式 4:渲染器进程到渲染器进程

没有直接的方法可以使用 ipcMainipcRenderer 模块在 Electron 中的渲染器进程之间发送消息。 为此,您有两种选择:

  • 将主进程作为渲染器之间的消息代理。 这需要将消息从一个渲染器发送到主进程,然后主进程将消息转发到另一个渲染器。
  • Pass a MessagePort from the main process to both renderers. 这将允许在初始设置后渲染器之间直接进行通信。
相关推荐
哆啦A梦15881 天前
商城后台管理系统 03 登录布局
javascript·vue.js·elementui
曼巴UE51 天前
UE FString, FName ,FText 三者转换,再次学习,官方文档理解
服务器·前端·javascript
selt7911 天前
Redisson之RedissonLock源码完全解析
android·java·javascript
行走的陀螺仪1 天前
高级前端 Input 公共组件设计方案(Vue3 + TypeScript)
前端·javascript·typescript·vue·组件设计方案
一颗不甘坠落的流星1 天前
【Antd】基于 Upload 组件,导入Json文件并转换为Json数据
前端·javascript·json
LYFlied1 天前
Vue2 与 Vue3 虚拟DOM更新原理深度解析
前端·javascript·vue.js·虚拟dom
Lucky_Turtle1 天前
【Node】npm install报错npm error Cannot read properties of null (reading ‘matches‘)
前端·npm·node.js
小飞侠在吗1 天前
vue shallowRef 与 shallowReacitive
前端·javascript·vue.js
惜分飞1 天前
sql server 事务日志备份异常恢复案例---惜分飞
前端·数据库·php