Electron+vue如何向h5通信

最新推荐文章于 2024-10-09 16:28:07 发布
最新推荐文章于 2024-10-09 16:28:07 发布
阅读量618 收藏 7
点赞数 13
文章标签： vue.js electron 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_69012364/article/details/136258290
版权
该篇文章详细描述了如何在Vue项目中通过Electron的webContentsAPI实现实时与H5页面的消息交互，着重于事件监听和消息传递部分。
摘要由CSDN通过智能技术生成

1.话不多说，先看代码

~~Vue

首先在入口文件background.js 里引入BrowserWindow方法

我们使用了 webContents.on  (其中 will-navigate 解释 我放在了以下链接中)接收h5发来的信息

webContents | Electron (electronjs.org) 

接着使用 win.webContents.send 向我们的组件页面 发送 信息

随后 在我们需要用到的地方接收

这样就可以拿到h5 给我们发来的消息了，并处理相应的逻辑

~~H5

   window.location.href='111' 向electron 发送消息

文章结尾

作品制作不易，点个赞再走哦~~~

03.electron-(调用H5 API)
做技术，坚持才是最重要的，一时的热情只是暂时的进步
04-03 788
文件拖拽，读取文件内容 main.js const { app, BrowserWindow } = require("electron"); const path = require("path"); const createWindow = () => { const mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences:{
electron收银系统客屏显示实现串口通信serialport使用和调试
weixin_45758420的博客
12-06 2326
electron收银系统客屏显示实现串口通信serialport，编译出现报错相应解决和串口写入的调试
使用Web前端技术开发桌面应用---Electron中嵌入网页和打开子窗口
CreatorRay的博客
02-23 3955
码字不易，有帮助的同学希望能关注一下我的微信公众号：Code程序人生，感谢！代码自用自取。 上期内容我们学了如何在浏览器中打开网页，这节我们学习一下如何用BrowserView来嵌入一个网页到我们应用中，这很类似Web中的<iframe>标签。需要注意的是BrowserView是主进程中的类，所以只能在主进程中使用。 在主线程中用BrowserView嵌入网页 打开根目录下打开main.js,直接引入并使用BrowserView就可以实现键入网页到应用中。 var BrowserVie.
Vue(h5)与App(android,ios)端交互详解
u012941592的博客
07-23 6386
最近开发vue与app交互，总结了一下开发心得。我是一名Android开发者，vue开发这块也稍有涉足，在android或者IOS中展示h5可以减少工作量，也能满足用户体验性。本篇主要讲述vue的交互。
在vue中使用electron怎么进行通信
pikaqiu420的博客
02-23 706
在项目中遇到一个需求,需要在electron打开的h5页面中触发事件,返回到electron应用主进程中,进行路由跳转,安装官网中的进程间通信方式实现起来发现监听不到主进程的事件,后来发现是因为事件发送方是子进程,而不是主进程,所以没有监听到,正确示例如下。在底层的vue页面的合适阶段进行监听,如果只需要监听一次可以使用once方法。vue项目的main.js文件中,添加electron属性。在vue的electron的预加载文件中代码是这样的。
electron+VUE Browserwindow与webview通信
immotal_xiaoqiang的博客
03-29 1651
如果能看到webview控制台里面的命令：window.electronAPI 说明已经通信成功了，后面就可以自己实现自己的逻辑了。1，porelaod注入的路径需要以file:///开头的绝对路径，如果不能保证 可以直接在vue中如下写法来进行测试。例如：file:///C:/porelaod/webPreload.js。webview.openDevTools()打开webview的控制台。其中preloadPath需要以file:///开头的绝对路径。// 在webview中注入脚本。
Electron vue 进程间消息通行
solocao的专栏
04-25 511
在 Electron 应用中，IPC（Inter-Process Communication，进程间通信）是一种允许主进程（main process）和渲染进程（renderer process）之间交换数据的方式。ipcRenderer.send 在渲染进程中调用， ipcMain 的事件监听器在主进程中设置。
Electron工作流程（2）——进程间通信
MarinaTsang的博客
08-01 1695
游戏启动下载器之 Electron 入门
VUE3学习 第八章 Vue如何开发移动端、unocss原子化、函数式编程-h函数、Vue开发桌面程序Electron、Vue响应性语法糖、docker 碰撞 vue3、环境变量
m0_55170432的博客
11-14 1060
学习
基于Vue3、Vite3、TypeScript等技术的全栈互动虚拟人视频应用设计源码
10-03
该项目是一款基于Vue3、Vite3、TypeScript等前沿技术的全栈互动虚拟人视频应用设计源码，总计包含455个文件，涵盖126个Vue组件、91张PNG图像、84个TypeScript脚本等。该应用通过集成Pinia、Vant、Windi CSS等技术栈...
java后端带七端(h5+android+ios)多语言IM源码带视频教程
06-04
- **Web**：与H5类似，但可能有更复杂的前端框架如React或Vue.js，提供更丰富的用户体验。 - **小程序**：微信小程序或支付宝小程序，需要熟悉各自的开发工具和API。 3. **多语言支持**：系统应能处理多种语言...
electron的webview和内嵌网页如何通信
yezi__6的博客
04-11 3230
由于我使用的是react框架的ref来引用webview组件的，因此需要通过这个引用来获取 webview 的 webContents，进而使用 executeJavaScript 方法。● 与页面交互：你可以使用 executeJavaScript 来注入和执行自定义脚本，从而与网页中的 DOM 进行交互，修改网页内容，或者触发在网页中定义的 JavaScript 函数。webContents 对象提供的一个功能，允许开发者在 web 页面的上下文中运行任意的 JavaScript 代码字符串。
electron原生和<webview>的通信交互
前进者
10-31 9661
目录 1、缘由 2. 标签介绍 3、代码实现： 4、注意事项 1、缘由 开发electron项目的时候，因为每次更改新功能都要重新打包，还要做热更新的操作， 借鉴原生App和h5，（H5要调起原生的拍照功能，发一个信号给原生，原生接到信号唤醒摄像头，成功或者失败发个回调给H5）发现<webview>标签可以实现， 2. <webview>标签介绍 使...
(Electron)H5 Windows桌面
最新发布
qq_38535146的博客
10-09 392
4.更改package.json文件。2.进入项目，安装所需组件。3.更改index.js。
electron打包你的h5应用成桌面应用
debug
06-02 1090
使用 JavaScript，HTML 和 CSS 构建跨平台的桌面应用程序。
解决Electron的BrowserView模块不显示的问题
三巧的博客
12-15 1813
BrowserView不显示
electron之旅(一) 使用html
yasinawolaopo的博客
03-28 1363
基础使用electron
electron实现主进程和渲染进程之间的通信
爱吃雪糕的小布丁的博客
01-25 2621
对于桌面端程序来说，进程之间的通信是非常关键和重要的，今天给大家带来electron框架中，如何实现主进程和渲染进程之间的通信。这里要事先说明，因为在渲染进程中不能使用node的模块，所以得先在预设js中暴露接口，然后才能在渲染进程中使用。大家可能会觉得这和vue的组件之间通信很类似，但是就是多了一个预设js的步骤，会十分的繁琐，后面会教大家一种不用预设js的方法！！喜欢的话，记得三连哦！！
手把手教你 Electron + Vue 搭建前端桌面应用
Sanzhutech的博客
07-12 3738
一、在使用 Electron 之前我们要了解 Electron 是什么？ Electron 官网地址 点此 : electron 官方地址 Electron 相当于一个浏览器的外壳 , 我们将 编写的 HTML , CSS , Javascript 网页程序 嵌入进 Electron 里面 以便于在桌面上进行运行。 通俗来讲它就是一个软件 ， 如 QQ 、网易云音乐、优酷视频 等等。功能至强大 超乎你的想象 二、开发环境的准备 安装 Node.js 坏境 Node.js 官网地址 点此 node
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值