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>
  • 相关阅读:
    Spring MVC Ajax 嵌套表单数据的提交
    Spring MVC 过滤静态资源访问
    Spring MVC 页面跳转时传递参数
    IDEA Maven 三层架构 2、运行 springMVC
    IDEA Maven 三层架构 1、基本的Archetype 搭建
    EasyUI DataGrid 基于 Ajax 自定义取值(loadData)
    Spring MVC Ajax 复杂参数的批量传递
    Mybatis Sql片段的应用
    在 Tomcat 8 部署多端口项目
    自动升级的设计思路与实现
  • 原文地址:https://www.cnblogs.com/smileZAZ/p/14262149.html
Copyright © 2011-2022 走看看