欢迎光临
我的个人博客网站

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>

赞(0) 打赏
未经允许不得转载:张拓的天空 » uni-app开发经验分享十八:对接第三方h5
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏