uni-app开发经验分享十八：对接第三方h5

来源：cnblogs　　作者：林恒　　时间：2021/1/11 15:33:11　　对本文有异议

1.uni-app中对接第三方为了防止跳出app使用了webview

<template>
    <view>
        <web-view :src="url"  @message="message"></web-view>
    </view>
</template>
 
<script>
    export default {
        data() {
            return {
                url: ''
            }
        },
        onLoad(option) {
            // console.log(JSON.parse(decodeURIComponent(option.url)))
            this.url = JSON.parse(decodeURIComponent(option.url))//跳转第三方的url
        },
        methods:{
            message(e){    //接收html发回来的消息判断是否成功，然后跳转页面
                console.log(e.detail)
                uni.switchTab({
                    url: '/pages/member/user'
                });
            }
        }
    }
</script>

2.顺利的跳转到第三方的时候进行一些操作，例如支付等

3.地方支付成功后会有回调函数，进行一些操作

4.为了从第三方的h5跳回到app 写了个新的html页面

5.uni-app打包后会有static文件夹所以将页面放到static文件夹中

<!DOCTYPE html>
<html>
    
    <head>
        <title>正在返回...</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>//不引入的话不能进行监听
        <script>
            function load(){
                // alert("测试")
                let local = window.location.href; 
                // alert(local)
                console.log(local)
                let sourceType = getQueryVariable('sourceType');//传参得值
                let env = getQueryVariable('env');/传参得值
                
                
              
                    document.addEventListener('UniAppJSBridgeReady', function() {
                           uni.postMessage({   //监听向uni-app发消息
                               data: {
                                   action: 'success'
                               }
                           }); 
                       })
            }
            function getQueryVariable(variable) //通过url获取参数
            {
                   var query = window.location.search.substring(1);
                   var vars = query.split("&");
                   for (var i=0;i<vars.length;i++) {
                           var pair = vars[i].split("=");
                           if(pair[0] == variable){return pair[1];}
                   }
                   return(false);
            }
        </script>
    </head>
    <body οnlοad="load()">
    </body>
</html>