uniapp 微信小程序webview与h5双向实时通信交互

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

实时通信:
小程序传参数给h5都是通过url参数,可以看uniapp中使用web-view相互通信+uniapp向webview中实时通信。
主要说下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' } });

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

pycharm-pyspark 环境安装

1、环境准备&#xff1a;java、scala、pyspark、python-anaconda、pycharm vi ~/.bash_profile export SCALA_HOME/Users/xunyongsun/Documents/scala-2.13.0 export PATH P A T H : PATH: PATH:SCALA_HOME/bin export SPARK_HOME/Users/xunyongsun/Documents/spark-3.5.4-bin…

fast-crud select下拉框 实现多选功能及下拉框数据动态获取(通过接口获取)

教程 fast-crud select示例配置需求:需求比较复杂 1. 下拉框选项需要通过后端接口获取 2. 实现多选功能 由于这个前端框架使用逻辑比较复杂我也是第一次使用,所以只记录核心问题 环境:vue3,typescript,fast-crud ,elementPlus 效果 代码 // crud.tsx文件(/.ts也行 js应…

高性能现代PHP全栈框架 Spiral

概述 Spiral Framework 诞生于现实世界的软件开发项目是一个现代 PHP 框架&#xff0c;旨在为更快、更清洁、更卓越的软件开发提供动力。 特性 高性能 由于其设计以及复杂精密的应用服务器&#xff0c;Spiral Framework框架在不影响代码质量以及与常用库的兼容性的情况下&a…

天机学堂笔记1

FeignClient(contextId "course", value "course-service") public interface CourseClient {/*** 根据老师id列表获取老师出题数据和讲课数据* param teacherIds 老师id列表* return 老师id和老师对应的出题数和教课数*/GetMapping("/course/infoB…

lobechat搭建本地知识库

本文中&#xff0c;我们提供了完全基于开源自建服务的 Docker Compose 配置&#xff0c;你可以直接使用这份配置文件来启动 LobeChat 数据库版本&#xff0c;也可以对之进行修改以适应你的需求。 我们默认使用 MinIO 作为本地 S3 对象存储服务&#xff0c;使用 Casdoor 作为本…

沸点 | 聚焦嬴图Cloud V2.1:具备水平可扩展性+深度计算的云原生嬴图动力站!

近日&#xff0c;嬴图正式推出嬴图Cloud V2.1&#xff0c;此次发布专注于提供无与伦比的用户体验&#xff0c;包括具有水平可扩展性的嬴图Powerhouse的一键部署、具有灵活定制功能的管理控制台、VPC / 专用链接等&#xff0c;旨在满足用户不断变化需求的各项前沿功能&#xff0…

Linux---shell脚本练习

要求&#xff1a; 1、shell 脚本写出检测 /tmp/size.log 文件如果存在显示它的内容&#xff0c;不存在则创建一个文件将创建时间写入。 2、写一个 shel1 脚本,实现批量添加 20个用户,用户名为user01-20,密码为user 后面跟5个随机字符。 3、编写个shel 脚本将/usr/local 日录下…

LiveNVR监控流媒体Onvif/RTSP常见问题-二次开发接口jquery调用示例如何解决JS|axios调用接口时遇到的跨域问题

LiveNVR二次开发接口jquery调用示例如何解决JS|axios调用接口时遇到的跨域问题 1、接口调用示例2、JS调用遇到跨域解决示例3、axios请求接口遇到跨域问题3.1、post请求3.2、get请求 4、RTSP/HLS/FLV/RTMP拉流Onvif流媒体服务 1、接口调用示例 下面是完整的 jquery 调用示例 $.a…

Canvas简历编辑器-选中绘制与拖拽多选交互方案

Canvas简历编辑器-选中绘制与拖拽多选交互方案 在之前我们聊了聊如何基于Canvas与基本事件组合实现了轻量级DOM&#xff0c;并且在此基础上实现了如何进行管理事件以及多层级渲染的能力设计。那么此时我们就依然在轻量级DOM的基础上&#xff0c;关注于实现选中绘制与拖拽多选交…

服务器数据恢复—raid5故障导致上层ORACLE无法启动的数据恢复案例

服务器数据恢复环境&故障&#xff1a; 一台服务器上的8块硬盘组建了一组raid5磁盘阵列。上层安装windows server操作系统&#xff0c;部署了oracle数据库。 raid5阵列中有2块硬盘的硬盘指示灯显示异常报警。服务器操作系统无法启动&#xff0c;ORACLE数据库也无法启动。 服…

LabVIEW光流算法的应用

该VI展示了如何使用NI Vision Development Module中的光流算法来计算图像序列中像素的运动矢量。通过该方法&#xff0c;可以实现目标跟踪、运动检测等功能&#xff0c;适用于视频处理、机器人视觉和监控领域。程序采用模块化设计&#xff0c;包含图像输入、算法处理、结果展示…

Redis十大数据类型详解

Redis&#xff08;一&#xff09; 十大数据类型 redis字符串&#xff08;String&#xff09; string是redis最基本的类型&#xff0c;一个key对应一个value string类型是二进制安全的&#xff0c;意思是redis的string可以包含任何数据。例如说是jpg图片或者序列化对象 一个re…

Navicat Premium 16.0.90 for Mac 安装与free使用

步骤 0.下载 通过网盘分享的文件&#xff1a;Navicat Premium 16.0.90 链接: https://pan.baidu.com/s/12O22rXa9MiBPKKTGMELNIg 提取码: yyds 1.打开下好的 dmg 文件 (这个界面不要关闭&#xff09; 2.将Navicat Premium 拖动至 Applications 这时出现 点击取消。 3.点开…

基于Springboot + vue实现的购物推荐网站

&#x1f942;(❁◡❁)您的点赞&#x1f44d;➕评论&#x1f4dd;➕收藏⭐是作者创作的最大动力&#x1f91e; &#x1f496;&#x1f4d5;&#x1f389;&#x1f525; 支持我&#xff1a;点赞&#x1f44d;收藏⭐️留言&#x1f4dd;欢迎留言讨论 &#x1f525;&#x1f525;&…

【大数据】机器学习-----最开始的引路

以下是关于机器学习的一些基本信息&#xff0c;包括基本术语、假设空间、归纳偏好、发展历程、应用现状和代码示例&#xff1a; 一、基本术语 样本&#xff08;Sample&#xff09;&#xff1a; 也称为实例&#xff08;Instance&#xff09;或数据点&#xff08;Data Point&…

【WPS】【WORDEXCEL】【VB】实现微软WORD自动更正的效果

1. 代码规范方面 添加 Option Explicit&#xff1a;强制要求显式声明所有变量&#xff0c;这样可以避免因变量名拼写错误等情况而出现难以排查的逻辑错误&#xff0c;提高代码的健壮性。使用 On Error GoTo 进行错误处理&#xff1a;通过设置错误处理机制&#xff0c;当代码执行…

No one knows regex better than me

No one knows regex better than me 代码分析&#xff0c;传了两个参数zero,first&#xff0c;然后$second对两个所传的参数进行了拼接 好比&#xff1a;?zero1&first2 传入后就是: 12 然后对$second进行了正则匹配&#xff0c;匹配所传入的参数是否包含字符串Yeedo|wa…

Docker 安装开源的IT资产管理系统Snipe-IT

一、安装 1、创建docker-compose.yaml version: 3services:snipeit:container_name: snipeitimage: snipe/snipe-it:v6.1.2restart: alwaysports:- "8000:80"volumes:- ./logs:/var/www/html/storage/logsdepends_on:- mysqlenv_file:- .env.dockernetworks:- snip…

【RDMA】 ZTR(Zero Touch RoCE)技术(无需配置PFC和ECN)

目录 什么是Zero Touch RoCE&#xff08;ZTR&#xff09; 硬件和软件需求 使用方式 实现机制 ZTR-RTTCC 的工作原理 ZTR -RTTCC性能 官方文档 什么是Zero Touch RoCE&#xff08;ZTR&#xff09; Zero Touch RoCE&#xff08;ZTR&#xff09;技术是NVIDIA开发的一种创新…

【python】OpenCV—Local Translation Warps

文章目录 1、功能描述2、原理分析3、代码实现4、效果展示5、完整代码6、参考 1、功能描述 利用液化效果实现瘦脸美颜 交互式的液化效果原理来自 Gustafsson A. Interactive image warping[D]. , 1993. 2、原理分析 上面描述很清晰了&#xff0c;鼠标初始在 C&#xff0c;也即…