uniapp 微信小程序内嵌h5通信

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

做非实时通信时根据网上教程掉的坑:
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' } });

扩展:
我想通过webview的@load监听webview url变化,h5通过改变url参数把数据传给小程序实现通信,我在h5调用window.location.href=url(原页面+参数),load事件触发了,但是不知道为什么e.detail.src是空的。这种方式还会导致页面刷新。我是使用的hash路由。

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

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

相关文章

【深度学习】布匹寻边:抓边误差小于3px【附完整链接】

布匹寻边 项目简介 布匹寻边是指布料裁剪过程中&#xff0c;通过AI寻边技术自动识别布匹的边缘&#xff0c;将检测到的边缘信息输出&#xff0c;确保裁剪的准确性&#xff0c;减少浪费&#xff0c;并提高生产效率。 项目需求 将打满针眼的布匹边缘裁剪掉&#xff0c;且误差小…

http range 下载大文件分片

摘自&#xff1a;https://www.jianshu.com/p/32c16103715a 上传分片下载也能分 HTTP 协议范围请求允许服务器只发送 HTTP 消息的一部分到客户端。范围请求在传送大的媒体文件&#xff0c;或者与文件下载的断点续传功能搭配使用时非常有用。 检测服务器端是否支持范围请求 假…

解决WordPress出现Fatal error: Uncaught TypeError: ftp_nlist()致命问题

错误背景 WordPress版本&#xff1a;wordpress-6.6.2-zh_CN WooCommerce版本&#xff1a;woocommerce.9.5.1 WordPress在安装了WooCommerce插件后&#xff0c;安装的过程中没有问题&#xff0c;在安装完成后提示&#xff1a; 此站点遇到了致命错误&#xff0c;请查看您站点管理…

用户使用LLM模型都在干什么?

Anthropic 对用户与 Claude 3.5 Sonnet 的大量匿名对话展开分析&#xff0c;主要发现及相关情况如下&#xff1a; 使用用途分布 软件开发主导&#xff1a;在各类使用场景中&#xff0c;软件开发占比最高&#xff0c;其中编码占 Claude 对话的 15% - 25%&#xff0c;网页和移动应…

【巨实用】Git客户端基本操作

本文主要分享Git的一些基本常规操作&#xff0c;手把手教你如何配置~ ● 一个文件夹中初始化Git git init ● 为了方便以后提交代码需要对git进行配置&#xff08;第一次使用或者需求变更的时候&#xff09;&#xff0c;告诉git未来是谁在提交代码 git config --global user.na…

腾讯云AI代码助手编程挑战赛:自动生成漂亮的网页

在当今数字化时代&#xff0c;网页设计和开发已经成为一项至关重要的技能。在当今时代&#xff0c;借助AI的力量&#xff0c;这部分工作变得简单。本文借助腾讯云AI代码助手——“自动生成需要的网页”。本文将详细介绍如何利用AI代码助手生成网页素材&#xff0c;帮助你轻松打…

多台PC共用同一套鼠标键盘

当环境中有多个桌面 pc 需要操作的时候&#xff0c;在 多台 pc 之间切换会造成很多的不方便 可以通过远程进行连接&#xff0c;但是有一个更好的方案是让多台机器之间共用同一套键盘鼠标 常用的解决方案 synergy 和 sharemouse&#xff0c;通过移动光标在不同的 pc 间切换 s…

UOS系统mysql服务安装

UOS系统mysql服务安装 背景 1、安装环境&#xff1a;kvm虚拟机2、运行环境&#xff1a;uos server-1060e3、架构&#xff1a;x864、安装mysql版本&#xff1a;mysql-5.71、安装准备 # Mysql官网 https://downloads.mysql.com/archives/community/ # 下载安装包 wget -i -c …

Binlog实现MySQL主从同步

主从复制原理 ● Master 数据库只要发生变化&#xff0c;立马记录到Binary log 日志文件中 ● Slave数据库启动一个I/O thread连接Master数据库&#xff0c;请求Master变化的二进制日志 ● Slave I/O获取到的二进制日志&#xff0c;保存到自己的Relay log 日志文件中。 ● Sla…

matlab离线安装硬件支持包

MATLAB 硬件支持包离线安装 本文章提供matlab硬件支持包离线安装教程&#xff0c;因为我的matlab安装的某种原因&#xff08;破解&#xff09;&#xff0c;不支持硬件支持包的安装&#xff0c;相信也有很多相同情况的朋友&#xff0c;所以记录一下我是如何离线安装的&#xff…

C#进阶-在Ubuntu上部署ASP.NET Core Web API应用

随着云计算和容器化技术的普及&#xff0c;Linux 服务器已成为部署 Web 应用程序的主流平台之一。ASP.NET Core 作为一个跨平台、高性能的框架&#xff0c;非常适合在 Linux 环境中运行。本篇博客将详细介绍如何在 Linux 服务器上部署 ASP.NET Core Web API 应用&#xff0c;包…

从光子到图像——相机如何捕获世界?

引言 你是否想过为何我们按一下相机快门就可以将眼前广袤多彩的世界显示于一个小小的相机屏幕上&#xff1f;本期推文中将带着大家重现从光子转换为电子、电子转换为图像中数字驱动值的整个流程。 ▲人们通过相机捕获眼前的场景 从光子到电子的转换 光线首先通过光学镜头进入相…

C# 或 .NetCore 如何使用 NPOI 导出图片到 Excel 文件

今天在本文中&#xff0c;我们将尝试使用NPOI库将图像插入到 Excel 文件的特定位置。请将以下逻辑添加到您的写作方法中&#xff0c;在 Excel 文件中添加图像&#xff08;JPEG、PNG&#xff09;,我已经有一个示例 jpeg 文件 - Read-write-excel-npoi.jpg &#xff0c;我们将尝试…

OpenCV实现基于拉普拉斯算子的浮雕特效

图像浮雕效果的实现原理主要基于图像处理技术&#xff0c;特别是利用图像中像素之间的灰度差异来模拟立体感。以下是对该原理的详细解释&#xff1a; 一、浮雕效果的基本概念 浮雕是把所要呈现的图像突起于材质表面&#xff0c;根据凹凸的程度不同从而形成三维的立体感。在计…

前端用json-server来Mock后端返回的数据处理

<html><body><div class"login-container"><h2>登录</h2><div class"login-form"><div class"form-group"><input type"text" id"username" placeholder"请输入用户名&q…

【xLua】xLua-master签名、加密Lua文件

GitHub - Tencent/xLua: xLua is a lua programming solution for C# ( Unity, .Net, Mono) , it supports android, ios, windows, linux, osx, etc. 如果你想在项目工程上操作&#xff0c;又发现项目工程并没导入Tools&#xff0c;可以从xLua-master工程拷贝到项目工程Assets…

Unity学习笔记(六)使用状态机重构角色移动、跳跃、冲刺

前言 本文为Udemy课程The Ultimate Guide to Creating an RPG Game in Unity学习笔记 整体状态框架(简化) Player 是操作对象的类&#xff1a; 继承了 MonoBehaviour 用于定义游戏对象的行为&#xff0c;每个挂载在 Unity 游戏对象上的脚本都需要继承自 MonoBehaviour&#x…

AIDD-人工智能药物设计-AlphaFold系列:全面回顾AF1-3的关键研究成果及其对科学界的影响

AlphaFold系列&#xff1a;全面回顾AF1-3的关键研究成果及其对科学界的影响 本文章将围绕 AlphaFold 系列模型在蛋白质结构预测领域的前沿研究展开&#xff0c;重点介绍 AlphaFold1、AlphaFold2 与 AlphaFold3 的关键研究成果&#xff0c;以及它们对科学界和制药工业的深远影响…

Pandas-RFM会员价值度模型

文章目录 一. 会员价值度模型介绍二. RFM计算与显示1. 背景2. 技术点3. 数据4. 代码① 导入模块② 读取数据③ 数据预处理Ⅰ. 数据清洗, 即: 删除缺失值, 去掉异常值.Ⅱ. 查看清洗后的数据Ⅲ. 把前四年的数据, 拼接到一起 ④ 计算RFM的原始值⑤ 确定RFM划分区间⑥ RFM计算过程⑦…

Git 入门指南:如何高效管理你的代码库

文章目录 Git 的介绍安装 Git创建仓库Git 三板斧addcommitpush 冲突问题常用 Git 指令 Git 的介绍 Git 是一个分布式版本控制系统&#xff0c;用于跟踪文件的变化并支持团队协作开发。最初由 Linus Torvalds&#xff08;Linux 操作系统的创始人&#xff09;开发&#xff0c;Gi…