JavaScript桌面应用_Electron主进程与渲染进程通信-js教程-PHP中文网

JavaScript桌面应用_Electron主进程与渲染进程通信

夢幻星辰

发布： 2025-11-21 21:30:09

原创

286人浏览过

主进程负责原生操作，渲染进程展示页面，两者通过ipcMain和ipcRenderer实现双向通信。

javascript桌面应用_electron主进程与渲染进程通信

Electron 应用由主进程和渲染进程组成，两者分工明确：主进程管理窗口、菜单、系统事件等原生操作，渲染进程负责展示页面内容。由于它们运行在不同环境中，通信必须通过特定机制完成。

主进程与渲染进程的基本职责

主进程基于 Node.js 环境，可调用操作系统底层功能，如打开文件对话框、创建窗口。每个 Electron 应用只有一个主进程。渲染进程是每个窗口中的网页运行环境，类似浏览器标签页，默认不支持 Node.js（可通过配置开启）。

两者不能直接访问对方变量或函数，必须借助 Electron 提供的通信模块。

使用 ipcMain 和 ipcRenderer 进行通信

Electron 提供 ipcMain（主进程）和 ipcRenderer（渲染进程）模块实现双向通信。常用方法包括发送消息和监听响应。

立即学习“Java免费学习笔记（深入）”；

Symanto Text Insights

基于心理语言学分析的数据分析和用户洞察

查看详情

渲染进程向主进程发送消息： 使用 ipcRenderer.send() 发送同步或异步消息，主进程用 ipcMain.on() 监听
主进程向渲染进程回复或推送消息： 通过 event.reply() 回复，或使用 webContents.send() 主动发送

示例：点击渲染进程按钮请求打开文件

// 渲染进程（renderer.js）
const { ipcRenderer } = require('electron')
document.getElementById('openFile').addEventListener('click', () => {
  ipcRenderer.send('open-file-dialog')
})

ipcRenderer.on('file-selected', (event, filePath) => {
  console.log('选中文件:', filePath)
})

// 主进程（main.js）
const { ipcMain } = require('electron')
ipcMain.on('open-file-dialog', (event) => {
  // 打开文件选择框逻辑...
  event.reply('file-selected', '/path/to/file.txt')
})