uniapp中app与webview的通讯代码示例

更新时间：2024年03月16日 11:44:22 作者：姜饼人code

这篇文章主要给大家介绍了关于uniapp中app与webview通讯的相关资料,这里的通信主要是打包APP端和web-view内嵌网页的双向通信,文中通过代码介绍的非常详细,需要的朋友可以参考下

1.app->webview

app发送

此处使用evalJS方法

<template>
<web-view src="../../static/chat2.html"></web-view>
<button @click="chatRes">生成评估总结</button>
</template>
<script>
methods:{
   chatRes() {
		let str="需要发送的信息"
		const _funName = 'msgFromUniapp'
		const _data = {
			msg: str
		};
		const currentWebview = this.$scope.$getAppWebview().children()[0];
		currentWebview.evalJS(`${_funName}(${JSON.stringify(_data)})`);
		},
}
</script>

webview接收

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>评测记录</title>
	</head>
	<body>
	</body>
	<script type="text/javascript" src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.3/index.js"></script>
	<script>
		let msg=''
		window.msgFromUniapp = function(arg) {
			msg=arg.msg
			console.log(msg);
		}
		
	</script>
</html>

2.webview->app

webview发送

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>评测记录</title>
	</head>
	<body>
		
	</body>
	<script type="text/javascript" src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.3/index.js"></script>
	<script>
		const sendMsg = () => { 
            let str="待发送的信息"
			uni.postMessage({
				data: {
					msgContent:str
				}
			})
		}
	</script>
</html>

app接收

<template>
<web-view @message="handlerMessage" src="../../static/chat2.html"></web-view>
</template>
<script>
methods:{
    handlerMessage(event) {
		console.log(event.detail.data[0])
	},
}
</script>

3.踩坑记录

webview使用uni.postMessage发送消息给app时报uni.postMessage is not a function

解决方案

取消引入官方库uni-webview-js
改写uni为y_uni，调用y_uni.postMessage

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>评测记录</title>
	</head>
	<body>
		
	</body>
	<script>
		let y_uni;
		! function(e, n) {
			y_uni = n();
			return
			console.log(4777)
			console.log(n())
			"object" == typeof exports && "undefined" != typeof module ? module.exports = n() : "function" == typeof define &&
				define.amd ? define(n) : (e = e || self).y_uni = 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 r() {
				return window.__dcloud_weex_postMessage || window.__dcloud_weex_
			}
			var o = function(e, n) {
					var i = {
						options: {
							timestamp: +new Date
						},
						name: e,
						arg: n
					};
					if (r()) {
						if ("postMessage" === e) {
							var o = {
								data: [n]
							};
							return window.__dcloud_weex_postMessage ? window.__dcloud_weex_postMessage(o) : window
								.__dcloud_weex_.postMessage(JSON.stringify(o))
						}
						var a = {
							type: "WEB_INVOKE_APPSERVICE",
							args: {
								data: i,
								webviewIds: t
							}
						};
						window.__dcloud_weex_postMessage ? window.__dcloud_weex_postMessageToService(a) : window
							.__dcloud_weex_.postMessageToService(JSON.stringify(a))
					}
					if (!window.plus) return window.parent.postMessage({
						type: "WEB_INVOKE_APPSERVICE",
						data: i,
						pageId: ""
					}, "*");
					if (0 === t.length) {
						var d = plus.webview.currentWebview();
						if (!d) throw new Error("plus.webview.currentWebview() is undefined");
						var s = d.parent(),
							w = "";
						w = s ? s.id : d.id, t.push(w)
					}
					if (plus.webview.getWebviewById("__uniapp__service")) plus.webview.postMessageToUniNView({
						type: "WEB_INVOKE_APPSERVICE",
						args: {
							data: i,
							webviewIds: t
						}
					}, "__uniapp__service");
					else {
						var u = JSON.stringify(i);
						plus.webview.getLaunchWebview().evalJS('UniPlusBridge.subscribeHandler("'.concat(
							"WEB_INVOKE_APPSERVICE", '",').concat(u, ",").concat(JSON.stringify(t), ");"))
					}
				},
				a = {
					navigateTo: function() {
						var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
							n = e.url;
						o("navigateTo", {
							url: encodeURI(n)
						})
					},
					navigateBack: function() {
						var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
							n = e.delta;
						o("navigateBack", {
							delta: parseInt(n) || 1
						})
					},
					switchTab: function() {
						var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
							n = e.url;
						o("switchTab", {
							url: encodeURI(n)
						})
					},
					reLaunch: function() {
						var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
							n = e.url;
						o("reLaunch", {
							url: encodeURI(n)
						})
					},
					redirectTo: function() {
						var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {},
							n = e.url;
						o("redirectTo", {
							url: encodeURI(n)
						})
					},
					getEnv: function(e) {
						r() ? e({
							nvue: !0
						}) : window.plus ? e({
							plus: !0
						}) : e({
							h5: !0
						})
					},
					postMessage: function() {
						var e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {};
						o("postMessage", e.data || {})
					}
				},
				d = /uni-app/i.test(navigator.userAgent),
				s = /Html5Plus/i.test(navigator.userAgent),
				w = /complete|loaded|interactive/;
			var u = window.my && navigator.userAgent.indexOf(["t", "n", "e", "i", "l", "C", "y", "a", "p", "i", "l",
				"A"
			].reverse().join("")) > -1;
			var g = window.swan && window.swan.webView && /swan/i.test(navigator.userAgent);
			var v = window.qq && window.qq.miniProgram && /QQ/i.test(navigator.userAgent) && /miniProgram/i.test(
				navigator.userAgent);
			var c = window.tt && window.tt.miniProgram && /toutiaomicroapp/i.test(navigator.userAgent);
			var m = window.wx && window.wx.miniProgram && /micromessenger/i.test(navigator.userAgent) &&
				/miniProgram/i
				.test(navigator.userAgent);
			var p = 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 _ = window.jd && window.jd.miniProgram && /micromessenger/i.test(navigator.userAgent) &&
				/miniProgram/i
				.test(navigator.userAgent);
			var E = window.xhs && window.xhs.miniProgram && /xhsminiapp/i.test(navigator.userAgent);
			for (var h, P = function() {
					window.UniAppJSBridge = !0, document.dispatchEvent(new CustomEvent("UniAppJSBridgeReady", {
						bubbles: !0,
						cancelable: !0
					}))
				}, b = [function(e) {
					if (d || s) return window.__dcloud_weex_postMessage || window.__dcloud_weex_ ? document
						.addEventListener("DOMContentLoaded", e) : window.plus && w.test(document
							.readyState) ? setTimeout(e, 0) : document.addEventListener("plusready", e), a
				}, function(e) {
					if (m) return window.WeixinJSBridge && window.WeixinJSBridge.invoke ? setTimeout(e, 0) :
						document.addEventListener("WeixinJSBridgeReady", e), window.wx.miniProgram
				}, function(e) {
					if (v) return window.QQJSBridge && window.QQJSBridge.invoke ? setTimeout(e, 0) : document
						.addEventListener("QQJSBridgeReady", e), window.qq.miniProgram
				}, function(e) {
					if (u) {
						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 (g) return document.addEventListener("DOMContentLoaded", e), window.swan.webView
				}, function(e) {
					if (c) 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) {
					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 (_) return window.JDJSBridgeReady && window.JDJSBridgeReady.invoke ? setTimeout(e, 0) :
						document.addEventListener("JDJSBridgeReady", e), window.jd.miniProgram
				}, function(e) {
					if (E) return window.xhs.miniProgram
				}, function(e) {
					return document.addEventListener("DOMContentLoaded", e), a
				}], y = 0; y < b.length && !(h = b[y](P)); y++);
			h || (h = {});
			var B = "undefined" != typeof y_uni ? y_uni : {};
			if (!B.navigateTo)
				for (var S in h) i(h, S) && (B[S] = h[S]);
			return B.webView = h, B
		}));
		
		const sendMsg = async () => {
			let str="待发送的信息"
			y_uni.postMessage({
				data: {
					msgContent:str
				}
			})
		}
	</script>
</html>

总结

到此这篇关于uniapp中app与webview通讯的文章就介绍到这了,更多相关uniapp app与webview通讯内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

webpack搭建vue环境时报错异常解决
这篇文章主要介绍了webpack搭建vue环境时报错异常解决,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
2021-09-09
Vue3组件Ref打印Proxy(Object)与defineExpose使用及说明
Vue3中,通过ref获取子组件实例时,显示为Proxy(Object)而非原始对象,这是由于Vue3的响应式系统使用Proxy实现数据劫持,为了显式控制组件暴露的API,Vue3引入了defineExpose,结合TypeScript,可以安全地定义和管理组件的公共API
2025-10-10
vue项目中使用mapbox地图切换底图的详细教程
最近开始入坑前端mapbox地图,跟大家一起慢慢深入学习,下面这篇文章主要给大家介绍了关于vue项目中使用mapbox地图切换底图的详细教程,文中给出了详细的实例代码,需要的朋友可以参考下
2023-04-04
深入了解Vue组件七种通信方式
vue组件通信的方式，这是在面试中一个非常高频的问题。其实Vue组件的通信方式除了props和 $emit还有很多，本文将对vue组件通信方式进行一下总结，感兴趣的可以学习一下
2021-12-12
三分钟让你快速学会axios在vue项目中的基本用法(推荐!)
Axios是一个基于Promise用于浏览器和nodejs的HTTP客户端,下面这篇文章主要给大家介绍了如何通过三分钟让你快速学会axios在vue项目中的基本用法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-04-04
详解Vite+JavaScript+Vue+Yarn实现登录页面实战
本文主要介绍了Vite+JavaScript+Vue+Yarn实现登录页面实战,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
2025-07-07
Element中Select选择器的实现
本文主要介绍了Element中Select选择器的实现，文中根据实例编码详细介绍的十分详尽，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
关于Vue.js一些问题和思考学习笔记（1）
这篇文章主要为大家分享了关于Vue.js一些问题和思考的学习笔记,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
Jenkins+docker容器部署前端Vue项目的完整步骤记录
Jenkins是一个开源软件项目,是基于Java开发的一种持续集成工具,用于监控持续重复的工作,旨在提供一个开放易用的软件平台,使软件项目可以进行持续集成,这篇文章主要介绍了Jenkins+docker容器部署前端Vue项目的完整步骤,需要的朋友可以参考下
2026-01-01
vue.js全局组件和局部组件示例代码
组件是Vue.js的最核心的功能,所谓的组件化就是把页面拆分成多个组件,每个组件单独使用CSS,JS,模板,图片等资源进行开发与维护,然后在制作网页的时候根据需要调用相关的组件,这篇文章主要给大家介绍了关于vue.js全局组件和局部组件的相关资料,需要的朋友可以参考下
2022-12-12

uniapp中app与webview的通讯代码示例

目录

1.app->webview

2.webview->app

3.踩坑记录

总结

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具