Technology Sharing

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Rendering process to main process (one-way)

send (render sends) on (main listens)

// 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(); // 创建窗口
})
1
2
3
4
5
6
7
8
9
10
11
12
13

// 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)
})
1
2
3
4
5
6
7

// 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)
})
1
2
3
4
5
6
7
8
9

Rendering process to main process (bidirectional)

invoke (render sends) handle (main listens)

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(); // 创建窗口
})
1
2
3
4
5
6
7
8
9
10

// 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')
})
1
2
3
4
5
6
7

// 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
})
1
2
3
4
5
6
7
8
9

Main process to rendering process (one-way, can simulate two-way)

send on

// 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()
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

// 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)
})
1
2
3
4
5
6
7
8

// 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)
})
1
2
3
4
5
6
7