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

发布时间:2021-01-12 发布网站:前端之家 F2er.com
前端之家收集整理的这篇文章主要介绍了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>

总结


以上是前端之家为你收集整理的uni-app开发经验分享十八:对接第三方h5全部内容,希望文章能够帮你解决uni-app开发经验分享十八:对接第三方h5所遇到的程序开发问题。

如果觉得前端之家网站内容还不错,欢迎将前端之家网站推荐给前端开发程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。