uniapp实现APP、小程序与webview页面间通讯

news2025/1/4 15:32:53

需求:

1、需要在Uniapp开发的APP或小程序页面嵌入一个H5网页,需要拿到H5给APP传递的数据

2、并且这个H5是使用vue+vant开发的。(其实跟使用uniapp开发H5一样)

实现步骤:

1、首先需要兼容多端和App端,因此这里需要在h5项目的index.html文件引入多个js。

给app端传递需要引入uni.webview.1.5.5.js (这里是改后的1.5.5版本 把uni地方该为了webUni

!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(e=e||self).webUni=n()}(this,(function(){"use strict";try{var e={};Object.defineProperty(e,"passive",{get:function(){!0}}),window.addEventListener("test-passive",null,e)}catch(e){}var n=Object.prototype.hasOwnProperty;function i(e,i){return n.call(e,i)}var t=[];function o(){return window.__dcloud_weex_postMessage||window.__dcloud_weex_}function a(){return window.__uniapp_x_postMessage||window.__uniapp_x_}var r=function(e,n){var i={options:{timestamp:+new Date},name:e,arg:n};if(a()){if("postMessage"===e){var r={data:n};return window.__uniapp_x_postMessage?window.__uniapp_x_postMessage(r):window.__uniapp_x_.postMessage(JSON.stringify(r))}var d={type:"WEB_INVOKE_APPSERVICE",args:{data:i,webviewIds:t}};window.__uniapp_x_postMessage?window.__uniapp_x_postMessageToService(d):window.__uniapp_x_.postMessageToService(JSON.stringify(d))}else if(o()){if("postMessage"===e){var s={data:[n]};return window.__dcloud_weex_postMessage?window.__dcloud_weex_postMessage(s):window.__dcloud_weex_.postMessage(JSON.stringify(s))}var w={type:"WEB_INVOKE_APPSERVICE",args:{data:i,webviewIds:t}};window.__dcloud_weex_postMessage?window.__dcloud_weex_postMessageToService(w):window.__dcloud_weex_.postMessageToService(JSON.stringify(w))}else{if(!window.plus)return window.parent.postMessage({type:"WEB_INVOKE_APPSERVICE",data:i,pageId:""},"*");if(0===t.length){var u=plus.webview.currentWebview();if(!u)throw new Error("plus.webview.currentWebview() is undefined");var g=u.parent(),v="";v=g?g.id:u.id,t.push(v)}if(plus.webview.getWebviewById("__uniapp__service"))plus.webview.postMessageToUniNView({type:"WEB_INVOKE_APPSERVICE",args:{data:i,webviewIds:t}},"__uniapp__service");else{var c=JSON.stringify(i);plus.webview.getLaunchWebview().evalJS('UniPlusBridge.subscribeHandler("'.concat("WEB_INVOKE_APPSERVICE",'",').concat(c,",").concat(JSON.stringify(t),");"))}}},d={navigateTo:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;r("navigateTo",{url:encodeURI(n)})},navigateBack:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.delta;r("navigateBack",{delta:parseInt(n)||1})},switchTab:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;r("switchTab",{url:encodeURI(n)})},reLaunch:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;r("reLaunch",{url:encodeURI(n)})},redirectTo:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;r("redirectTo",{url:encodeURI(n)})},getEnv:function(e){a()?e({uvue:!0}):o()?e({nvue:!0}):window.plus?e({plus:!0}):e({h5:!0})},postMessage:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};r("postMessage",e.data||{})}},s=/uni-app/i.test(navigator.userAgent),w=/Html5Plus/i.test(navigator.userAgent),u=/complete|loaded|interactive/;var g=window.my&&navigator.userAgent.indexOf(["t","n","e","i","l","C","y","a","p","i","l","A"].reverse().join(""))>-1;var v=window.swan&&window.swan.webView&&/swan/i.test(navigator.userAgent);var c=window.qq&&window.qq.miniProgram&&/QQ/i.test(navigator.userAgent)&&/miniProgram/i.test(navigator.userAgent);var p=window.tt&&window.tt.miniProgram&&/toutiaomicroapp/i.test(navigator.userAgent);var _=window.wx&&window.wx.miniProgram&&/micromessenger/i.test(navigator.userAgent)&&/miniProgram/i.test(navigator.userAgent);var m=window.qa&&/quickapp/i.test(navigator.userAgent);var f=window.ks&&window.ks.miniProgram&&/micromessenger/i.test(navigator.userAgent)&&/miniProgram/i.test(navigator.userAgent);var l=window.tt&&window.tt.miniProgram&&/Lark|Feishu/i.test(navigator.userAgent);var E=window.jd&&window.jd.miniProgram&&/micromessenger/i.test(navigator.userAgent)&&/miniProgram/i.test(navigator.userAgent);var x=window.xhs&&window.xhs.miniProgram&&/xhsminiapp/i.test(navigator.userAgent);for(var S,h=function(){window.UniAppJSBridge=!0,document.dispatchEvent(new CustomEvent("UniAppJSBridgeReady",{bubbles:!0,cancelable:!0}))},y=[function(e){if(s||w)return window.__uniapp_x_postMessage||window.__uniapp_x_||window.__dcloud_weex_postMessage||window.__dcloud_weex_?document.addEventListener("DOMContentLoaded",e):window.plus&&u.test(document.readyState)?setTimeout(e,0):document.addEventListener("plusready",e),d},function(e){if(_)return window.WeixinJSBridge&&window.WeixinJSBridge.invoke?setTimeout(e,0):document.addEventListener("WeixinJSBridgeReady",e),window.wx.miniProgram},function(e){if(c)return window.QQJSBridge&&window.QQJSBridge.invoke?setTimeout(e,0):document.addEventListener("QQJSBridgeReady",e),window.qq.miniProgram},function(e){if(g){document.addEventListener("DOMContentLoaded",e);var n=window.my;return{navigateTo:n.navigateTo,navigateBack:n.navigateBack,switchTab:n.switchTab,reLaunch:n.reLaunch,redirectTo:n.redirectTo,postMessage:n.postMessage,getEnv:n.getEnv}}},function(e){if(v)return document.addEventListener("DOMContentLoaded",e),window.swan.webView},function(e){if(p)return document.addEventListener("DOMContentLoaded",e),window.tt.miniProgram},function(e){if(m){window.QaJSBridge&&window.QaJSBridge.invoke?setTimeout(e,0):document.addEventListener("QaJSBridgeReady",e);var n=window.qa;return{navigateTo:n.navigateTo,navigateBack:n.navigateBack,switchTab:n.switchTab,reLaunch:n.reLaunch,redirectTo:n.redirectTo,postMessage:n.postMessage,getEnv:n.getEnv}}},function(e){if(f)return window.WeixinJSBridge&&window.WeixinJSBridge.invoke?setTimeout(e,0):document.addEventListener("WeixinJSBridgeReady",e),window.ks.miniProgram},function(e){if(l)return document.addEventListener("DOMContentLoaded",e),window.tt.miniProgram},function(e){if(E)return window.JDJSBridgeReady&&window.JDJSBridgeReady.invoke?setTimeout(e,0):document.addEventListener("JDJSBridgeReady",e),window.jd.miniProgram},function(e){if(x)return window.xhs.miniProgram},function(e){return document.addEventListener("DOMContentLoaded",e),d}],M=0;M<y.length&&!(S=y[M](h));M++);S||(S={});var P="undefined"!=typeof webUni?webUni:{};if(!P.navigateTo)for(var b in S)i(S,b)&&(P[b]=S[b]);return P.webView=S,P}));

其他多端需要引入不同端的js(这里是多家小程序引入的js

<script type="text/javascript">
			var userAgent = navigator.userAgent;
			if (userAgent.indexOf('AlipayClient') > -1) {
				// 支付宝小程序的 JS-SDK 防止 404 需要动态加载,如果不需要兼容支付宝小程序,则无需引用此 JS 文件。  
				document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
			} else if (/QQ/i.test(userAgent) && /miniProgram/i.test(userAgent)) {
				// QQ 小程序  
				document.write(
					'<script type="text/javascript" src="https://qqq.gtimg.cn/miniprogram/webview_jssdk/qqjssdk-1.0.0.js"><\/script>'
				);
			} else if (/miniProgram/i.test(userAgent) && /micromessenger/i.test(userAgent)) {
				// 微信小程序 JS-SDK 如果不需要兼容微信小程序,则无需引用此 JS 文件。  
				document.write('<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><\/script>');
			} else if (/toutiaomicroapp/i.test(userAgent)) {
				// 头条小程序 JS-SDK 如果不需要兼容头条小程序,则无需引用此 JS 文件。  
				document.write(
					'<script type="text/javascript" src="https://s3.pstatp.com/toutiao/tmajssdk/jssdk-1.0.1.js"><\/script>');
			} else if (/swan/i.test(userAgent)) {
				// 百度小程序 JS-SDK 如果不需要兼容百度小程序,则无需引用此 JS 文件。  
				document.write(
					'<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.18.js"><\/script>'
				);
			} else if (/quickapp/i.test(userAgent)) {
				// quickapp  
				document.write('<script type="text/javascript" src="https://quickapp/jssdk.webview.min.js"><\/script>');
			}
		</script>

2、宿主tset.vue 需要在宿主APP或小程序嵌入webview页面,使用@message方法进行监听h5页面传递的数据(这里是个页面demo,注意不能再带有tab栏页面嵌入webview

<template>
	<view class="content">
		<web-view src="https://xxx.com/xxdDev/#/" @message="getMessage" @onPostMessage="getMessage"></web-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			}
		},
		methods: {
			getMessage(e) {
				console.log(e,'监听到H5发送的数据')
			}
		}
	}
</script>

<style>

</style>

3、index.htmlH5项目完整的在index.html引入代码(我这里把uni.webview.1.55.js放在了/static/js目录下)

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<script>
			var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
				CSS.supports('top: constant(a)'))
			document.write(
				'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
				(coverSupport ? ', viewport-fit=cover' : '') + '" />')
		</script>
		<title></title>
		<!-- 引入微信小程序兼容文件,官网上还有其他平台的兼容文件,这里只用了微信小程序,所以就不判断环境了 -->
		<script type="text/javascript">
			var userAgent = navigator.userAgent;
			if (userAgent.indexOf('AlipayClient') > -1) {
				// 支付宝小程序的 JS-SDK 防止 404 需要动态加载,如果不需要兼容支付宝小程序,则无需引用此 JS 文件。  
				document.writeln('<script src="https://appx/web-view.min.js"' + '>' + '<' + '/' + 'script>');
			} else if (/QQ/i.test(userAgent) && /miniProgram/i.test(userAgent)) {
				// QQ 小程序  
				document.write(
					'<script type="text/javascript" src="https://qqq.gtimg.cn/miniprogram/webview_jssdk/qqjssdk-1.0.0.js"><\/script>'
				);
			} else if (/miniProgram/i.test(userAgent) && /micromessenger/i.test(userAgent)) {
				// 微信小程序 JS-SDK 如果不需要兼容微信小程序,则无需引用此 JS 文件。  
				document.write('<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><\/script>');
			} else if (/toutiaomicroapp/i.test(userAgent)) {
				// 头条小程序 JS-SDK 如果不需要兼容头条小程序,则无需引用此 JS 文件。  
				document.write(
					'<script type="text/javascript" src="https://s3.pstatp.com/toutiao/tmajssdk/jssdk-1.0.1.js"><\/script>');
			} else if (/swan/i.test(userAgent)) {
				// 百度小程序 JS-SDK 如果不需要兼容百度小程序,则无需引用此 JS 文件。  
				document.write(
					'<script type="text/javascript" src="https://b.bdstatic.com/searchbox/icms/searchbox/js/swan-2.0.18.js"><\/script>'
				);
			} else if (/quickapp/i.test(userAgent)) {
				// quickapp  
				document.write('<script type="text/javascript" src="https://quickapp/jssdk.webview.min.js"><\/script>');
			}
		</script>
		<!-- 需要下载 uni.webview.1.5.5.js 并修改源码,前面笔者有提供修改文件 -->
		<script>
			var currentEnv = window.location.protocol;
			var hostName = window.location.host;
			var pathName = window.location.pathname
			var isHttps = currentEnv === "https:";
			var scriptSrc = currentEnv + "//" + hostName + pathName + '/static/js/uni.webview.1.5.5.js';
			if (!isHttps) { //如果本地环境
				scriptSrc = "./static/js/uni.webview.1.5.5.js"
			}
			var script = document.createElement('script');
			script.type = 'module';
			script.src = scriptSrc;
			document.head.appendChild(script);
		</script>


	<body>
		<div id="app"><!--app-html--></div>
		<script type="module" src="/main.js"></script>

	</body>
</html>

4、h5test.vue 最后在H5单页面测试 给小程序或App发送消息(注意:给微信小程序发送消息必须使用jWeixin.miniProgram发送,给APP发送使用webUni)

<template>
	<view>
		<button @click="goWebView" type="warn">给App或微信小程序发送消息</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			goWebView() {//这里一套代码 判断给微信小程序发送还是给App发送信息
				if (typeof jWeixin !== 'undefined') {
					jWeixin.miniProgram.getEnv(function(res) {
						if (res) {
							jWeixin.miniProgram.postMessage({
								data: {
									action: '我是H5页面给微信小程序发送的信息'
								}
							})
							jWeixin.miniProgram.navigateBack({
								delta: 1
							})
						}
					});
				} else {
					webUni.postMessage({
						data: {
							action: '我是H5页面给APP发送的信息'
						}
					})
				}
			},
		}
	}
</script>

<style>

</style>

打印效果:

注意:

1、uni.webview.js文件需要放在static/js/目录下,不然你得把index.html引入路径改成你所在目录。

2、在index.html文件我已经做了线上uni.webview.js文件路径判断,动态获取你所在目录。

这样就大功告成了哈!!!

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

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

相关文章

网络游戏之害

网络游戏之害&#xff1a; 网络游戏于今之世风靡四方&#xff0c;其娱人耳目、畅人心怀之效&#xff0c;固为人知&#xff0c;然所藏之害&#xff0c;若隐伏之暗潮&#xff0c;汹涌而至时&#xff0c;足以覆舟&#xff0c;尤以青年为甚&#xff0c;今且缕析其害&#xff0c;以…

数据库的创建与删除:理论与实践

title: 数据库的创建与删除:理论与实践 date: 2024/12/31 updated: 2024/12/31 author: cmdragon excerpt: 在当今的数字时代,数据的管理和存储变得尤为重要。数据库作为数据存储的结构化方案,为数据的增删改查提供了系统化的方法。在一个典型的数据库管理系统中,创建和…

【电机控制】基于STC8H1K28的六步换向——方波驱动(软件篇)

【电机控制】基于STC8H1K28的六步换向——方波驱动&#xff08;软件篇&#xff09; 文章目录 [TOC](文章目录) 前言一、main.c二、GPIO.c三、PWMA.c四、ADC.c五、CMP.c六、Timer.c七、PMSM.c八、参考资料总结 前言 【电机控制】STC8H无感方波驱动—反电动势过零检测六步换向法 …

优化租赁小程序提升服务效率与用户体验的策略与实践

内容概要 在这个快速发展的商业环境中&#xff0c;租赁小程序成为了提升服务效率和用户体验的重要工具。通过对用户需求的深入挖掘&#xff0c;我们发现他们对于功能的便捷性、响应速度和界面的友好性有着极高的期待。因此&#xff0c;针对这些需求&#xff0c;完善租赁小程序…

电子电器架构 --- 智能座舱与AI结合

我是穿拖鞋的汉子&#xff0c;魔都中坚持长期主义的汽车电子工程师。 老规矩&#xff0c;分享一段喜欢的文字&#xff0c;避免自己成为高知识低文化的工程师&#xff1a; 所谓鸡汤&#xff0c;要么蛊惑你认命&#xff0c;要么怂恿你拼命&#xff0c;但都是回避问题的根源&…

C语言 斐波那契数列(递归算法)

C语言 斐波那契数列&#xff08;递归算法&#xff09; 什么是斐波那契数列&#xff1f; 是指这样一个数列&#xff1a;0&#xff0c;1&#xff0c;1&#xff0c;2&#xff0c;3&#xff0c;5&#xff0c;8&#xff0c;13……这个数列从第3项开始 &#xff0c;每一项都等于前两…

互联网直播点播平台EasyDSS无人机视频推拉流技术实现工地远程监控巡检直播

在建筑行业&#xff0c;施工现场的安全管理和实时监控一直是项目管理中的重点。随着技术的进步&#xff0c;无人机工地直播技术成为了一种新兴的解决方案&#xff0c;它不仅能够提高施工透明度&#xff0c;还能够加强现场安全管理。EasyDSS作为一种先进的流媒体技术平台&#x…

【每日学点鸿蒙知识】模拟器开启网络、长时任务、兼容性测试支持、丢帧定位、SO中访问rawfile等

1、模拟器如何开启网络&#xff1f; 模拟器使用的是电脑本身的网络&#xff0c;不通过代理即可访问网络。 2、创建子window后&#xff0c;锁屏很短时间内&#xff0c;应用会被杀死&#xff1f; 没开长时任务&#xff0c;锁屏和退后台保活要开长时任务。 应用退至后台后&…

计算机网络 (18)使用广播信道的数据链路层

一、广播信道的基本概念 广播信道是一种允许一个发送者向多个接收者发送数据的通信信道。在计算机网络中&#xff0c;广播信道通常用于局域网&#xff08;LAN&#xff09;内部的主机之间的通信。这种通信方式的主要优点是可以节省线路&#xff0c;实现资源共享。 二、广播信道数…

深度学习——损失函数汇总

1. 连续值损失函数 总结:主要使用胡贝儿损失函数,应用于连续数值的预测之间的误差损失,参考地址 import torch import torch.nn as nna = torch.tensor([[1, 2], [3, 4]], dtype=torch.float) b = torch.tensor([[3, 5], [8, 6]], dtype=torch.float)loss_fn1 = torch.nn.M…

github 项目分享

今天和大家分享一些github上面搜到关于卫星遥感和水环境相关的项目。 一、WaterDetect 使用端到端算法去识别水体范围的算法&#xff0c;针对哨兵2卫星遥感数据可用。 项目地址&#xff1a; https://github.com/cordmaur/WaterDetect 二、DeepWaterMap 深度卷积神经网络去…

音视频入门基础:MPEG2-PS专题(2)——使用FFmpeg命令生成ps文件

一、错误的命令 通过FFmpeg命令可以将mp4文件转换为ps文件&#xff0c;PS文件中包含PS流数据。 由于PS流/PS文件对应的FFInputFormat结构为&#xff1a; const FFInputFormat ff_mpegps_demuxer {.p.name "mpeg",.p.long_name NULL_IF_CONFIG_SMALL…

活动预告 | Microsoft Azure 在线技术公开课:使用 Azure OpenAI 服务构建生成式应用

课程介绍 通过 Microsoft Learn 免费参加 Microsoft Azure 在线技术公开课&#xff0c;掌握创造新机遇所需的技能&#xff0c;加快对 Microsoft Cloud 技术的了解。参加我们举办的“使用 Azure OpenAI 服务构建生成式应用”活动&#xff0c;了解如何使用包括 GPT 在内的强大的…

springboot523基于Spring Boot的大学校园生活信息平台的设计与实现(论文+源码)_kaic

摘 要 现代经济快节奏发展以及不断完善升级的信息化技术&#xff0c;让传统数据信息的管理升级为软件存储&#xff0c;归纳&#xff0c;集中处理数据信息的管理方式。本大学校园生活信息平台就是在这样的大环境下诞生&#xff0c;其可以帮助管理者在短时间内处理完毕庞大的数据…

机器学习详解(11):分类任务的模型评估标准

模型评估是利用不同的评估指标来了解机器学习模型的性能&#xff0c;以及其优势和劣势的过程。评估对于确保机器学习模型的可靠性、泛化能力以及在新数据上的准确预测能力至关重要。 文章目录 1 介绍2 评估准则3 分类指标3.1 准确率 (Accuracy)3.2 精确率 (Precision)3.3 召回率…

天天跳绳(???)

广东省人民政府门户网站 https://www.gd.gov.cn/zwgk/zdlyxxgkzl/whjg/content/post... 二沙岛变身智能“运动岛” - 广东省人民政府门户网站 2020年10月20日  广州二沙岛&#xff0c;犹如一颗璀璨明珠点缀在珠江之心&#xff0c;自然风光旖旎&#xff0c;功能分区清 … 公共…

2025元旦源码免费送

我们常常在当下感到时间慢&#xff0c;觉得未来遥远&#xff0c;但一旦回头看&#xff0c;时间已经悄然流逝。对于未来&#xff0c;尽管如此&#xff0c;也应该保持一种从容的态度&#xff0c;相信未来仍有许多可能性等待着我们。 免费获取源码。 更多内容敬请期待。如有需要可…

HTML——38.Span标签和字符实体

<!DOCTYPE html> <html><head><meta charset"UTF-8"><title>span标签和字符实体</title><style type"text/css">h1{text-align: center;}p{text-indent: 2em;}span{color: red;}</style></head><…

DAC8562的详细介绍

DAC8562的详细介绍 DAC8562是一款由德州仪器(Texas Instruments, TI)生产的高精度、低功耗的数模转换器(DAC),专为工业自动化、仪器仪表、医疗设备及消费电子等应用设计。以下是关于DAC8562芯片的详细介绍: DAC8562芯片的SPI接口配置主要包括以下几个方面:

计算机找不到xinput1_3.dll无法执行怎么办?电脑缺失xinput1_3.dll文件怎么修复?

当计算机提示找不到xinput1_3.dll文件&#xff0c;导致某些程序或游戏无法执行时&#xff0c;可以采取以下步骤来修复这个问题&#xff1a; 一、了解xinput1_3.dll文件 xinput1_3.dll是Microsoft DirectX for Windows的控制模块&#xff0c;它包含了一组函数和数据结构&#…