Electron主进程渲染进程如何优雅的进行通信

在传统electron使用过程中，我们会发现，主进程和渲染进程之间的通信会感到特别麻烦，不仅要书写很多冗余的代码，而且追溯数据传递时，更是一层一层的去查找，不仅工作量大，后期的维护更是难上加难

那么接下来我将介绍一个适用与electron环境和vite环境的第三方依赖

这个工具库需要项目具备electron和vite的开发环境

如同标题所述，那么怎么实现优雅的通信

首先我们先看传统的electron，怎么做到主进程和渲染进程之间的通信，我们先看渲染进程给主进程发消息（单向通信）

渲染进程某个ts文件

ts 复制代码

const test = () =>{
    window.electronAPI.setTitle('hello world')
}

主进程preload.js

ts 复制代码

const { contextBridge, ipcRenderer } = require('electron/renderer')

contextBridge.exposeInMainWorld('electronAPI', {
  setTitle: (title) => ipcRenderer.send('set-title', title)
})

主进程main.js

ts 复制代码

const { app, BrowserWindow, ipcMain } = require('electron')
const path = require('node:path')

// ...

function handleSetTitle (event, title) {
  const webContents = event.sender
  const win = BrowserWindow.fromWebContents(webContents)
  win.setTitle(title)
}

function createWindow () {
  const mainWindow = new BrowserWindow({
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })
  mainWindow.loadFile('index.html')
}

app.whenReady().then(() => {
  ipcMain.on('set-title', handleSetTitle)
  createWindow()
})
// ...

大家可以看到在渲染进程中，test方法要想将数据传递给主进程，要通过重重关卡，那这时候我们就有疑问了，preload.js 似乎可以省略掉

渲染进程直接将数据抛给main.js，不再通过预加载

那这也是我接下来所讲的，electron+vite，消息的直接传递，没有中间商，我们看展示

渲染进程某个ts文件

ts 复制代码

const test = () =>{
     window.electron.ipcRenderer.send('test', 'hello world')
}

主进程main.ts文件

ts 复制代码

  ipcMain.on('test', (e, data) => {
    console.log(data)
  })

这样一看，确实非常简洁，并且后期的维护，代码调试会非常方便

好了，分享到此结束，如果大家想要了解更多功能，推荐大家去官网查询