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)
})
相关推荐
今天也想MK代码2 天前
在Swift开发中简化应用程序发布与权限管理的解决方案——SparkleEasy
前端·javascript·chrome·macos·electron·swiftui
yqcoder2 天前
electron 中 ipcRenderer 的常用方法有哪些?
前端·javascript·electron
yqcoder2 天前
electron 中 ipcRenderer 作用
前端·javascript·electron
伍嘉源3 天前
关于electron进程管理的一些认识
前端·javascript·electron
yqcoder3 天前
electron 设置最小窗口缩放
前端·javascript·electron
yqcoder5 天前
区分 electron 全屏和最大化
前端·javascript·electron
li.siyuan5 天前
electron + vue 打包完成后,运行提示 electrion-updater 不存在
前端·vue.js·electron
努力挣钱的小鑫6 天前
【客户端开发】electron 中无法使用 js-cookie 的问题
前端·javascript·electron
蓝胖子不是胖子6 天前
尝鲜electron --将已有vue/react项目转换为桌面应用
vue.js·react.js·electron
非晓为骁6 天前
windows 下 electron-builder ERR_ELECTRON_BUILDER_CANNOT_EXECUTE 报错处理
javascript·windows·electron