技术文档中心
首页
React
Vue
TypeScript
Kotlin
React Native
Electron
Android
首页
React
Vue
TypeScript
Kotlin
React Native
Electron
Android
  • 基础入门

    • Electron 学习指南
    • 窗口管理
    • 进程通信
    • 对话框
  • 进阶内容

    • 菜单和托盘
    • 打包发布
    • Electron 自动更新
  • 框架集成

    • React + Electron
    • Vue + Electron

进程通信

IPC 通信

渲染进程 → 主进程

单向通信

// preload.js
const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
  sendMessage: (message) => ipcRenderer.send('message', message)
});

// main.js
const { ipcMain } = require('electron');

ipcMain.on('message', (event, message) => {
  console.log('收到消息:', message);
});

// renderer.js
window.electronAPI.sendMessage('Hello');

双向通信

// preload.js
contextBridge.exposeInMainWorld('electronAPI', {
  invoke: (channel, data) => ipcRenderer.invoke(channel, data)
});

// main.js
ipcMain.handle('get-data', async (event, arg) => {
  return { result: 'success', data: arg };
});

// renderer.js
const result = await window.electronAPI.invoke('get-data', { id: 1 });
console.log(result);

主进程 → 渲染进程

// main.js
const { BrowserWindow } = require('electron');

const win = new BrowserWindow();

// 发送消息
win.webContents.send('update-data', { count: 10 });

// preload.js
contextBridge.exposeInMainWorld('electronAPI', {
  onUpdateData: (callback) => {
    ipcRenderer.on('update-data', (event, data) => callback(data));
  }
});

// renderer.js
window.electronAPI.onUpdateData((data) => {
  console.log('收到更新:', data);
});

渲染进程 ↔ 渲染进程

// 通过主进程中转
// renderer1.js
window.electronAPI.sendToOther('hello');

// main.js
ipcMain.on('send-to-other', (event, message) => {
  BrowserWindow.getAllWindows().forEach(win => {
    if (win.webContents !== event.sender) {
      win.webContents.send('message-from-other', message);
    }
  });
});

// renderer2.js
window.electronAPI.onMessageFromOther((message) => {
  console.log('收到消息:', message);
});

实战示例

文件操作

// preload.js
contextBridge.exposeInMainWorld('fileAPI', {
  readFile: (path) => ipcRenderer.invoke('read-file', path),
  writeFile: (path, content) => ipcRenderer.invoke('write-file', path, content)
});

// main.js
const fs = require('fs').promises;

ipcMain.handle('read-file', async (event, path) => {
  try {
    const content = await fs.readFile(path, 'utf-8');
    return { success: true, content };
  } catch (error) {
    return { success: false, error: error.message };
  }
});

ipcMain.handle('write-file', async (event, path, content) => {
  try {
    await fs.writeFile(path, content, 'utf-8');
    return { success: true };
  } catch (error) {
    return { success: false, error: error.message };
  }
});

// renderer.js
const result = await window.fileAPI.readFile('/path/to/file.txt');
if (result.success) {
  console.log(result.content);
}

数据库操作

// preload.js
contextBridge.exposeInMainWorld('dbAPI', {
  getUsers: () => ipcRenderer.invoke('db-get-users'),
  createUser: (user) => ipcRenderer.invoke('db-create-user', user)
});

// main.js
const sqlite3 = require('sqlite3');
const db = new sqlite3.Database('app.db');

ipcMain.handle('db-get-users', async () => {
  return new Promise((resolve, reject) => {
    db.all('SELECT * FROM users', (err, rows) => {
      if (err) reject(err);
      else resolve(rows);
    });
  });
});

ipcMain.handle('db-create-user', async (event, user) => {
  return new Promise((resolve, reject) => {
    db.run('INSERT INTO users (name, email) VALUES (?, ?)', 
      [user.name, user.email], 
      function(err) {
        if (err) reject(err);
        else resolve({ id: this.lastID });
      }
    );
  });
});

系统通知

// preload.js
contextBridge.exposeInMainWorld('notificationAPI', {
  show: (title, body) => ipcRenderer.send('show-notification', title, body)
});

// main.js
const { Notification } = require('electron');

ipcMain.on('show-notification', (event, title, body) => {
  new Notification({ title, body }).show();
});

// renderer.js
window.notificationAPI.show('提示', '操作成功');
最近更新: 2026/2/6 15:39
Contributors: hailong
Prev
窗口管理
Next
对话框