uni-app中web-view打开三方界面并跳转小程序相关页面
最近在项目中遇到这么一个需求，需要在小程序中跳转第三方界面，认证通过后跳转三方界面，整理了一下代码，做个记录
1.小程序中新建一个vue文件用作承载web-view
<template>
<view>
<web-view :src="url"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
url:''
}
},
onLoad(e) {// 获取传递过来的链接
this.url = JSON.parse(decodeURIComponent(e.url))
},
}
</script>
<style>
page{
background: #ffffff;
}
</style>
2.跳转之后第三方页面如下图所示：
点击确认授权，然后在后台接口中返回一个html文件，这个html文件是在后台代码中写的，html文件内容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>网络网页</title>
<style type="text/css">
.btn {
display: block;
/*background-color: #f4556b;*/
border: none;
width: 40%;
margin: 30px auto;
color: #fff;
text-align: center;
border-radius: 50px;
height:50px;
font-size:20px;
letter-spacing: 1px;
background-image: linear-gradient(#fea1ae,#f55c71);
}
.desc {
padding: 10px;
color: #333333;
width: 100%;
font-size: 22px;
text-align: center;
}
.shouquan{
display: block;
width: 70%;
margin: 50px auto 30px;
}
</style>
</head>
<body>
<input id="order_id" value="{{order_id}}" style="display:none">
<img src="/static/images/shouquan.png" class="shouquan">
<p class="desc">恭喜您已经授权成功 !</p>
<div class="btn-list">
<button class="btn" type="button" data-action="redirectTo">立即发货</button>
</div>
<script type="text/javascript">
var userAgent = navigator.userAgent;
if (userAgent.indexOf('AlipayClient') > -1) {
// 支付宝小程序的 JS-SDK 防止 404 需要动态加载，如果不需要兼容支付宝小程序，则无需引用此 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>');
}
// if (!/toutiaomicroapp/i.test(userAgent)) {
// document.querySelector('.post-message-section').style.visibility = 'visible';
// }
</script>
<!-- uni 的 SDK -->
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
<script type="text/javascript">
// 待触发 `UniAppJSBridgeReady` 事件后，即可调用 uni 的 API。
// webView.setBackgroundColor(0);//设置背景色
// webView.getBackground().setAlpha(0);//设置填充透明度（布局中一定要设置background，不然getbackground会是null）
document.addEventListener('UniAppJSBridgeReady', function() {
var orderId = document.getElementById('order_id').value;
console.log(orderId)
uni.postMessage({
data: {
action: 'message'
}
});
uni.getEnv(function(res) {
console.log('当前环境：' + JSON.stringify(res));
});
document.querySelector('.btn-list').addEventListener('click', function(evt) {
document.body.style.backgroundColor = '#3333';
var target = evt.target;
if (target.tagName === 'BUTTON') {
var action = target.getAttribute('data-action');
switch (action) {
case 'switchTab':
uni.switchTab({
url: '/pages/tabBar/API/API'
});
break;
case 'reLaunch':
uni.reLaunch({
url: '/pages/tabBar/component/component'
});
break;
case 'navigateBack':
uni.navigateBack({
delta: 1
});
break;
default:
uni[action]({
url: '/pages/order/chooseShansong?data='+orderId
});
break;
}
}
});
// document.getElementById('postMessage').addEventListener('click', function() {
// uni.postMessage({
// data: {
// action: 'message'
// }
// });
// });
});
</script>
</body>
</html>
然后就完成啦！
亲测可用哦，欢迎大家一起分享讨论哦
浙公网安备 33010602011771号