快捷導(dǎo)航

uniapp實現(xiàn)APP、小程序與webview頁面間通訊的實現(xiàn)步驟

更新時間：2025年01月15日 09:42:22 作者：愛池魚的醬醬仔

這篇文章主要介紹了uniapp實現(xiàn)APP、小程序與webview頁面間通訊的實現(xiàn)步驟,在Uniapp開發(fā)的APP或小程序頁面中嵌入一個H5網(wǎng)頁,并實現(xiàn)H5頁面與APP之間的數(shù)據(jù)傳遞,需要的朋友可以參考下

1、首先需要兼容多端和App端，因此這里需要在h5項目的index.html文件引入多個js。
2、宿主tset.vue 需要在宿主APP或小程序嵌入webview頁面，使用@message方法進行監(jiān)聽h5頁面?zhèn)鬟f的數(shù)據(jù)（這里是個頁面demo，注意不能再帶有tab欄頁面嵌入webview）
3、index.htmlH5項目完整的在index.html引入代碼（我這里把uni.webview.1.55.js放在了/static/js目錄下）
4、h5test.vue 最后在H5單頁面測試給小程序或App發(fā)送消息（注意：給微信小程序發(fā)送消息必須使用jWeixin.miniProgram發(fā)送，給APP發(fā)送使用webUni）

打印效果：

注意：

總結(jié)

需求：

1、需要在Uniapp開發(fā)的APP或小程序頁面嵌入一個H5網(wǎng)頁，需要拿到H5給APP傳遞的數(shù)據(jù)。

2、并且這個H5是使用vue+vant開發(fā)的。（其實跟使用uniapp開發(fā)H5一樣）

實現(xiàn)步驟：

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 需要動態(tài)加載，如果不需要兼容支付寶小程序，則無需引用此 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方法進行監(jiān)聽h5頁面?zhèn)鬟f的數(shù)據(jù)（這里是個頁面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,'監(jiān)聽到H5發(fā)送的數(shù)據(jù)')
			}
		}
	}
</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>
		<!-- 引入微信小程序兼容文件，官網(wǎng)上還有其他平臺的兼容文件，這里只用了微信小程序，所以就不判斷環(huán)境了 -->
		<script type="text/javascript">
			var userAgent = navigator.userAgent;
			if (userAgent.indexOf('AlipayClient') > -1) {
				// 支付寶小程序的 JS-SDK 防止 404 需要動態(tài)加載，如果不需要兼容支付寶小程序，則無需引用此 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 + "http://" + hostName + pathName + '/static/js/uni.webview.1.5.5.js';
			if (!isHttps) { //如果本地環(huán)境
				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發(fā)送消息（注意：給微信小程序發(fā)送消息必須使用jWeixin.miniProgram發(fā)送，給APP發(fā)送使用webUni）

<template>
	<view>
		<button @click="goWebView" type="warn">給App或微信小程序發(fā)送消息</button>
	</view>
</template>

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

			}
		},
		methods: {
			goWebView() {//這里一套代碼 判斷給微信小程序發(fā)送還是給App發(fā)送信息
				if (typeof jWeixin !== 'undefined') {
					jWeixin.miniProgram.getEnv(function(res) {
						if (res) {
							jWeixin.miniProgram.postMessage({
								data: {
									action: '我是H5頁面給微信小程序發(fā)送的信息'
								}
							})
							jWeixin.miniProgram.navigateBack({
								delta: 1
							})
						}
					});
				} else {
					webUni.postMessage({
						data: {
							action: '我是H5頁面給APP發(fā)送的信息'
						}
					})
				}
			},
		}
	}
</script>

<style>

</style>

打印效果：

注意：

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

2、在index.html文件我已經(jīng)做了線上uni.webview.js文件路徑判斷，動態(tài)獲取你所在目錄。

這樣就大功告成了哈?。?！

總結(jié)

到此這篇關(guān)于uniapp實現(xiàn)APP、小程序與webview頁面間通訊的文章就介紹到這了,更多相關(guān)uniapp實現(xiàn)APP、小程序與webview通訊內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: