因为主进程和渲染进程在Electron的进程模型中有不同的职责，IPC是执行许多常见任务的唯一方式，比如从UI调用本地API或从本地菜单触发web内容的更改。下面就来详细介绍3种常见的通信方式。...✧ 渲染进程向主进程的单向通信 在Electron中，进程通过开发人员定义的“通道”与ipcMain模块和ipcRenderer模块进行通信。...你通常使用这个模式从你的web内容中调用一个主进程API。我们将通过创建一个简单的应用程序来演示这种模式，该应用程序可以通过编程方式更改窗口的标题。...在应用准备好之后，里面调用ipcMain.handle()来监听渲染进程里的ipcRenderer.invoke('openFileDialog')里定义的openFileDialog。...要做到这一点，你可以使用主进程作为渲染程序之间的消息代理。这将涉及到从一个渲染器向主进程发送消息，主进程将把消息转发给另一个渲染器，这里就不做演示了。
用大白话来说就是：我们可以在主进程创建窗口的时候，指定一些脚本(内容是我们定的)，这些脚本将来是在渲染进程中使用的，但是先于网页内容加载，由于是在主进程的时候就预加载了，所以能使用NodeJS API。...由于渲染进程中默认无法使用NodeJS API，也就无法使用 require 导入模块，所以我们需要将 ipcRenderer 模块的相关内容在预处理脚本中暴露，才能在渲染进程中使用。...，向主进程发送数据 elecAPI.sendToFather('来自渲染进程的问候') } 上面的代码中...渲染进程和主进程双向通信 这可以通过 ipcRenderer.invoke 与 ipcMain.handle 搭配使用来完成双向通信。...WebContents，用使用它的send方法向渲染进程发送数据 win.webContents.send('toSon', '来自主进程的问候') }, 5000) }) //
我们知道开发Electron应用，难免要涉及到跨进程通信，以前Electron内置了remote模块，极大的简化了跨进程通信的开发工作，但这也带来了很多问题，具体的细节请参与我之前写的文章： https...://www.cnblogs.com/liulun/p/15217180.html Electron团队把remote模块拿掉之后，开发者就只能使用ipcRenderer，ipcMain，webContents..., ipcMain, webContents } = require('electron') 我们假定这个组件的类名为Eventer，我们在这个类的构造函数中，实例化了一个EventEmitter对象，...默认情况下EventEmitter实例最多可为任何单个事件注册10个监听器，如果你嫌这个数量太少，可以通过setMaxListeners方法把这个数字设置大一些，设置为Infinity就没有任何数量限制了...、ipcMain是否存在来判断当前进程是渲染进程还是主进程； 如果是渲染进程则用ipcRenderer监听一个名为__eventPipe的消息；如果是主进程我们则通过ipcMain监听一个名为__eventPipe
要监听自定义的事件还是通过 ipcMain 和 ipcRenderer。 渲染进程的监听事件回调函数中，也可以通过 event.sender 来向主进程发送消息。...我们通过 ipcMain和ipcRenderer 的 on、send 进行监听和发送消息都是 EventEmitter 定义的相关接口。...那么 ipcMain 和 ipcRenderer 是如何实现这些接口的呢？...module.exports = ipcRenderer 调用了 atomBinding('ipc') 得到的 binding 对象的 send 方法。能力有限，就分析到这。...渲染进程再对传输过来的内容进行反序列化。 remote 远程对象 通过 remote 对象，我们可以不必发送进程间消息来进行通信。
子窗口的渲染进程给主窗口的渲染进程发消息比较麻烦 子窗口要先把消息发送给主进程，再由主进程中转给主窗口 const { ipcRenderer} = require('electron'); ipcRenderer.send...，那么我应该在目录中也删除这个图片 这就需要监控文章编辑器的图片变化 我用的是H5的MutationObserver对象，理论上，用这个东西可以监控任何DOM的变化 var editorDocument...因为我用的electron-vue，他又两种模式，生产模式和开发模式 在生产模式下没任何问题 在开发模式下，它其实是起了一个webserver，让electron加载一个localhost的地址 这样做主要是为了使用...在处理文章提交到知乎的过程中 发现知乎用了一个特殊的编辑器， （一个基于reactjs的编辑器，github上有开源的，忘记地址了） 怎么搞都搞不定，他甚至不支持设置HTML的内容 最后用了electron...的操作剪切板的能力才搞定的 先把文章内容放到剪贴板，再focus知乎的编辑器，再执行黏贴事件 代码如下： const { clipboard, ipcRenderer, remote
NW.js 的作者以及各位读者反馈表示感谢，期待更多深入的交流和分享，修订后的版本如下： Stack Overflow 联合创始人 Jeff Wood 曾说过，任何一个能用 JavaScript 编写的应用系统...main.js: 负责创建应用窗口，并赋予其与当前操作系统的原生GUI交互的功能。 index.html: 定义了页面的渲染内容，即 “Hello World” 字符串。...主进程与渲染进程之间的通信通过 IPC(进程间通信)模块完成，IPC模块可划分为 ipcMain 和 ipcRenderer 两个部分，其中 ipcMain 对应 主进程中的 IPC模块，而 ipcRenderer...则是在渲染进程中使用，下面直接看个例子: main.js： // 引入 ipcMain 模块 const ipcMain = require('electron').ipcMain; // 监听 ‘blabla...参考资料： Electron 官方文档 http://electron.atom.io/ 从 node-webkit 到 Electron 1.0 http://cheng.guru/blog/2016
IPC 通信 API 渲染进程到主进程通信涉及到的 API 如下： 渲染进程到主进程 发送 接收 单向 ipcRenderer.send ipcMain.on 双向 ipcRenderer.invoke...注册处理函数的事件监听： 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 到渲染进程...PropertyDescriptor) => { log('target', target) log('descriptor', descriptor) } } 收集装饰器元数据： 上面定义的装饰器还没有任何的作用
实际上，Electron 继承了来自 Chromium 的多进程架构，作为前端工程师，对于浏览器进程架构有所了解，也是非常有必要的。 4.1....，以避免泄漏任何具特权的 API 到网页内容代码中。...在 Electron 中，主线程和渲染进程之间进行通信，只要是用到以下两个模块： ipcMain ：ipcMain 是一个 EventEmitter 的实例。...ipcRenderer ：ipcRenderer 是一个 EventEmitter 的实例。你可以使用它提供的一些方法从渲染进程 (web 页面) 发送同步或异步的消息到主进程。...ipcMain 和 ipcRenderer 模块还有一些其他的通信 API，不过大抵都是类似的通信方式，需要了解的同学可以自行去查阅文档。 6.
例：通过系统的默认应用打开浏览PDF文件 渲染器进程到主进程（单向） 单向通信只是渲染进程发消息到主进程，不需要主进程的返回信息。...1、在主线程中通过 ipcMain.on 监听事件 index.ts 主进程中加载脚本，设置事件监听 import { app, dialog, ipcMain, shell } from 'electron...，您可以使用 ipcRenderer.send API。...} 例：主进程的错误信息发送给渲染进程，通过界面显示出来 主进程到渲染器进程 将消息从主进程发送到渲染器进程时，消息需要通过其 WebContents 实例发送到渲染器进程。...如果您对Python编程技巧、好玩实用的开源项目、行业新知趣事和各类技术干货等充满兴趣，那么不要错过未来我为大家奉上的精彩内容！点击关注，让您的探索学习之旅更加丰富多彩，我们一同成长，一同前行！
写在前面 最近一直在做批量测试工具的开发，打包的exe，程序运行也是一个黑乎乎的dos窗口。 个人感觉真的丑死了，总感觉没个界面，体验不好，所以就想尝试写桌面应用程序。... 添加歌曲到曲库 添加音乐到曲库 您还未选择任何音乐文件.../add.js') 接着再来修改main.js代码，使用ipcMain来接收渲染进程发起的点击事件，示例代码如下： const { app, BrowserWindow.../renderer/index.html') ipcMain.on("add-music-window",()=>{ const childWin = new BrowserWindow
BrowserWindow 创建和控制浏览器窗口,相当于Android中的Activity。 contentTracing 从Chromium的内容模块收集跟踪数据，以查找性能瓶颈和缓慢的操作。...inAppPurchase Mac App Store中的应用内购买。 ipcMain 从主进程到渲染进程的异步通信。 Menu 创建原生应用菜单和上下文菜单。...Renderer Process 模块 desktopCapturer 从桌面上捕获音频和视频的媒体源信息。 ipcRenderer 从渲染器进程到主进程的异步通信。.../ prints "pong" }) ipcRenderer.send('asynchronous-message', 'ping') 2）同步 在主进程中 const { ipcMain } = require...(ipcRenderer.sendSync('synchronous-message', 'ping')) // prints "pong" 主进程=>渲染进程 在主进程中 const { ipcMain
因为Electron封装的跨进程通信对象ipcMain和ipcRenderer都是基于nodejs环境的api，而出于安全性考虑，通常需要在生产环境中关闭渲染进程的node权限（设置窗口的nodeIntegration...BrowserWindow和主进程的通信主进程和窗体之间通信几乎是所有业务的刚需，Electron官方提供了基于IpcMain和IpcRenderer的封装，鉴于官方文档已经描述得非常清晰，此处不再罗列代码...和宿主窗口通信因为选中的对象具有send方法，等同于ipcRenderer.send，使用它可以直接从宿主窗口抛送事件到webview内部，在内部需要通过ipcRenderer.on...子业务代码加载之前，我们就可以建立好和主进程之间的通道，并且把子业务需要调用的接口，封装成类似于jsApi的形式，暴露到渲染上下文，而无需入侵子业务的任何代码，还可以考虑不同子业务的公共接口复用，从架构来说比...接下来我们实现一个通用的注册事件，在app启动之后就执行绑定，后续任何子业务被创建，都会触发注册流程。
，而不会影响到其他的进程。...渲染进程通过 ipcRenderer.send() 方法进行消息传递，第一个参数为 string 的事件名称，第二个参数为事件内容，可为任意格式 // renderer.js const { ipcRenderer...', 'hi from renderer') }) 主进程通过 ipcMain.on() 方法进行接收，第一个参数同样为 string 的事件名称，需要跟传递方事件名一致，第二个参数为回调函数，该函数参数为事件对象...event 和事件内容 ...args // main.js const { app, BrowserWindow, ipcMain } = require('electron') app.on('...() 方法进行消息传递，而渲染进程则通过 ipcRenderer.on() 方法进行接收 // main.js ipcMain.on('message', (event, arg) => { console.log
，所以本篇博客会从electron 的api 到 electron +vue 组合式开发到 打包 及开发过程中遇见的问题分门别类的进行说明， 当然在最后的文末我会将我写的 electron + vue全家桶的...流程之间的通信可以通过进程间通信模块进行： ipcMain 和 ipcRenderer 接下来分别说一下渲染进程和主进程 /* 个人认为electron的难点的主要就是 主进程和渲染进程之间的通信...第 18 行：您添加了一个新的侦听器，当应用程序不再有任何打开窗口时试图退出。 因为操作系统 窗口管理行为 ，此监听器在 macOS 上是一个禁门。...// 在main 文件夹下的 index.js 中 //引入 let ipcMain = require('electron').ipcMain; // 通过命令进行判断 //接收最小化命令 ipcMain.on...//let whiteListedModules = ['vue'] //将这行修改为下面的的内容 let whiteListedModules = ['vue', 'element-ui']
Electron 中通过提供ipcMain、ipcRenderer来作为主进程、渲染进程之间的通信桥梁。...从接口定义中不难推断出其管道IPC是通过继承 EventEmitter 来实现IpcMain、IpcRenderer，并拓展了其他工具类方法。...主进程TO渲染进程 渲染进程是由主进程控制的，通过创建的渲染进程的窗口win.webContents对象，可以轻易地访问渲染进程相关内容。 这里官网的相关事例说明相对完善，可以自行查看。...当然，需要发送消息给到的目标窗口是打开的状态，否则可就接受不到了。 到此，三种场景的进程通信介绍完毕了。...Electron 的GUI应用开发之中，当然如果你执着于 jQuery，也是可以引用开发的，只是不建议而已，这就涉及到 Electron 性能相关了，这里不再展开。
如果您想要手动在亮/暗模式之间切换，您可以通过在nativeTheme模块的themeSource属性中设置所需的模式来做到这一点。此属性的值将传播到您的渲染进程。...任何与prefers-color-scheme相关的CSS规则都将相应地更新。 先上代码，之后再分析： index.html preload.js const { contextBridge, ipcRenderer } = require('electron...') contextBridge.exposeInMainWorld('darkMode', { toggle: () => ipcRenderer.invoke('dark-mode:toggle...'), system: () => ipcRenderer.invoke('dark-mode:system') }) index.js document.getElementById('toggle
这就涉及到进程间的通信了，具体来说是渲染进程到主进程的通信。 渲染进程到主进程通信 进程间通信需要用到预加载脚本。...页面打开后，页面需要获取文件的数据，作为初始数据渲染到画布，这个需要渲染进程给主进程发信息，并且能接收数据，还是渲染进程到主进程的通信，只不过是双向的。...渲染进程到主进程通信（双向） 同样是使用ipcRenderer对象，只不过不是使用send和on方法，而是使用invoke和handle方法。...('getFileContent', id) } // background.js // 获取文件内容 ipcMain.handle('getFileContent', (event, id) => {...item }) } 当然，这个操作只是更新了客户端的存储，还需要通知页面更新才行，这就涉及到主进程到渲染进程的通信了。
后者提供浏览器环境，渲染页面 进程间通信支持程度比较好，有同步和异步两种方式，通过事件消息来通信 异步通信（event.sender.send()）： // In main process. const {ipcMain...} = require('electron') ipcMain.on('asynchronous-message', (event, arg) => { console.log(arg) // prints..."pong" }) ipcRenderer.send('asynchronous-message', 'ping') 同步通信（event.returnValue）： // In main process.... const {ipcMain} = require('electron') ipcMain.on('synchronous-message', (event, arg) => { console.log...，但没有勾选，可能需要制定应用路径，待深入了解 写在最后 实际上，对系统级API的依赖比想象的少太多了，学习成本大多来自前端生态（React全家桶），完全合心意的组件库是不存在的 东西呢，还不成样子，下周继续
但是绝对没有任何浏览器会拦截_blank这种。 在electron的webview中， 对于_blank是默认拦截的，不会自动打开。...渲染进程 const ipcRenderer = window.require('electron').ipcRenderer onload = () => {...//mainWindow.webContents.openDevTools() } const ipcMain = require('electron').ipcMain let new_win; ipcMain.on...').ipcMain let new_win; ipcMain.on('open_url',(event, arg)=> { new_win = new BrowserWindow({ width...new_window); } 打包 添加依赖 npm install electron-builder@22.9.1 --save-dev 在pakage.json中，我们build的配置下面内容
嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发...} = require("electron"); contextBridge.exposeInMainWorld("darkMode", { toggle: () => ipcRenderer.invoke...("dark-mode:toggle"), system: () => ipcRenderer.invoke("dark-mode:system"), }); 在renderer.js脚本实际操作DOM...： 我们需要在出进程中监听对应的事件来最终切换主题的来源 // 主进程相应HTML上的点击事件 ipcMain.handle("dark-mode:toggle", () => { if (...nativeTheme.themeSource = "dark"; } return nativeTheme.shouldUseDarkColors; }); ipcMain.handle
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
