webvie加载本地html或远程html与uniapp项目之间的通讯

菜方方

于 2024-06-28 11:13:09 发布

阅读量308

点赞数 7

分类专栏： uniapp 文章标签： html uni-app 前端

本文链接：https://blog.csdn.net/qq_46872379/article/details/140037139

版权

uniapp 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

最近遇到的新需求是uniapp项目接入stripe支付，我使用得到checkout（前端只需要去加载后端返回的支付表单 url ）方式，需要后端设置successUrl和cancelUrl，即支付成功和取消支付之后跳转的界面，那完成该跳转之后是不是得返回到原app内呢，所以需要远程网页和uni内部通讯，我尝试了很多方法（如postMessage，顶层message监听等）都未能监听到网页想webView发送的消息，最后才发现需要用这种方式来操作：

远程或本地界面：
需要引入 uni.webview.js 版本使用 1.5.2 不要使用 0.1.52，

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Payment Canceled</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            background-color: #f8f8f8;
        }
        .success-container {
            text-align: center;
        }
        .success-icon {
            width: 80px;
            height: 80px;
            margin-bottom: 20px;
        }
        .success-message {
            font-size: 24px;
            color: #333;
            margin-bottom: 20px;
        }
        .success-detail {
            font-size: 16px;
            color: #666;
            margin-bottom: 20px;
        }
        .return-message {
            font-size: 14px;
            color: #999;
        }
    </style>
    <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
</head>
<body>
<div class="success-container">
    <img class="success-icon" src="./img/cancel.png" alt="Cancel Icon">
    <div class="success-message">支付取消</div>
    <div class="success-detail">您的支付已取消</div>
    <div class="return-message">即将返回应用</div>
</div>
<script>
	// function closeWebView() {
	// 	// window.history.back();
	// 	window.parent.postMessage({ action: 'close' }, '*');
	// }
	// document.addEventListener('DOMContentLoaded', () => {
	// 	console.log('准备向外部发送消息')
	// 	setTimeout(closeWebView, 1000);  // 延迟1秒关闭
	// });
	document.addEventListener('UniAppJSBridgeReady', function() {
		console.log('环境准备')
		uni.getEnv(function(res) {
			console.log('当前环境：' + JSON.stringify(res));
		});
		let message = {
			action: 'close'
		}
		//app、H5（貌似也支持了）
		uni.postMessage({
			data: message
		});
		//一般用于H5端发送消息
		//window.postMessage(message, '*')
	});
</script>
</body>
</html>

uniapp界面接收消息：

//假设你的远程网页地址为 192.168.1.10:8888/appText/cancel.html

<web-view
    :fullscreen="true"
    :src="192.168.1.10:8888/appText/cancel.html"
    @message="handleWebViewMessage"
></web-view>

//接收远程网页发送的消息

handleWebViewMessage(event){
    console.log(event.detail.data[0].action,'event.detail')
    const message = event.detail.data[0];
    if (message.action === 'close') {
        //处理支付取消逻辑,例如跳转到成功页面
        uni.navigateTo({
            url: '/pages/Wallet/Wallet'
        });
     }
},

后续会更新前端如何接入stripe 海外支付，敬请期待~

参考文献：在web-view加载的本地及远程HTML中调用uni的API及网页和vue页面通讯