uni-app開發經驗分享十八：對接第三方h5

時間 2021-01-12

標籤 javascript html java web app 函數 post 測試 this 欄目 JavaScript 简体版

原文原文鏈接

1.uni-app中對接第三方爲了防止跳出app使用了webviewjavascript

<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.順利的跳轉到第三方的時候進行一些操做，例如支付等html

3.地方支付成功後會有回調函數，進行一些操做java

4.爲了從第三方的h5跳回到app 寫了個新的html頁面web

5.uni-app打包後會有static文件夾因此將頁面放到static文件夾中app

<!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>