Electron 进程间通信

文章目录

渲染进程到主进程(单向)

send (render 发送)on (main 监听)

js 复制代码
// main.js 主要代码

// electron/main includes types for all main process modules.
const { app, ipcMain } =  require("electron/main")
app.whenReady().then(()=>{
	// 需要在 HTML 文件加载之前监听,保证从渲染器调用之前处理程序能够准备就绪。
	ipcMain.on('set-title', (event, title) => {
	    const webContents = event.sender
	    const win = BrowserWindow.fromWebContents(webContents)
	    win.setTitle(title)
	})
	createWindow(); // 创建窗口
})
js 复制代码
// preload.js 

// electron/renderer includes types for all renderer process modules.
const { contextBridge, ipcRenderer } = require("electron/renderer")
contextBridge.exposeInMainWorld("electronAPI", ()=>{
	setTitle: (title) => ipcRenderer.send('set-title',title)
})
js 复制代码
// renderer.js

// 插入html中的js, 运行于渲染程序中
const setButton = document.getElementById('btn')
const titleInput = document.getElementById('title')
setButton.addEventListener('click', () => {
    const title = titleInput.value
    window.electronAPI.setTitle(title)
})

渲染进程到主进程(双向)

invoke(render 发送)handle(main 监听)

js 复制代码
const { app, ipcMain, dialog } =  require("electron/main")
app.whenReady().then(()=>{
	// 需要在 HTML 文件加载之前监听,保证从渲染器调用之前处理程序能够准备就绪。
	// IPC 通道名称上的 dialog: 前缀对代码没有影响。 它仅用作命名空间以帮助提高代码的可读性。
	ipcMain.handle('dialog:openFile', async () => {
	    const { canceled, filePaths } = await dialog.showOpenDialog()
	    if(!canceled) return filePaths[0]
	})
	createWindow(); // 创建窗口
})
js 复制代码
// preload.js 

// electron/renderer includes types for all renderer process modules.
const { contextBridge, ipcRenderer } = require("electron/renderer")
contextBridge.exposeInMainWorld("electronAPI", ()=>{
	openFile: () => ipcRenderer.invoke('dialog:openFile')
})
js 复制代码
// renderer.js

// 插入html中的js, 运行于渲染程序中
const setButton = document.getElementById('btn')
const filePath= document.getElementById('filePath')
setButton.addEventListener('click', async () => {
    const path= await window.electronAPI.openFile()
    filePath.innerText= path
})

主进程到渲染进程 (单向,可模拟双向)

send on

js 复制代码
// main.js

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

function createWindow () {
  const mainWindow = new BrowserWindow({
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })
  const menu = Menu.buildFromTemplate([
    {
      label: app.name,
      submenu: [
        {
          // 使用 webContents.send API 将 IPC 消息从主进程发送到目标渲染器。
          // 其使用方式与 ipcRenderer.send 相同。
          click: () => mainWindow.webContents.send('update-counter', 1),
          label: 'Increment'
        },
        {
          click: () => mainWindow.webContents.send('update-counter', -1),
          label: 'Decrement'
        }
      ]
    }
  ])

  Menu.setApplicationMenu(menu)
  mainWindow.loadFile('index.html')
}

app.whenReady().then(() => {
  // 模拟双向通信,接收渲染进程发送的数据,"update-counter" 触发
  ipcMain.on('counter-value', (_event, value) => {
    console.log(value) 
  })
  createWindow()
})
js 复制代码
// preload.js

const { contextBridge, ipcRenderer } = require("electron/renderer")
contextBridge.exposeInMainWorld("electronAPI", {
	onUpdateCounter: (callback) => 
		ipcRenderer.on("update-counter", (event,value) => callback(value)),
	sendCount: (value) => ipcRender.send('counter-value', value)
})
js 复制代码
// render.js
const count = document.getElementById("count")
window.electronAPI.onUpdateCounter((value)=>{
	const newValue = Number(count.innerText) + value;
	count.innerText = newValue.toString();
	window.electronAPI.sendCount(newValue)
})
相关推荐
Lei_zhen962 小时前
记录一次electron-builder报错ENOENT: no such file or directory, rename xxxx的问题
前端·javascript·electron
辣条小哥哥2 小时前
electron主进程和渲染进程之间的通信
javascript·electron·ecmascript
咖喱鱼蛋2 小时前
Electron一些概念理解
前端·javascript·electron
sun lover1 天前
electron快速上手
javascript·electron
Jornici3 天前
搭建vue-electron项目
前端·vue.js·electron
横冲直撞de4 天前
electron客户端预览doc、docx、excel、pdf、ppt、csv、txt等文件类型
electron·pdf·excel
我也有在努力4 天前
解决Electron拖拽窗口点击事件失效问题
前端·javascript·vue.js·typescript·electron·vue
怕冷的火焰(~杰)5 天前
Electron: 主进程和渲染进程之间通信
electron
怕冷的火焰(~杰)5 天前
自定义菜单栏实现点击添加按钮打开渲染进程的Dialog.vue模态框
electron
A黄俊辉A7 天前
electron安装遇到的问题
前端·javascript·electron