Electron 初体验

Electron

npm create @quick-start/electron

脚手架初始化项目

渲染进程和主进程通讯

• 渲染进程向主进程（单向

// preload
ipcRenderer.send('set-title', title)

// main
ipcMain.on('set-title', (event, title) => {
    const webContents = event.sender
    const win = BrowserWindow.fromWebContents(webContents)!
    win.setTitle(title)
    })

• 渲染进程向主进程（双向）

// preload
ipcRenderer.invoke('dialog:openFile', option)

// main
ipcMain.handle('dialog:openFile', handleFileOpen)

• 主线程到渲染线程

// main
mainWindow.webContents.send('update-counter', 1)


// tsx

ipcRenderer.on('update-counter', (_event, value) => {})

ipcMain.on 和 ipcMain.handle

• ipcMain.on 主要用于监听渲染进程发送的异步消息，它不会返回响应给渲染进程，通常用于执行一些不需要返回结果的操作，比如记录日志、触发系统通知等。

• ipcMain.handle 用于处理渲染进程发送的同步或异步请求，并返回响应给渲染进程。通常用于需要获取处理结果的场景，比如查询数据库、调用外部 API 等。

ipcRenderer.sendSync 不建议使用，会阻塞ui

渲染进程像主进程发送消息，并且同步等待响应

渲染器进程到渲染器进程

• 方案一： 主进程作为中转，渲染进程先发送消息给主进程，主进程再把消息转发给目标渲染进程

• 方案二： 直接使用渲染进程的 webContents 对象通信，需要暴漏 WebContents 对象给渲染进程，存在一定的安全风险

• 方案三： 使用MessageChanel,实现两个指定窗口之间的通信