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. 这将允许在初始设置后渲染器之间直接进行通信。
相关推荐
全宝6 分钟前
🔢前端解决浮点数运算精度丢失的问题
前端·javascript
前端双越老师11 分钟前
学不动了?没事,前端娱乐圈也更新不动了
javascript·react.js·ai编程
江城开朗的豌豆12 分钟前
JavaScript篇:偷懒也有理!事件代理让我少写一半代码
前端·javascript·面试
云浪27 分钟前
掌握 CSS 倾斜函数
前端·css
ai产品老杨34 分钟前
实现自动化管理、智能控制、运行服务的智慧能源开源了。
前端·javascript·vue.js·前端框架·ecmascript
唐诗36 分钟前
优化 Nextjs 开发的个人博客首页,秒开!
前端·next.js
飞川撸码38 分钟前
web vue 项目 Docker化部署
前端·vue.js·docker·运维开发
默默无闻的白夜40 分钟前
【Vue】初学Vue(setup函数,数据响应式, 脚手架 )
前端·javascript·vue.js
萌萌哒草头将军1 小时前
⚡⚡⚡Rstack 家族即将迎来新成员 Rstest🚀🚀🚀
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Proxy:JavaScript中的'变形金刚',让你的对象为所欲为!
前端·javascript·面试