监听“返回首页”按钮消息:
<web-view :src="src" @message="getMessage"></web-view>
接收到消息处理:
getMessage(event){
uni.switchTab({
url: '/pages/index/index'
});
},
html代码:
<!DOCTYPE html>
<html lang="en" style="margin:0">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>支付</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<!-- 微信 JS-SDK 如果不需要兼容小程序,则无需引用此 JS 文件。 -->
<script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<!-- uni 的 SDK,必须引用。 -->
<script type="text/javascript" src="//js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js"></script>
<script type="text/javascript">
var userAgent = navigator.userAgent.toLowerCase();
document.addEventListener('UniAppJSBridgeReady', function() {
document.querySelector('#toOrder').addEventListener('click', function(evt) {
if(userAgent.match(/MicroMessenger/i) == 'micromessenger'){
location.href = $("#orderUrlH5").val();
}else{
try{
uni.postMessage({
data: {
action: 'order'
}
});
} catch(err){
location.href = $("#orderUrlH5").val();
}
}
});
document.querySelector('#toIndex').addEventListener('click', function(evt) {
if(userAgent.match(/MicroMessenger/i) == 'micromessenger'){
location.href = $("#indexUrlH5").val();
}else{
try{
uni.postMessage({
data: {
action: 'index'
}
});
} catch(err){
location.href = $("#indexUrlH5").val();
}
}
});
});
</script>
</head>
<style>
.pay_main{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1000;
padding: 50px;
}
.spinner-text{
font-size: 20px;
}
.text-center{
text-align: center;
}
.d-none{
display: none;
}
.success-icon{
width: 80px;
height: 80px;
}
.flex{
display: flex;
justify-content: center;
}
.btn{
width: 100px;
line-height: 40px;
text-align: center;
font-size: 12px;
color: #fff;
background-color: #06D291;
border-radius: 5px;
margin-right: 10px;
margin-top: 40px;
}
</style>
<body>
<div class="pay_main">
<input class="d-none" id="orderUrlH5" th:value="${orderUrlH5}" />
<input class="d-none" id="indexUrlH5" th:value="${indexUrlH5}" />
<div class="text-center">
<image th:src="@{/images/success.png}" class="success-icon" />
<div class="spinner-text">支付成功</div>
<div class="text-center flex">
<div class="btn" id="toOrder">查看订单</div>
<div class="btn" id="toIndex">返回首页</div>
</div>
</div>
</div>
</body>
</html>