uni-app中web-view打开三方界面并跳转小程序相关页面

四处溜达 發表於 2020-11-7 13:25:00

uni-app中web-view打开三方界面并跳转小程序相关页面

最近在项目中遇到这么一个需求，需要在小程序中跳转第三方界面，认证通过后跳转三方界面，整理了一下代码，做个记录
1.小程序中新建一个vue文件用作承载web-view
<div class="cnblogs_code">
<pre><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></pre>
</div>
2.跳转之后第三方页面如下图所示：
<img src="https://img2020.cnblogs.com/blog/1860986/202011/1860986-20201107132438818-940527356.png">
 
 
点击确认授权，然后在后台接口中返回一个html文件，这个html文件是在后台代码中写的，html文件内容如下：
<div class="cnblogs_code">
<pre><!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">
 class="desc">恭喜您已经授权成功 !
 <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>

<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({
 url: '/pages/order/chooseShansong?data='+orderId
 });
 break;
 }
 }
 });
 // document.getElementById('postMessage').addEventListener('click', function() {
 // uni.postMessage({
 // data: {
 // action: 'message'
 // }
 // });
 // });
 });
</script>
</body>
</html></pre>
</div>
然后就完成啦！
亲测可用哦，欢迎大家一起分享讨论哦 
来源：https://www.cnblogs.com/menxiaojin/p/13940740.html

頁: [1]

琼殿技术论坛's Archiver

uni-app中web-view打开三方界面并跳转小程序相关页面