electron webcontents - 腾讯云开发者社区

文章/答案/技术大牛

发布

鸿蒙 PC 使用 Electron 打印服务实现详解

鸿蒙 PC 使用 Electron 打印服务实现详解问题背景在鸿蒙平台上开发 Electron 应用时，需要实现打印功能。...：优先使用浏览器原生 API：window.print() - 在鸿蒙平台上更可靠降级到 Electron API：webContents.print() - 作为备选方案 IPC 通信：通过 Electron...的打印 API if (window.webContents && typeofwindow.webContents.print === 'function') { window.webContents.print...原因分析： Electron 的 webContents.print() API 在鸿蒙平台上可能不稳定 IPC 通信可能存在问题打印权限可能未正确配置解决方案：添加详细的调试日志： function...() 导出 PDF 打印预览：实现自定义打印预览功能批量打印：支持批量打印多个页面打印模板：实现可配置的打印模板系统参考资料 Electron 官方文档 - webContents.print()

1331 0

Electron中remote模块的替代方案

有如下几种解决方法：使用@electron/remote模块替代使用IPC传递数据使用@electron/remote模块替代安装 npm install --save @electron/remote...const remote = require("@electron/remote/main") remote.initialize() //... remote.enable(mainWindow.webContents...require("@electron/remote") 实例 main.js const { app,BrowserWindow,ipcMain,shell} = require("electron")...() rtmpWindow.webContents.on('did-finish-load', () => { //下面的这行代码要在上面的BrowserWindow加载完成之后调用 rtmpWindow.webContents.send...('distributeIds',{ win2Id : win2.id }); win2.webContents.send('distributeIds',{ win1Id : win1

3.6K3 1

您找到你想要的搜索结果了吗？

是的

没有找到

自己实现一个Electron跨进程消息组件（新书自荐）

我们知道开发Electron应用，难免要涉及到跨进程通信，以前Electron内置了remote模块，极大的简化了跨进程通信的开发工作，但这也带来了很多问题，具体的细节请参与我之前写的文章： https...://www.cnblogs.com/liulun/p/15217180.html Electron团队把remote模块拿掉之后，开发者就只能使用ipcRenderer，ipcMain，webContents..., ipcMain, webContents } = require('electron') 我们假定这个组件的类名为Eventer，我们在这个类的构造函数中，实例化了一个EventEmitter对象，...这里我们通过e.sender.id来判断消息是从哪个渲染进程发来的，当转发这个消息给其他webContents时，要排除掉那个发来消息的webContents。...对象，如果当前进程是主进程，则找到WebContents对象，并调用它的send方法发送消息；如果当前进程是渲染进程，则使用ipcRenderer的sendTo方法发送给目标WebContents对象。

1.4K2 1

Electron入门教程3 ——进程通信

欢迎来到Electron入门教程的第三期教程，这一节非常重要！进程间通信(IPC)是在Electron中构建功能丰富的桌面应用程序的关键部分。...ipcMain.on('set-title', (event, title) => { const webContents = event.sender const win...= BrowserWindow.fromWebContents(webContents) win.setTitle(title) }) 每当消息通过set-title通道传入时...这是在Electron 7之前通过IPC进行异步双向通信的推荐方式。...消息需要通过主进程的WebContents实例发送到渲染进程。这个WebContents实例包含一个sent方法，可以像ipcReender .send那样使用它。

1.6K4 0

Electron 调试指南

Electron 调试指南本文档详细介绍 Electron 应用的调试方法，包括渲染进程调试、主进程调试、以及各种调试技巧和最佳实践。...() - 打开开发者工具可以添加参数控制 DevTools 的位置和模式： // 在右侧打开（默认） mainWindow.webContents.openDevTools(); // 在底部打开...mainWindow.webContents.openDevTools({ mode: 'bottom' }); // 分离窗口 mainWindow.webContents.openDevTools...('did-finish-load', () => { mainWindow.webContents.debugger.attach('1.1'); mainWindow.webContents.debugger.on...- Electron 调试工具包 npm install --save-dev electron-debug 使用： require('electron-debug')({ showDevTools

1111 0

Electron 应用奔溃问题排查与解决方法

相关 Bug 地址：https://github.com/electron/electron/issues/155381.2 设备访问权限Mac 下未做摄像头、麦克风授权，直接访问时，可能导致 Electron...2.2.1 开启 Electron Crash Reporter开起后，可以收集 Electron 应用的奔溃堆栈，Electron Crash Reporter 支持将奔溃堆栈上传到在线的第三方服务平台...主进程窗口加载完页面后，增加如下代码：mainWindow.webContents.on('did-finish-load', function(event){ mainWindow.webContents.send...console.warn('app:gpu-process-crashed', event, kill);});app.on('renderer-process-crashed', (event, webContents...', (event, webContents, details) => { console.warn('app:render-process-gone', event, webContents, details

11.5K2 0

Electron 进程通信

上面说了渲染进程如何向主进程发送消息，但主进程也可以主动向渲染进程发送消息在主进程中，我们会创建一个 BrowserWindow 对象，这个对象有 webContents 属性。...当然 webContents 对象远不止这两个通信方法，具体可以看 webContents 下面是官方文档提供的使用 webContents 实现通信的例子： // In the main process...('did-finish-load', () => { win.webContents.send('ping', 'whoooooooh!')...}) 注意，webContents.on 监听的是已经定义好的事件，如上面的 did-finish-load。...因此，event.sender 发送的消息在主进程中还是需要通过 ipcMain.on 方法来监听，而不是通过 webContents.on 方法。 2.

1.8K1 0

Electron快速入门，聊聊跨进程通信那些事儿

') // 渲染进程打开开发者工具 remote.getCurrentWindow().webContents.openDevTools() 结论：通过 remote 模块，我们可以方便的访问主进程的模块...主进程TO渲染进程渲染进程是由主进程控制的，通过创建的渲染进程的窗口win.webContents对象，可以轻易地访问渲染进程相关内容。这里官网的相关事例说明相对完善，可以自行查看。...每个窗口 webContents.getProcessId() 或者 webContents.id 即可获得对应窗口的id。...伪代码如下： // win1窗口发送消息 ipcRenderer.sendTo(win2.webContents.id, 'send-msg', params1, params2) // win2...// 监听右键菜单触发 win.webContents.on('context-menu', (event, params) => { const selectEnabled = !!

2.4K2 0

electron开发客户端注意事项

窗口间通信的问题 electron窗口通信比nwjs要麻烦的多 electron分主进程和渲染进程，渲染进程又分主窗口的渲染进程和子窗口的渲染进程主窗口的渲染进程给子窗口的渲染进程发消息 subWin.webContents.on...('dom-ready', () => { subWin.webContents.send('message', { title: self....' ipcMain.on('articleRefreshMain', (event, message) => { mainWindow.webContents.send('contentRefreshRenderer...（就是electron的版本号）。...因为我用的electron-vue，他又两种模式，生产模式和开发模式在生产模式下没任何问题在开发模式下，它其实是起了一个webserver，让electron加载一个localhost的地址这样做主要是为了使用

2.4K4 0

Electron加载插件支持Flash

不显示菜单栏 const electron = require('electron') /*获取electron窗体的菜单栏*/ const Menu = electron.Menu /*隐藏electron...//mainWindow.webContents.openDevTools() } const ipcMain = require('electron').ipcMain let new_win; ipcMain.on...所以我们就要在主进程中做如下操作最外层 BrowserWindow 的 webContents 上监听 did-attach-webview 事件，获取新挂上去的的 webContents...｡使用获取到的 webContents 监听 will-navigate事件。...//mainWindow.webContents.openDevTools() addListener(mainWindow); } const ipcMain = require('electron

4.5K4 0

Electron webview完全指南

一.webview标签 Electron提供了webview标签，用来嵌入Web页面： Display external web content in an isolated frame and process...实际上，这个问题与Electron关系不大，与Chromium有关 Chromium在设计上分为六个概念层： ?...as devtools P.S.当然，Electron的webContents与Chromium的webContents确实有紧密联系，但二者从概念上和实现上都是完全不同的，Chromium的webContents...明显是负责干活的，而Electron的webContents只是个EventEmitter，一方面把内部状态暴露出去（事件），另一方面提供接口允许从外部影响内部状态和行为（方法） Frame 除了webContents...十.Demo地址 GitHub仓库：ayqy/electron-webview-quick-start 一个简单的单tab浏览器，本文中提到的所有内容在Demo中都有涉及，注释详尽参考资料 Electron

8.3K3 1

Electron启程

webContents 渲染以及控制 web 页面。 Renderer Process 模块 desktopCapturer 从桌面上捕获音频和视频的媒体源信息。...() rtmpWindow.webContents.on('did-finish-load', () => { //下面的这行代码要在上面的BrowserWindow加载完成之后调用 rtmpWindow.webContents.send...', 'ping') // 在主进程中 ipcMain.on('ping-event', (event, arg) => { yourWindow.webContents.send('pong-event...').remote.getGlobal('winIds').win1Id 第二种是：主进程创建事件，发送信息(不推荐) // 主进程中 win1.webContents.send('distributeIds...',{ win2Id : win2.id }); win2.webContents.send('distributeIds',{ win1Id : win1.id }); 页面数据共享

6K3 0

electron 模块BrowserWindow

const { app, BrowserWindow } = require('electron') app.on('ready', () => { // 创建一个宽800高600的窗口...const { app, BrowserWindow } = require('electron') app.on('ready', () => { // 创建一个窗口 const win...您可以根据 Electron 的文档详细了解每个事件的用法和触发时机。...webContents 返回窗口的 WebContents 对象，它提供了对窗口中加载的网页内容的控制和交互。 close() 关闭窗口。 destroy() 销毁窗口及其关联的资源。...webContents 属性当我们在 Electron 中创建一个窗口时，窗口中的网页内容由 WebContents 对象表示。

1.1K1 0

Electron各版本API变更及版本升级报错汇总

It is replaced by the @electron/remote module. // Deprecated in Electron 12: const { app, dialog } =...window.require('electron').remote 替换方式安装依赖 npm install --save @electron/remote 主进程 // In the main process...: require('@electron/remote/main').initialize() //创建每一个窗口后，都要调用 require("@electron/remote/main").enable...(win.webContents); 渲染进程 // Replace with: const { app, dialog } = window.require('@electron/remote');...} = require('electron') remote.webContents.fromId(webview.getWebContentsId()) 错误汇总 require 引用时报错 const

2K2 0

开发笔记：基于Electon的图片采集工具

技术架构： Electron＋Nodejs 1 实现思路： 1.1 监听webview事件，注入js代码利用electron的webContents，监听需要获取图片的网页，当网页加载完成，促发‘dom-ready...主要用了这个api： webContents.executeJavaScript(code[,userGesture,callback]) 如： win.webContents.on('dom-ready...', () => { win.webContents.executeJavaScript(code[,userGesture,callback]) })； 1.2 遍历HTML中的图片URL 这里要注意...往webview中注入的代码可以通过return返回，也可以通过在注入代码中写入： electron.remote.getGlobal(‘webWin').webContents.send('autoChat...的加密由于electron打包后的程序都是直接暴露源代码的，就在resources文件夹里的app文件夹。

1.4K12 0

electron 自动更新以及手动更新

从搭建开始使用的是electron-vue 毕竟方便一点如果只想安装electron 请参见我的另一个文章 https://segmentfault.com/a/11......首先安装Electron: vue init simulatedgreg/electron-vue project1 cd project1 npm install //第一次安装的伙伴需要访问外国网站...安装的时候安装了 vue electron vue-router 不安装 vuex 打包选择的是: electron-builder 下次有时间再扯electron-packager...' // 注意这个autoUpdater不是electron中的autoUpdater import {autoUpdater} from "electron-updater" /** * Set...更新下载进度事件 autoUpdater.on('download-progress', function (progressObj) { mainWindow.webContents.send

2.9K6 0

electron 配置使用NodeJS API

从Electron 9中开始，官方已经计划移除 remote 模块，并且在Electron 14完成移除，引起目前我们默认情况下已经不能再使用该模块。...如果非要使用的话，可以手动安装该模块，步骤如下：安装 @electron/remote模块 npm i @electron/remote 在主进程中初始化@electron/remote/main app.on...(win.webContents) }) 在渲染进程中使用它 electron >= 14.0.0，您必须使用新的enableAPI 为每个需要的WebContents单独启用远程模块：require("@electron/remote/main")....enable(webContents).

8741 0

electron 运行 dist 文件

本文，我们来讲讲如何通过 electron 运行打包文件。...我们将其放在新建 electron 项目根目录下，以备后用。新建 electron 项目我们根据创建您的第一个 electron 应用程序就可以很轻松的创建 electron 应用。...{ label: '返回', click: () => { if (mainWindow && mainWindow.webContents.canGoBack...()) { mainWindow.webContents.goBack(); } } }, {...{ label: '控制台', click: () => { BrowserWindow.getFocusedWindow().webContents.openDevTools

1.1K2 0

electron开发技术知识点笔记

if(BrowserWindow.getAllWindows().length === 0) { createWindow(); }});webContents 事件// 控制右键操作wc.on...editMenu'}]);// 控制右键操作 wc.on('context-menu', (e, params) => { // 显示 });程序崩溃处理 const wc = mainWindow.webContents...download>Download Image// 下载资源session.defaultSession.on('will-download', (e, downloadItem, webContents...) .then(() => { console.log('cookie1 set'); getCookies(); }); mainWindow.webContents.on...electron.powerMonitor.on('resume', e => { if(!

1.6K5 0

electron实现qq快捷登录!

..... 2: 授权之后是否成功很难去判断不过脑海中有一个想法就是,electron就是一个类似于浏览器一样,既然是浏览器那肯定可以阻止链接的点击也可以判断状态! 就去啃文档了!!!...$electron.ipcRenderer.on('reply', (e, data) => { console.log(data) let...$electron.ipcRenderer.send('qqLogin', {url: result.data.data}); }...当使用 api(如 webContents.loadURL 和 webContents.back) 以编程方式来启动导航的时候，这个事件将不会发出....主进程代码: import {ipcMain, BrowserWindow, shell} from 'electron' ipcMain.on('qqLogin', (event, data) =>

4.8K4 0

点击加载更多

鸿蒙 PC 使用 Electron 打印服务实现详解

Electron中remote模块的替代方案

自己实现一个Electron跨进程消息组件（新书自荐）

Electron入门教程3 ——进程通信

Electron 调试指南

Electron 应用奔溃问题排查与解决方法

Electron 进程通信

Electron快速入门，聊聊跨进程通信那些事儿

electron开发客户端注意事项

Electron加载插件支持Flash

Electron webview完全指南

Electron启程

electron 模块BrowserWindow

Electron各版本API变更及版本升级报错汇总

开发笔记：基于Electon的图片采集工具

electron 自动更新以及手动更新

electron 配置使用NodeJS API

electron 运行 dist 文件

electron开发技术知识点笔记

electron实现qq快捷登录!

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐