- 综合排序
- 最热优先
- 最新优先
- 来自专栏编程技术总结分享
Electron入门教程3 ——进程通信
✧ 渲染进程向主进程的单向通信 在Electron中，进程通过开发人员定义的“通道”与ipcMain模块和ipcRenderer模块进行通信。 要从渲染进程向主进程发送单向IPC消息，可以再预渲染脚本preload.js里使用ipcRenderer发送API发送消息，然后在main.js里用ipcMain.on接收。 ipcMain.on('set-title', (event, title) => { const webContents = event.sender const win 这可以通过使用ipcRenderer.invoke来实现，调用ipcMain.handle配对。在下面的例子中，我们将从渲染进程中打开一个选择本地文件对话框，并返回所选文件的路径。 在应用准备好之后，里面调用ipcMain.handle()来监听渲染进程里的ipcRenderer.invoke('openFileDialog')里定义的openFileDialog。
1.8K40编辑于 2022-11-22 - 来自专栏码客
Electron中remote模块的替代方案
remote //现在的写法 const {BrowserWindow} = require("@electron/remote") 实例 main.js const { app,BrowserWindow,ipcMain } = require("electron") ipcMain.on("downloadfile", (event, arg) => { console.log(arg); // prints } = require('electron') ipcMain.on('synchronous-message', (event, arg) => { console.log(arg) // prints "ping" event.returnValue = 'pong' }) 主进程=>渲染进程 在主进程中 const { ipcMain } = require('electron') let tokenValue = ipcRenderer.sendSync('getGlobalValue', 'token') console.log(tokenValue) 在主进程中 const { ipcMain
4.6K31编辑于 2023-09-14 - 来自专栏IMWeb前端团队
Electron 进程通信
利用 ipcMain 和 ipcRenderer 模块 官方文档 上有使用这两个模块进行进程通信的例子： // In main process. const {ipcMain} = require('electron') ipcMain.on('asynchronous-message', (event, arg) => { console.log ipcMain 和 ipcRenderer The ipcMain module is an instance of the EventEmitter class. 我们通过 ipcMain和ipcRenderer 的 on、send 进行监听和发送消息都是 EventEmitter 定义的相关接口。 那么 ipcMain 和 ipcRenderer 是如何实现这些接口的呢？
1.9K10发布于 2019-12-03 - 来自专栏小鑫同学编程历险记
Electron 进程通信（IPC）装饰器应用
IPC 通信 API 渲染进程到主进程通信涉及到的 API 如下： 渲染进程到主进程 发送 接收 单向 ipcRenderer.send ipcMain.on 双向 ipcRenderer.invoke ipcMain.handle 在终端执行下面的命令创建一个新的 Electron + Vite 项目： npm create @quick-start/electron@latest # 选择 TypeScript 注册处理函数的事件监听： app.whenReady().then(() => { ipcMain.on('set-title', handleSetTitle) }) 暴露 API： 在 src canceled) { return filePaths[0] } } 注册事件监听： 调用 ipcMain.on 注册处理函数的事件监听： app.whenReady().then(() => { ipcMain.handle('dialog:openFile', handleFileOpen) }) 暴露 API： 在 src/preload/index.ts 中暴露 API 到渲染进程
66210编辑于 2024-04-29 - 来自专栏前端开发随笔
Electron渲染进程与主进程进行通信
ipcMain 渲染进程 const { ipcRenderer } = require('electron') ipcRenderer.send('login') //发送 login 主进程 import { ipcMain } from 'electron' ipcMain.on('login', (event, arg) => { console.log(123) } 更多ipcMain操作，参考文档地址
87220编辑于 2021-12-13 - 来自专栏liulun
自己实现一个Electron跨进程消息组件（新书自荐）
具体的细节请参与我之前写的文章： https://www.cnblogs.com/liulun/p/15217180.html Electron团队把remote模块拿掉之后，开发者就只能使用ipcRenderer，ipcMain ) { ipcMain.handle('__eventPipe', (e: Electron.IpcMainInvokeEvent, { eventName, eventArgs, broadcast 是否存在来判断当前进程是渲染进程还是主进程； 如果是渲染进程则用ipcRenderer监听一个名为__eventPipe的消息；如果是主进程我们则通过ipcMain监听一个名为__eventPipe的消息 : any) { this.instance.emit(eventName, eventArgs) if (ipcMain) { webContents.getAllWebContents : any) { if (ipcMain) { if (typeof wcIdOrWc == 'number') { webContents.getAllWebContents(
1.5K21编辑于 2021-12-23 - 来自专栏前端公虾米
Electron快速入门，聊聊跨进程通信那些事儿
Electron 中通过提供ipcMain、ipcRenderer来作为主进程、渲染进程之间的通信桥梁。 从接口定义中不难推断出其管道IPC是通过继承 EventEmitter 来实现IpcMain、IpcRenderer，并拓展了其他工具类方法。 百度 const { ipcMain, shell } = require('electron'); ipcMain.on , shell } = require('electron'); const win = new BrowserWindow({ //... ... }) ipcMain.on('open-url' '); const win = new BrowserWindow({ //... ... }) ipcMain.on('open-url', (event, url) => { // ...
2.6K20发布于 2021-11-01 - 来自专栏QQ音乐技术团队的专栏
electron 构建跨平台桌面应用
主进程与渲染进程之间的通信通过 IPC(进程间通信)模块完成，IPC模块可划分为 ipcMain 和 ipcRenderer 两个部分，其中 ipcMain 对应 主进程中的 IPC模块，而 ipcRenderer 则是在渲染进程中使用，下面直接看个例子: main.js： // 引入 ipcMain 模块 const ipcMain = require('electron').ipcMain; // 监听 ‘blabla ’ 通道，收到消息后输出，并向 'blibli' 通道发送消息 ipcMain.on('blabla', function(event, arg) { console.log(arg); ipcRenderer.send('badge-changed', ''); } }) } } main.js: const electron = require('electron'); const ipcMain = electron.ipcMain; const app = electron.app exports.init = function() { // 监听角标通道消息 ipcMain.on
4.1K110发布于 2018-01-31 - 来自专栏友儿
electron 进程间通信
在主进程中，可以使用 ipcMain 模块监听事件，通过 ipcMain.on() 方法注册事件处理程序，接收渲染进程发送的消息，并通过 event.sender.send() 方法向渲染进程发送回复。 渲染进程和主进程双向通信 这可以通过 ipcRenderer.invoke 与 ipcMain.handle 搭配使用来完成双向通信。 ipcMain.handle() 方法可以为指定频道注册处理函数，这个处理函数可以接收请求的参数并执行相应的操作，然后返回一个结果给渲染进程。 // main.js const { app, BrowserWindow, ipcMain } = require('electron') const path = require('path'); ipcMain.handle('fromSon', function (event, arg1) { console.log(arg1); return '您的问候已收到
1K10编辑于 2024-03-27 - 来自专栏翩翩白衣少年
基于ElectronEgg&Python，从零开始打造一款免费的PDF桌面工具
1、在主线程中通过 ipcMain.on 监听事件 index.ts 主进程中加载脚本，设置事件监听 import { app, dialog, ipcMain, shell } from 'electron openLocalPath = async (path:string) => { shell.openPath(path); }; app.whenReady().then(() => { ipcMain.on click', () => { window.electronAPI.openLocalPath(path) }) 例：打开文件夹获取里面的文件 渲染器进程到主进程（双向） 1、在主线程中通过 ipcMain.handle canceled) { return filePaths[0] } }; ipcMain.handle(IPC_EVENT.EVENT_DIALOG_OPENFILE autoUpdater.autoDownload = false; autoUpdater.autoInstallOnAppQuit = false; // 主进程监听检查更新事件 ipcMain.on
1.5K11编辑于 2023-12-12 - 来自专栏测试人生
作为测试仔，为了颜值，也开始去写门面程序了！
/add.js') </script> </body> </html> 接着再来修改main.js代码，使用ipcMain来接收渲染进程发起的点击事件，示例代码如下： const { app, BrowserWindow ,ipcMain } = require('electron') const createWindow = () => { const win = new BrowserWindow({ /renderer/index.html') ipcMain.on("add-music-window",()=>{ const childWin = new BrowserWindow
60340编辑于 2022-12-05 - 来自专栏liulun
electron窗口间通信
url: dom.src }); 主进程收到消息后，再发消息给窗口B的渲染进程 import { app, BrowserWindow, ipcMain , Menu } from 'electron' ipcMain.on('imgUploadMain', (event, message) => { mainWindow.webContents.send
2K40发布于 2019-07-02 - 来自专栏剪映小助手
【开源剪映小助手】IPC 通信机制
代码解释graphTBsubgraph"主进程"M["main.js
创建BrowserWindow
注册IPC处理程序"]H["nodeapi/ipcHandlers.js
注册ipcMain.handle IPC处理程序注册：在主进程中集中注册ipcMain.handle，将渲染进程的invoke请求路由到具体实现。下载与系统调用：封装文件下载、目录选择、URL可达性检测、历史记录与日志持久化。 主进程IPC注册与处理作用：集中注册ipcMain.handle，将渲染进程的请求路由到具体实现，并负责错误日志与用户交互。关键处理程序：get-download-log：读取下载日志。 依赖关系分析主进程依赖：Electron：BrowserWindow、ipcMain、dialog、shell、app。axios：HTTP请求与流式下载。log4js：日志输出。 自定义IPC处理程序开发指南步骤一：在主进程注册处理程序在ipcHandlers.js中添加ipcMain.handle('your-channel',async(event,payload)=>{..10910编辑于 2026-03-21 - 来自专栏JavaScript高阶应用
初识 Electron
window.addEventListener('DOMContentLoaded', () => { ipcRenderer.send('message', 'hi from renderer') }) 主进程通过 ipcMain.on 的事件名称，需要跟传递方事件名一致，第二个参数为回调函数，该函数参数为事件对象 event 和事件内容 ...args // main.js const { app, BrowserWindow, ipcMain webPreferences: { nodeIntegration: true } }) mainWindow.loadFile('index.html') ipcMain.on 运行结果] 主进程在接收到渲染进程传递的信息后，可通过 event.sender.send() 方法进行消息传递，而渲染进程则通过 ipcRenderer.on() 方法进行接收 // main.js ipcMain.on
1.9K82发布于 2020-06-16 - 来自专栏NetCore 从壹开始
（2/3）Electron知识学习 · 基础篇
列举一些日常需要使用的例子 主题颜色切换 main.js //主题颜色切换处理 ipcMain.handle('dark-mode:toggle', () = { if (nativeTheme.shouldUseDarkColors else { nativeTheme.themeSource = 'dark' } return nativeTheme.shouldUseDarkColors }) ipcMain.handle 进程间通信 当我们主程序需要改变一些状态等操作时 这时候我们的渲染进程是不能直接操作主进程的 我们这时候就需要通过暴露主进程的接口进行操作 这里我们演示设置标题 首先我们写一个设置方法的 我们需要加载ipcMain =>{ regEvent() }).then(() = { createWindow() }).then(()=>{ showNotification() }).then(()=>{ ipcMain.on ('set-title', handleSetTitle) }).then(()=>{ ipcMain.on('create-win', handleCreateWin) }) index.html
1.3K10编辑于 2023-01-09 - 来自专栏码客
Electron启程
ipcMain 从主进程到渲染进程的异步通信。 Menu 创建原生应用菜单和上下文菜单。 MenuItem 添加菜单项到应用程序菜单和上下文菜单中。 进程间通讯 渲染进程=>主进程=>渲染进程 1）异步 在主进程中 const { ipcMain } = require('electron') ipcMain.on('asynchronous-message console.log(arg) // prints "pong" }) ipcRenderer.send('asynchronous-message', 'ping') 2）同步 在主进程中 const { ipcMain } = require('electron') ipcMain.on('synchronous-message', (event, arg) => { console.log(arg) // prints script> 关于页面跳转 的问题 在接收到命令后创建下一个窗口（创建窗口需要时间，期间可能出现空白）： //在main.js中：： const ipc = require('electron').ipcMain
6.1K30发布于 2019-10-21 Electron 与鸿蒙 DevEco Studio 的融合实战：从 WebView 到安全 IPC 架构迁移指南
Electron 构建你的第一个桌面应用 一、原始 Electron 项目结构与代码详解 1. main.js —— 主进程：应用的“大脑” const { app, BrowserWindow, ipcMain electron'); const path = require('path'); 引入 Electron 核心模块： app：控制应用生命周期； BrowserWindow：创建和管理窗口； ipcMain ipcMain.handle('read-file', async (event, filePath) => { const fs = require('fs').promises; try { 安全设计： 使用 ipcMain.handle（而非 on）支持异步返回值； 在主进程中调用 fs，避免渲染进程直接访问文件系统； 错误通过 throw 抛出，可在渲染端 catch。 ipcMain.handle('get-app-version', () => { return app.getVersion(); }); 获取应用版本号，数据来源于 package.json 中的
35710编辑于 2025-12-21- 来自专栏liulun
electron开发客户端注意事项
siteId:'cnblogs', url: url }); 主进程接收消息后中转给主窗口渲染进程的代码 import { app, BrowserWindow,ipcMain } from 'electron' ipcMain.on('articleRefreshMain', (event, message) => { mainWindow.webContents.send electron-vue获取app版本号的hack代码 本来electron获取app版本号很简单，只要如下即可（以下代码运行在main进程中） import { app, BrowserWindow,ipcMain
2.4K40发布于 2019-05-25 - 来自专栏小鑫同学编程历险记
客户端开发（Electron）URL远程启动
addEventListener("click", () => { shell.open(); }); 注：桥接函数会绑定到window对象上 第三步：主进程中监听shell:open事件 主进程做监听： ipcMain.on mainWindow.restore(); mainWindow.focus(); } } }); 完整main代码： const { app, BrowserWindow, ipcMain == "darwin") app.quit(); }); ipcMain.on("shell:open", () => { const pagePath = path.join("file://"
2.2K30编辑于 2022-12-26 - 来自专栏编程技术总结分享
Electron入门教程4 —— 切换应用的主题
prefers-color-scheme: light) { body { background: #ddd; color: black; } } main.js const { app, BrowserWindow, ipcMain preload: path.join(__dirname, 'preload.js') } }) win.loadFile('index.html') ipcMain.handle nativeTheme.themeSource = 'dark' } return nativeTheme.shouldUseDarkColors }) ipcMain.handle
1.3K40编辑于 2022-11-22
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号