uniapp webview子页面向父页面发送数据和触发事件,重点在第3条!!!
1、众所周知H5中iframe可以用过postmessage进行,从H5子页面向H5父页面进行通信。方法如下:
// 子页面
window.parent.postMessage({ data: '你的消息' }, '*');// 父页面
<iframe src="xxxxxxxxxxx"></iframe>
window.addEventListener('message', function(event) {console.log('收到父页面的消息:', event.data);
});
以上方法也适用在uniapp webview 子页面向父页面进行通信。
页面卸载是记得将事件removeEventListener。
2、 在uniapp微信小程序webview中,H5子页面向微信小程序父页面进行通信。方法如下:
// 首先需要引入jssdk
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>// 子页面
window.parent.postMessage({ data: '你的消息' }, '*');
// 但在以上特定时机才会触发组件的message事件:小程序后退、组件销毁、分享、复制链接
// 这时候可以通过上面jssdk注册的方法进行触发
// 注意:如果父页面是H5页面,并且注册了window.addEventListener('message')方法。
// 那么执行以下方法,该addEventListener方法还会再触发一次。
// 其他返回方法不会触发addEventListener!!!!!!!!
wx.miniProgram.navigateBack();// 父页面
<web-view src="xxxxxxxxxxx" @message="onMessage"></web-view>
onMessage(e) {console.log('收到父页面的消息:', e);
}
3、在第2种情况下,有个特殊情况很坑!!!!!,因为注册的wx方法会冲突。
在uniapp微信小程序webview中,uniapp H5子页面向微信小程序父页面进行通信。
如果还是用第2种方法。wx.miniProgram将会是undefined,因为uniapp定义的wx将覆盖jssdk注册的wx方法。
这时通过再引入一个uni-webview.js文件得以解决,
下载链接:https://download.csdn.net/download/guoqu1919/88864022?utm_source=bbsseo
整体代码如下:
// 首先需要引入jssdk和js文件
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script src="uni-webview.js"></script>// 子页面(其实与第2种逻辑相同,只不过换了方法)
uniWebView.webView.postMessage({data: {}})
uniWebView.webView.navigateBack();// 父页面
<web-view src="xxxxxxxxxxx" @message="onMessage"></web-view>
onMessage(e) {console.log('收到父页面的消息:', e);
}
这个方法使用于H5子页面向微信小程序webview父页面通信,也就是适用于第2种和第3种情况。
相关文章:
uniapp webview子页面向父页面发送数据和触发事件,重点在第3条!!!
1、众所周知H5中iframe可以用过postmessage进行,从H5子页面向H5父页面进行通信。方法如下: // 子页面 window.parent.postMessage({ data: 你的消息 }, *);// 父页面 <iframe src"xxxxxxxxxxx"></iframe> window.addEventListene…...
【STM32实物】基于STM32+ESP32+手机APP设计的智能宠物喂食系统实物源码原理图PCB设计文档演示视频——(文末工程资料下载)
基于STM32+ESP32+手机APP设计的智能宠物喂食系统 演示视频 基于STM32+ESP32+手机APP设计的智能宠物喂食系统 摘 要 近年来,宠物在人们生活中越来越不可或缺,给人们带来的陪伴和快乐。然而,由于种种原因,主人不能时刻照顾宠物的饮食,所以宠物喂食装置变得尤为重要。传…...
EMC学习笔记5——辐射骚扰发射
辐射骚扰发射是基本的实验项目,目的是检验设备在工作时有没有产生意外的过强电磁辐射。 例如发电机,在工作时会产生意外的电磁波辐射,因为电子设备中隐藏了一些天线,这些隐藏的天线在辐射电磁波。 一、两种基本的天线结构 如前面…...
深入理解浏览器解析机制和XSS向量编码
基础部分 1.<a href"%6a%61%76%61%73%63%72%69%70%74:%61%6c%65%72%74%28%31%29">aaa</a> <a>标签可以识别,但是解析不了, 是在协议的编码顺序上,先认协议 URL 编码 "javascript:alert(1)" 2.<a …...
winform 大头针实现方法——把窗口钉在最上层
平时我们再使用成熟的软件的时候,会发现有个大头针的功能挺不错的。就是点一下大头针,窗口就会钉住,一直保持在最上面一层,这样可以一边设置参数,一边观察这个窗口里面的变化,比较方便。下面我就来简单实现…...
中间件|day1.Redis
Redis 定义 Redis 是一个开源(BSD许可)的,内存中的数据结构存储系统,它可以用作数据库、缓存和消息中间件。 它支持多种类型的数据结构,如 字符串(strings), 散列(hash…...
PMP到底有什么用?
PMP 就是项目管理证书,全称是项目管理专业人士资格认证,对于一个在项目管理岗位混迹五年的老油条来说,PMP 证书是敲开项目管理岗位的第一块砖,每年考 PMP 的人都很多,要是 PMP 证书没有价值,还会有那么多人…...
apache huidi 时间旅行Time Travel)机制
Apache Hudi(Hadoop Upserts Deletes and Incrementals)是一个数据管理框架,它帮助你高效地管理存储在分布式存储系统(如HDFS或云存储)上的大型数据集。其一个关键特性是“时间旅行”,这允许你在特定时间点查询数据的历史版本。 什么是Apache Hudi中的时间旅行? Apach…...
Python 数据可视化,怎么选出合适数据的图表
数据可视化最佳实践 1. 引言:为什么数据可视化最佳实践很重要 数据可视化是数据分析和决策过程中不可或缺的一部分。通过有效的可视化,复杂的数据可以转化为易于理解的信息,从而帮助观众快速做出正确的判断。然而,糟糕的可视化可…...
c# 元组
文章目录 元组的定义元组的使用示例使用场景创建一个列表 在 C# 中,元组(Tuple)是一种用于存储多个值的数据结构,它可以方便地将不同类型的多个值打包在一起。元组在 C# 7.0 及更高版本中得到了增强,允许更方便地创建和…...
自定义注解
目录 使用注解定义分布式锁 Aop例子 retention 表示在什么时候可以用,runtime表示在运行期可以用 target表示可以用在哪些上面 inherited表示可以被继承 切点和切面类 重点是 pjp.proceed(args) 这个就是执行目标方法,下面的这一段没啥意思 也可…...
报错:Can‘t find Python executable “python“, you can set the PYTHON env variable
将项目导入vscode,执行npm install命令后,报错了,报错的信息是node-sass安装失败,同时提示需要python环境的错误信息,这是因为安装node-sass失败了,而node-sass依赖于Python环境。 1.报错:Cant find Python…...
C++中的错误处理机制
异常的引出 如过你写过不少的程序的话,相信你应该遇到过一些程序所不能处理的错误而导致程序崩溃的问题吧,比如说:操作野指针,访问空指针,函数的除零错误,数组越界,在栈上开辟空间过大导致栈溢…...
【杂乱笔记】图论
图论 文章目录 图论图的存储与深度、广度遍历基础定义代码实现其他补充 并查集基础定义代码实现 最小生成树基础定义代码实现**Kruskal算法**prim算法 拓扑排序基础定义思路分析代码实现 最短路径基础定义代码实现Dijkstra算法Bellman-Ford算法Floyd算法 图的存储与深度、广度遍…...
pdf文件密码忘记,有办法可以打开pdf文件吗?
为确保PDF文件的重要信息不轻易外泄,我们一般会给pdf文件设置打开密码,确保pdf文件的隐私与安全,但随着时间的推移,让我们遗忘了原本设置的密码,这时我们该怎么办呢? 当大家遇到这种情况时,可能…...
git , nvm 快速下载安装包链接
为了记录地址 , 都是复制大神的 , 可以用!!! nvm 包管理工具 和 git安装包 1. nvm https://www.jianshu.com/p/13c0b3ca7c71 https://blog.csdn.net/i_for/article/details/135060019 https://www.cnblogs.com/Fooo/p…...
TongHttpServer安装部署
TongHttpServer安装部署 毫无背景不是你堕落的理由,而更应该是你前进的动力。你该花时间思考,如何打好一副烂牌;而不是抱怨命运,或者干脆撕牌。 部署环境 TongHttpServer V6.0是一款轻量级负载均衡软件,支持 0SI 四层…...
Robot Operating System——操纵杆反馈
大纲 应用场景定义字段解释 案例 sensor_msgs::msg::JoyFeedback 是 ROS (Robot Operating System) 中的一个消息类型,用于表示操纵杆(如游戏手柄或飞行摇杆)的反馈信息。它通常用于传输和处理操纵杆的振动、LED状态等反馈信息。 应用场景 机…...
nginx相关博客
nginx变量 NGINX脚本语言原理及源码分析(一):开源Web服务提供商 - NGINX开源社区 NGINX 脚本语言原理及源码分析(二):开源Web服务提供商 - NGINX开源社区...
字符串及转义字符
字符串 在c语言中 形如‘a ’b ‘c 等单个字母被命名为字符常量 而形如“abcdef”等则被命名为字符串 在c语言中,有整形,单精度浮点数,字符数据类型 但却没有字符串类型 所以在初始化字符串时与初始化字符相同 列:char c…...
[特殊字符] 智能合约中的数据是如何在区块链中保持一致的?
🧠 智能合约中的数据是如何在区块链中保持一致的? 为什么所有区块链节点都能得出相同结果?合约调用这么复杂,状态真能保持一致吗?本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里…...
MPNet:旋转机械轻量化故障诊断模型详解python代码复现
目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块(MBFM) 2.2 残差注意力金字塔模块(RAPM) 2.2.1 空间金字塔注意力(SPA) 2.2.2 金字塔残差块(PRBlock) 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...
VB.net复制Ntag213卡写入UID
本示例使用的发卡器:https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...
UDP(Echoserver)
网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法:netstat [选项] 功能:查看网络状态 常用选项: n 拒绝显示别名&#…...
[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?
论文网址:pdf 英文是纯手打的!论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误,若有发现欢迎评论指正!文章偏向于笔记,谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...
LLM基础1_语言模型如何处理文本
基于GitHub项目:https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken:OpenAI开发的专业"分词器" torch:Facebook开发的强力计算引擎,相当于超级计算器 理解词嵌入:给词语画"…...
【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具
第2章 虚拟机性能监控,故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令:jps [options] [hostid] 功能:本地虚拟机进程显示进程ID(与ps相同),可同时显示主类&#x…...
C++八股 —— 单例模式
文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全(Thread Safety) 线程安全是指在多线程环境下,某个函数、类或代码片段能够被多个线程同时调用时,仍能保证数据的一致性和逻辑的正确性…...
在web-view 加载的本地及远程HTML中调用uniapp的API及网页和vue页面是如何通讯的?
uni-app 中 Web-view 与 Vue 页面的通讯机制详解 一、Web-view 简介 Web-view 是 uni-app 提供的一个重要组件,用于在原生应用中加载 HTML 页面: 支持加载本地 HTML 文件支持加载远程 HTML 页面实现 Web 与原生的双向通讯可用于嵌入第三方网页或 H5 应…...
Java求职者面试指南:Spring、Spring Boot、MyBatis框架与计算机基础问题解析
Java求职者面试指南:Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问(基础概念问题) 1. 请解释Spring框架的核心容器是什么?它在Spring中起到什么作用? Spring框架的核心容器是IoC容器&#…...
