uniapp 微信小程序内嵌h5实时通信

描述:
小程序webview内嵌的h5需要向小程序实时发送消息,有人说postMessage可以实现,所以试验一下,结果是实现不了实时,只能在特定时机后退、组件销毁、分享时小程序才能接收到信息(小程序为了安全等考虑做了限制),有人说可以使用websocker实现,这种方法应该是没问题的,就是有点麻烦,要跟后端配合。

实时通信:
小程序传参数给h5都是通过url参数,没什么好说的,主要说下h5传参数给小程序。
我是使用webview的load方法实现的,这个方法副作用就是会刷新页面,当需要通信时加载新地址以触发load事件。

const prefix = window.location.href.indexOf('?') ? '&' : '?'
window.location.href = window.location.href + prefix + `action=openMapAPP&latitude=${latitude}&longitude=${longitude}&address=${address}`

注意:
1.不要通过uni等做跳转,那样浏览器不会刷新,导致load不会触发。
2.有可能你发布后load的e.detail.src拿不到url。这个是因为只有小程序配置了业务域名才可以拿到url。
3.本地测试load拿不到url,需要修改微信开发者工具的“调试基础库”版本(详情-本地设置里面)。我测验2.21.4到2.24.7版本可以拿到url,其他版本太新或太老都不行,这有可能导致切换后项目启动报错,可以适当在2.21.4到2.24.7区间换个没问题的版本。
4.真机调试load拿不到url,需要把调试基础库推送到手机端,这个需要使用同个微信。推送后重新真机调试就行了。
在这里插入图片描述

做非实时通信时根据网上教程掉的坑:
postMessage有两种方式,第一种是index.html引入uni.webview.js调用uni.postMessage,第二种是引入jweixin.js调用wx.miniProgram.postMessage。
1.用第一种方式,uni.webview.js需要改源码名称,不然uni会被覆盖,这个也挺多人提到的。不过这种方式还要引入jweixin.js才能使用,改完再通过newName.postMessage调用,如果小程序控制台有输出invokeAppService postMessage ***则代表发送信息成功,奇怪的是我测试时第一天用这种方式成功了,第二天失败了还原不了。
2.我换成了第二种方式,不过跟网上其他人用法不同,别人时直接用wx.miniProgram.postMessage调用,我发现wx也是会被uni的wx对象覆盖,所以我换成npm安装weixin-js-sdk,然后使用 import wxH5 from “weixin-js-sdk” 引入,再调用wxH5.miniProgram.postMessage。这种也需要引入uni.webview.js,我在index.html引入。这个不需要改uni.webview.js源码。
3.信息发送成功后webview @message监听不到信息,需要小程序后退、组件销毁、分享时才能收到信息。注意:改变嵌套的h5是无效的,例如在h5内做路由返回,经测验,返回调用的是h5项目的返回,不能返回到webview外,可以点击小程序左上角的返回按钮来看有没有触发@message事件,所以你webview外的项目的路由至少需要两层。如果webview直接嵌套html网页,是可以直接返回到webview外的。
4.官方文档说可以直接使用 window.postMessage发送信息,测验后是不行的。这种方式只能通过window监听message事件才能接收到消息,但是小程序不能用window。

非实时通信备注:
uni.webview.1.5.6.js下载地址:https://gitcode.net/dcloud/uni-app/-/raw/dev/dist/uni.webview.1.5.6.js
weixin-js-sdk安装版本:“weixin-js-sdk”: “^1.6.5”,
发送非实时信息关键代码:

<script type="text/javascript" src="static/js/uni.webview.1.5.6.js"></script>
"weixin-js-sdk": "^1.6.5",
<web-view :src="src" @message="getMessage" />
import wxH5 from "weixin-js-sdk";
wxH5.miniProgram.postMessage({ data: { action: 'test' } });

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/65706.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

php 使用simplexml_load_string转换xml数据格式失败

本文介绍如何使用php函数解析xml数据为数组。 <?php$a <xml><ToUserName><![CDATA[ww8b77afac71336111]]></ToUserName><FromUserName><![CDATA[sys]]></FromUserName><CreateTime>1736328669</CreateTime><Ms…

HOW - Form 表单 label 和 wrapper 对齐场景

一、背景 在日常使用 表单 时&#xff0c;我们一般有如下布局&#xff1a; 可以通过 Form 表单提供的配置直接设置&#xff1a; <Formform{form}labelCol{{ span: 4 }}wrapperCol{{ span: 20 }}onFinish{handleSubmit}><Form.Itemlabel"输入框"name"…

转运机器人在物流仓储行业的优势特点

在智能制造与智慧物流的浪潮中&#xff0c;一款革命性的产品正悄然改变着行业的面貌——富唯智能转运机器人&#xff0c;它以卓越的智能科技与创新的设计理念&#xff0c;引领着物流领域步入一个全新的高效、智能、无人的时代。 一、解放双手&#xff0c;重塑物流生态 富唯智能…

基于单片机的无线智能窗帘控制器的设计

摘 要 : 本文以单片机为控制核心 , 基于 PT2262/ 2272 无线收发模块 , 实现了窗帘的无线远程智能控制 . 该控制器通过高频无线收发模块实现了遥控窗帘的开合控制; 根据外部光线强弱实现自动开关窗帘 ; 根据设定时间自动完成开关过程; 通过语音播报当前环境温湿度信息以…

linux centos挂载未分配的磁盘空间

使用到的命令 lshw -class disk -short hostnamectl fdisk /dev/sdb partprobe /dev/sdb mount /dev/sdb2 /opt/fastdfs/ mkfs.ext4 /dev/sdb2 mount -t ext4 /dev/sdb2 /opt/fastdfs/

Vivado中Tri_mode_ethernet_mac的时序约束、分析、调整——(一)时序约束的基本概念

1、基本概念 推荐阅读&#xff0c;Ally Zhou编写的《Vivado使用误区与进阶》系列文章&#xff0c;熟悉基本概念、tcl语句的使用。 《Vivado使用误区与进阶》电子书开放下载&#xff01;&#xff01; 2、Vivado中的语法例程 1&#xff09;语法例程 约束的语句可以参考vivado…

基于Spring Boot的城市垃圾分类管理系统设计与实现(LW+源码+讲解)

专注于大学生项目实战开发,讲解,毕业答疑辅导&#xff0c;欢迎高校老师/同行前辈交流合作✌。 技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容&#xff1a;…

【YOLOv8杂草作物目标检测】

YOLOv8杂草目标检测 算法介绍模型和数据集下载 算法介绍 YOLOv8在禾本科杂草目标检测方面有显著的应用和效果。以下是一些关键信息的总结&#xff1a; 农作物幼苗与杂草检测系统&#xff1a;基于YOLOv8深度学习框架&#xff0c;通过2822张图片训练了一个目标检测模型&#xff…

比亚迪夏直插家用MPV腹地,“迪王”开启全面销冠新征程

文/王俣祺 导语&#xff1a;比亚迪前脚刚收获2024年的全面成功&#xff0c;后脚立刻就开始布局2025年的产品矩阵了。比亚迪夏的横空出世&#xff0c;看来家用MPV市场也要感受“迪王”的恐怖如斯了。 家用MPV市场的“意外之喜” 1月8日&#xff0c;比亚迪夏终于在万众瞩目之下…

探索数据存储的奥秘:深入理解B树与B+树

key value 类型的数据红黑树&#xff08;最优二叉树&#xff0c;内存最优&#xff09;&#xff0c;时间复杂度&#xff1a;O&#xff08;logn&#xff09;,调整方便&#xff1b;一个结点分出两个叉B树一个节点可以分出很多叉数据量相等的条件下&#xff1a;红黑树的层数很高&am…

联邦大语言模型典型系统: FATE - LLM、FedLLM、FederatedScope - LLM、PrimiHub

联邦大语言模型典型系统: FATE - LLM、FedLLM、FederatedScope - LLM、PrimiHub 目录 联邦大语言模型典型系统: FATE - LLM、FedLLM、FederatedScope - LLM、PrimiHubPEFT 技术及简单举例PEFT 技术代码实现提示词工程不仅仅在聊天对话框实现,还可以再代码中实现联邦大语言模…

L1G5000 XTuner 微调个人小助手认知

使用 XTuner 微调 InternLM2-Chat-7B 实现自己的小助手认知 1 环境配置与数据准备步骤 0. 使用 conda 先构建一个 Python-3.10 的虚拟环境步骤 1. 安装 XTuner 修改提供的数据步骤 0. 创建一个新的文件夹用于存储微调数据步骤 1. 创建修改脚本步骤 2. 执行脚本步骤 3. 查看数据…

网络协议安全的攻击手法

1.使用SYN Flood泛洪攻击&#xff1a; SYN Flood(半开放攻击)是最经典的ddos攻击之一&#xff0c;他利用了TCP协议的三次握手机制&#xff0c;攻击者通常利用工具或控制僵尸主机向服务器发送海量的变源端口的TCP SYN报文&#xff0c;服务器响应了这些报文后就会生成大量的半连…

Excel 技巧08 - 如何计算某类(比如红色背景色)单元格的总和? (★)

本文讲了如何在Excel中计算某类(比如红色背景色)单元格的总和。 1&#xff0c;如何计算某类(比如红色背景色)单元格的总和&#xff1f; 技巧就是先把它们给标记出来&#xff0c;然后就好统计了。 那么如何找出来呢&#xff1f; 对&#xff0c;就是通过红色。 按下Ctrl F 点…

uni-app无限级树形组件简单实现

因为项目一些数据需要树形展示&#xff0c;但是官网组件没有。现在简单封装一个组件在app中使用&#xff0c;可以无线嵌套&#xff0c;展开&#xff0c;收缩&#xff0c;获取子节点数据等。 简单效果 组件TreeData <template><view class"tree"><te…

互联网架构变迁:从 TCP/IP “呼叫” 到 NDN “内容分发” 的逐浪之旅

本文将给出关于互联网架构演进的一个不同视角。回顾一下互联网的核心理论基础产生的背景&#xff1a; 左边是典型的集中控制通信网络&#xff0c;很容易被摧毁&#xff0c;而右边的网络则没有单点问题&#xff0c;换句话说它很难被全部摧毁&#xff0c;与此同时&#xff0c;分…

移远BC28_opencpu方案_pin脚分配

先上图&#xff0c;BC28模块的pin脚如图所示&#xff1a; 下面看看GPIO的复用管脚 然后我自己整理了一份完整的pin功能列表

深度学习笔记11-优化器对比实验(Tensorflow)

&#x1f368; 本文为&#x1f517;365天深度学习训练营中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 目录 一、导入数据并检查 二、配置数据集 三、数据可视化 四、构建模型 五、训练模型 六、模型对比评估 七、总结 一、导入数据并检查 import pathlib,…

FFmpeg Muxer HLS

使用FFmpeg命令来研究它对HLS协议的支持程度是最好的方法&#xff1a; ffmpeg -h muxerhls Muxer HLS Muxer hls [Apple HTTP Live Streaming]:Common extensions: m3u8.Default video codec: h264.Default audio codec: aac.Default subtitle codec: webvtt. 这里面告诉我…

Docker Desktop 构建java8基础镜像jdk安装配置失效解决

Docker Desktop 构建java8基础镜像jdk安装配置失效解决 文章目录 1.问题2.解决方法3.总结 1.问题 之前的好几篇文章中分享了在Linux(centOs上)和windows10上使用docker和docker Desktop环境构建java8的最小jre基础镜像&#xff0c;前几天我使用Docker Desktop环境重新构建了一个…