uniapp中H5端和APP端与webview实现双向通讯

已于 2023-07-07 16:18:26 修改
阅读量3.6k 收藏 8
点赞数 3
分类专栏： uniapp 文章标签： uni-app
于 2023-07-07 16:10:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46331416/article/details/131597866
版权

目前遇到个需求：用uniapp开发app和H5，另外起一个项目打包成模版单页(减少app更新)，在应用内用webview嵌入模版单页

1、先在单页项目中引入web-view-custom.js

  • 之前发现在网上说是直接引入<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.1.js"></script>但是调用uni.postMessage()会报错
  • 查找原因如下
    1. 使用uniapp项目写H5 webview，使用hello uniapp的模板，按照webview文档里的源码往template.h5.html里面写入相关内容。
    2. 引入的https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js脚本，它这个地方是个坑。你要手动改源码。uni.webview.js文件里面注册的就是uni对象。被uniapp项目自带的uni对象覆盖了，我就是把源码里面注册uni对象换了个名字（webUni）就好了。
  • 下边会提供自定义的web-view-custom.js，可以直接使用webUni.postMessage方法。
    在这里插入图片描述

2、App项目与webview

1. 利用原生直接创建webview

APP

template

	<view class="webview">
		<!-- #ifdef H5 -->
		<web-view :src="url" @message="message" class="addddddddddddd" :webview-styles="{'padding-top':'44px'}"></web-view>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<!-- <web-view :src="url" @message="getMessage" class="app" :webview-styles="{'padding-top':'44px'}"></web-view> -->
		<!-- #endif -->
	</view>

script

// #ifdef APP-PLUS
var that = this;
that.statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
var link = this.url;
var w = plus.webview.create(
	link, 
	'batch_view',
	{
		top: uni.getSystemInfoSync().statusBarHeight + 44,//放置在titleNView下方。如果还想在webview上方加个地址栏的什么的，可以继续降低TOP值
		//因为设置top之后 webview的高度依然不变会往下移 底部会被遮住  所以设置一下高度
		height: uni.getSystemInfoSync().windowHeight - 44 - uni.getSystemInfoSync().statusBarHeight,
	},//不用data
	{
	preload: 'preload webview'
	},
); // 可直接通过以下方法获取preload值
var currentWebview = this.$mp.page.$getAppWebview() //获取当前页面的webview对象
currentWebview.append(w); //一定要append到当前的页面里！！！才能跟随当前页面一起做动画，一起关闭

// 监听webview里边的页面的postMessage
plus.globalEvent.addEventListener('plusMessage', function(msg) {
    console.log('//web传来的参数',msg.data.args.data)//web传来的参数
	let teamShare = msg.data.args.data
    if ((JSON.stringify(teamShare) !== "{}")) {
		that.title = teamShare.arg.teamShare.title
		that.description = teamShare.arg.teamShare.description
		that.image = teamShare.arg.teamShare.image
		that.teamCode = teamShare.arg.teamShare.teamCode
		console.log('最终//web传来的参数',that.title,that.description,that.teamCode)//web传来的参数
	} 
})
// #endif
webview中的里边的页面
// 这是webview中一个点击按钮，触发以下代码即可
webUni.postMessage({
	data: {
		teamShare:{
			title:title,
			description:description,
			image:image,
			teamCode:teamCode
		}
	}
})

3、直接用webview组件

App

template

	<view class="webview">
		<!-- #ifdef H5 -->
		<web-view :src="url" @message="message" class="addddddddddddd" :webview-styles="{'padding-top':'44px'}"></web-view>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<web-view :src="url" @message="getMessage" class="app" :webview-styles="{'padding-top':'44px'}"></web-view>
		<!-- #endif -->
	</view>

script

getMessage(msg){
	console.log('webview传来的消息',msg)
},

注意：message一般放在以下情况中，放在method会出现一些问题，分享初始化一般直接放在onLoad
在这里插入图片描述

webview中的里边的页面
// 这是webview中一个点击按钮，触发以下代码即可
webUni.postMessage({
	data: {
		teamShare:{
			title:title,
			description:description,
			image:image,
			teamCode:teamCode
		}
	}
})

3、H5项目与webview

H5项目

template

	<view class="webview">
		<!-- #ifdef H5 -->
		<web-view :src="url" @message="message" class="addddddddddddd" :webview-styles="{'padding-top':'44px'}"></web-view>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<!-- <web-view :src="url" @message="getMessage" class="app" :webview-styles="{'padding-top':'44px'}"></web-view> -->
		<!-- #endif -->
	</view>

script

// #ifdef H5
let that = this
window.addEventListener('message', (msg) => {
	console.log('H5与webview之间的通信2', msg.data.data)
	let teamShare = msg.data.data
	if ((JSON.stringify(teamShare) !== "{}")) {
		that.title =teamShare.arg ? teamShare.arg.teamShare.title:that.title
		that.description = teamShare.arg ? teamShare.arg.teamShare.description:that.description
		that.image = teamShare.arg ? teamShare.arg.teamShare.image:that.image
		console.log('最终//web传来的参数',that.title,that.description,that.teamCode)//web传来的参数
	} 
})
let H5shareUrl = this.teamCode ? `${window.location.href}&teamCode=${this.teamCode}` : `${window.location.href}`
this.initShare({
	title: `赶快来参与${this.title}`, // 分享标题
	desc: this.description, // 分享描述
	//#ifdef H5
	link:  H5shareUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
	//#endif 
	imgUrl: this.image, // 分享图标
	inviteCode:this.code
})
// #endif
webview中的里边的页面
// 这是webview中一个点击按钮，触发以下代码即可
webUni.postMessage({
	data: {
		teamShare:{
			title:title,
			description:description,
			image:image,
			teamCode:teamCode
		}
	}
})

4、web-view-custom.js

! 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 t(e, t) {
		return n.call(e, t)
	}
	var i = [],
		a = function(e, n) {
			var t = {
				options: {
					timestamp: +new Date
				},
				name: e,
				arg: n
			};
			if (window.__dcloud_weex_postMessage || window.__dcloud_weex_) {
				if ("postMessage" === e) {
					var a = {
						data: [n]
					};
					return window.__dcloud_weex_postMessage ? window.__dcloud_weex_postMessage(a) : window
						.__dcloud_weex_.postMessage(JSON.stringify(a))
				}
				var o = {
					type: "WEB_INVOKE_APPSERVICE",
					args: {
						data: t,
						webviewIds: i
					}
				};
				window.__dcloud_weex_postMessage ? window.__dcloud_weex_postMessageToService(o) : window
					.__dcloud_weex_.postMessageToService(JSON.stringify(o))
			}
			if (!window.plus) return window.parent.postMessage({
				type: "WEB_INVOKE_APPSERVICE",
				data: t,
				pageId: ""
			}, "*");
			if (0 === i.length) {
				var r = plus.webview.currentWebview();
				if (!r) throw new Error("plus.webview.currentWebview() is undefined");
				var d = r.parent(),
					s = "";
				s = d ? d.id : r.id, i.push(s)
			}
			if (plus.webview.getWebviewById("__uniapp__service")) plus.webview.postMessageToUniNView({
				type: "WEB_INVOKE_APPSERVICE",
				args: {
					data: t,
					webviewIds: i
				}
			}, "__uniapp__service");
			else {
				var w = JSON.stringify(t);
				plus.webview.getLaunchWebview().evalJS('UniPlusBridge.subscribeHandler("'.concat(
					"WEB_INVOKE_APPSERVICE", '",').concat(w, ",").concat(JSON.stringify(i), ");"))
			}
		},
		o = {
			navigateTo: function() {
				var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
					n = e.url;
				a("navigateTo", {
					url: encodeURI(n)
				})
			},
			navigateBack: function() {
				var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
					n = e.delta;
				a("navigateBack", {
					delta: parseInt(n) || 1
				})
			},
			switchTab: function() {
				var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
					n = e.url;
				a("switchTab", {
					url: encodeURI(n)
				})
			},
			reLaunch: function() {
				var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
					n = e.url;
				a("reLaunch", {
					url: encodeURI(n)
				})
			},
			redirectTo: function() {
				var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
					n = e.url;
				a("redirectTo", {
					url: encodeURI(n)
				})
			},
			getEnv: function(e) {
				window.plus ? e({
					plus: !0
				}) : e({
					h5: !0
				})
			},
			postMessage: function() {
				var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {};
				a("postMessage", e.data || {})
			}
		},
		r = /uni-app/i.test(navigator.userAgent),
		d = /Html5Plus/i.test(navigator.userAgent),
		s = /complete|loaded|interactive/;
	var w = window.my && navigator.userAgent.indexOf("AlipayClient") > -1;
	var u = 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 g = window.tt && window.tt.miniProgram && /toutiaomicroapp/i.test(navigator.userAgent);
	var v = window.wx && window.wx.miniProgram && /micromessenger/i.test(navigator.userAgent) && /miniProgram/i
		.test(navigator.userAgent);
	var p = window.qa && /quickapp/i.test(navigator.userAgent);
	for (var l, _ = function() {
			window.UniAppJSBridge = !0, document.dispatchEvent(new CustomEvent("UniAppJSBridgeReady", {
				bubbles: !0,
				cancelable: !0
			}))
		}, f = [function(e) {
			if (r || d) return window.__dcloud_weex_postMessage || window.__dcloud_weex_ ? document
				.addEventListener("DOMContentLoaded", e) : window.plus && s.test(document
					.readyState) ? setTimeout(e, 0) : document.addEventListener("plusready", e), o
		}, function(e) {
			if (v) 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 (w) {
				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 (u) return document.addEventListener("DOMContentLoaded", e), window.swan.webView
		}, function(e) {
			if (g) return document.addEventListener("DOMContentLoaded", e), window.tt.miniProgram
		}, function(e) {
			if (p) {
				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) {
			return document.addEventListener("DOMContentLoaded", e), o
		}], m = 0; m < f.length && !(l = f[m](_)); m++);
	l || (l = {});
	var E = "undefined" != typeof webUni ? webUni : {};
	if (!E.navigateTo)
		for (var b in l) t(l, b) && (E[b] = l[b]);
	return E.webView = l, E
}));
uniapp - 如何跟内嵌 web-view 组件内的网页交互，与 web-view 内嵌网页进行双向通信（uniapp 与 webview 网页之间的 “相互“ 传值）提供详细的示例代码及解决方案
高级前端工程师
02-08 5125
uni-app如何实现在H5环境中与web-view中的网页交互通讯uniappuni-app 与 web-view内嵌网页 双向通信 如何跟内嵌web-view交互uniappAPP与webview子页面交互uniappAPP与webview子页面交互关于uni-app 使用 web-view 页面之间互相跳转、通信等问题uniapp的web-view嵌入网页,网页与uniapp通信webview如何与uniapp写的H5页面交互嵌套webview调用uniapp各种API组件实现H5和app通讯和交互
uniapp实现与webview之间的相互通讯
最新发布
Story_0809的博客
09-30 1839
情况一：app嵌套h5（app、h5均用uniapp开发）情况二：app嵌套h5（h5用vue或react开发）情况三：h5嵌套h5（均用uniapp开发）
uniapp（H5 和 App） 与 Web 端，完整代码，真正解决通信问题
微光无限的博客
01-10 2253
uniapp（H5 和 App） 与 Web 端，完整代码，真正解决通信问题
Uni-app web-view相互通信方法（简单易懂）
qq_43426246的博客
01-04 2960
第一种方法：H5端通过引入的方式使用uni提供的方法第二种：直接前往文件所在地进行下载，然后引入使用。或 直接复制上面的https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.1.js 这条地址直接保存成js文件使用效果一样。
uniapp webview和H5通信的三种方式
wangqiuwei07的专栏
10-07 2610
uniapp可以打包成多个端，再和H5通信的方式中，涉及到uniapp和H5通信，APP和H5通信，小程序和H5通信。其中的h5端分为非uniapp打包的h5和uniapp打包的h5,这两者的区别其实就是uniapp的h5里面已经有了uni这个定义，所以不能再uniapp里面直接用官方提供的那个js需要重新定义js里面的定义。
uni-app 之 web-view 与h5 通讯
C_see的专栏
11-29 3107
uniapp中使用webview，h5与vue、nvue通信注意事项
【uni-app】App与webview双向实时通信
Assa_ss的博客
06-01 4215
在 Uniapp 中，App 与 里面嵌入的 webview 进行双向的实时通信vue2 ， 模拟器主要分为两部分webview 向 app 发送信息app 向 webview 发送信息以下是实现方式，用一个例子来说明（文章最后我会放这个例子的github地址）
uniapp(h5 app) 中 webview和h5通信
dante_777的博客
05-22 648
h5 index.html中 引入<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js">console.log('uniapp接收的数据', e.detail.data[0].name)console.log('收到的cocos游戏ID',e.data)uni.webView.postMessage({ data: { } }) 发送。
uniapp的nvue与webview的交互
dream_wx的博客
09-11 1579
【代码】uniapp的nvue与webview的交互。
uni-app App web-view与应用间交互
weixin_46919753的博客
11-30 679
在使用uni-app打包app的过程中使用到一个h5的页面，项目中使用了web-view来进行加载，但是在web-view中链接有重定向，导致了返回的时候第一次返回了一个空白页面，第二次才能返回到app列表页面，看到网上很多这种问题，官方没有给到解决办法。action中就是需要给app发送的值，这里根据实际情况自行定，我这个status是定义了一个变量，根据不同的变量跳转到不同的页面去。我这里是由于是内网部署，所以我将js下载到了本地，在web-view页面项目中加载sdk。在入口的html页面加载js。
（uniapp框架）手动封装webview页面与App交互sdk
01-30
在这个特定的场景中，我们关注的是如何手动封装一个Webview页面与App的交互SDK，以便实现H5页面与原生App之间的通信。这个过程涉及到的关键技术包括uniApp的API调用、JavaScript接口（JSSDK）的构建以及事件的处理。...
跨平台应用开发进阶(十七) ：uni-app 内嵌 H5 应用并实现双端通信_uniappjsbridgeready
2401_84447207的博客
05-04 1050
前端字节跳动真题解析开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】[外链图片转存中…(img-NpDoqHyv-1714765330682)]
uniapp - 最新详细实现web-view网页与安卓苹果App端之间互相通信功能，苹果app/安卓app平台与内嵌webview组件内的网页进行相互传值，内置网页与app双向实时通信，详细示例代码
王佳斌
09-14 3149
uni-app，Android安卓，苹果ios，app，内嵌webview，第三方H5网页，app和web-view通信传值，web-view引入的页面向App主应用传递数据，App端与webview端相互通信，App端和H5端webview之间的通信，uniapp实现webview和APP之间的传值通信，如何互相传递对象数据，数据传递了接收不到，web-view页面向app内发送消息，监听传递的参数，uni-app和web-view页面相互传参，报错怎么办，跨域，屏幕空白出错，数据交互，解决手机物理返回按
跨平台应用开发进阶(十七) ：uni-app 内嵌 H5 应用并实现双端通信_uniappjsbridgeready(2)
2401_84447207的博客
05-04 1291
与html文件相关的cssjs等本地资源，同样放在这个目录下。这个hybrid目录不会被编译器编译，所以这里的不能放vue文件，而其他目录也不能放本地HTML文件。未来hybrid目录还会支持其他语言在uni-app的中的混合使用。
uni-app实现web-view和App之间的相互通信
徐同保的专栏
09-11 996
uni-app实现web-view和App之间的相互通信
uniapp 在app和小程序端使用webview进行数据交互
风花一世月
07-13 3656
结论：app端支持比较好可以做到实时传递，微信小程序支持比较差，小程序向url传参只能通过url，url向app传参需要特定时机(后退、组件销毁、分享、复制链接)触发才能收到消息。 以下是代码 app端(需要使用nvue) <template> <view class="webview-box"> <button style...
uniapp的webview和H5相互通讯
那片枫叶~
06-02 5142
uniapp的webview和H5相互通讯
uniapp与webview网页交互打开手机扫码
GhostPaints的博客
06-09 3464
uniapp与webview页面交互
uniapp vue3 webview app向h5传参
09-11
在uni-app（微信小程序、H5、App等多端统一开发框架）中，Vue3 Webview组件用于嵌入H5页面，并允许前端与原生应用交互。当你需要从App向H5页面传递参数时，可以采取以下步骤： 1. **设置Webview属性**： 在Vue组件中，配置Webview标签并指定URL，同时可以在`src`属性后面添加一个问号`?`，然后追加你要传递的键值对作为查询字符串，例如： ```html <uni-webview :src="url + '?param1=value1&param2=value2'"></uni-webview> ``` 2. **接收参数**： 在H5页面的JavaScript中，可以使用`window.location.search`获取到URL的查询部分，通过解析查询字符串，提取出传递的参数。例如： ```javascript var params = new URLSearchParams(window.location.search); var param1 = params.get('param1'); var param2 = params.get('param2'); ``` 3. **数据绑定与传递**： 如果你需要动态地传递参数，可以在Vue的data里定义对象，将参数绑定到这个对象上，然后通过`this.$route.query`在H5页面访问。 4. **双向数据绑定**： 如果你想要在Vue和H5之间实现双向数据绑定，可以借助uni-app提供的API如`uni.updatePageProps`将数据传递给webview，不过这通常应用于特定场景，不是常规做法。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值