zoukankan      html  css  js  c++  java
  • uni-app开发经验分享十八:对接第三方h5

    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>
  • 相关阅读:
    password
    bzoj 1458: 士兵占领
    国家集训队2011 happiness
    cogs 2051. 王者之剑
    uva 10779 Collectors Problem
    [Jxoi2012]奇怪的道路
    天神下凡
    藏宝图
    黑红树
    愤怒的小鸟
  • 原文地址:https://www.cnblogs.com/smileZAZ/p/14262149.html
Copyright © 2011-2022 走看看