uniapp app端内嵌webview对接支付宝支付

标签：toast uniapp app 50% box replace let webview document

//app支付
const appRequestPayment = (orderInfo: string) => {
uni.navigateTo({
url: '跳转的路径?one=' + encodeURIComponent(JSON.stringify(orderInfo))
})
}

View Code

<view class="page">        
    <web-view :src="state.navUrl"></web-view>
</view>

View Code

<script setup lang="ts">
    import {
        onl oad,
        onReady,
        onHide,
        onUnload,
        onBackPress,
    } from '@dcloudio/uni-app';
    import {
        reactive,
        getCurrentInstance,
    } from 'vue'
    
    const state : any = reactive({
                //src目录下的hybrid目录新建html页面
        navUrl: '../../hybrid/html/xxx.html?data=',
        action: '',
        isShow: true,
        navHeight: 0,
    })
    onl oad((options : {
        one : string,
    }) => {        
        let data = JSON.parse(decodeURIComponent(options.one))
        let htmlSplit = data.replace(/\?/g, "%3F")
        let htmlSplit3 = htmlSplit.replace(/\#/g, "%233")
        let sult = encodeURIComponent(JSON.stringify(htmlSplit3))
        state.navUrl += JSON.parse(decodeURIComponent(sult))
    })
    onReady(() => {
        // #ifdef APP-PLUS
        // vue2写法
        //     const currentWebview = this.$mp.page.$getAppWebview();
        // vue3写法
        /* 获取屏幕信息 */
        let pages = getCurrentPages();
        let page : any = pages[pages.length - 1];
        
        setTimeout(() => {
            let currentWebview = page.$getAppWebview();
            var wv = currentWebview.children()[0];
            let url = '此处需要拦截h5跳转的地址，转接到APP页面上来'
            // wv.overrideUrlLoading({mode: 'allow',match: '.*alipay\.com/.*'},(e)=>{//允许阿里的地址跳转
            wv.overrideUrlLoading({
                // "reject"  表示满足match属性定义的提交时拦截url跳转并触发callback回调，不满足match属性定义的条件时不拦截url继续加载。
                // "allow"  表示满足match属性定义的条件时不拦截url继续加载，不满足match属性定义的条件时拦截url跳转并触发callback回调；
                mode: 'reject',
                match: `.*${url}\.com/.*`
            }, (e) => {
                
            })
            
        }, 180)
    })
    onBackPress((e) => {
        // 强制不允许返回
        // return true;
    })
</script>
<style scoped lang="scss">
    .page {
        width: $uni-width-primary;
        margin: 0 auto;
    }    
</style>

View Code

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <mete http-equiv="contentType" content="textml;charst=utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>支付订单</title>
            <style>
                @keyframes show {
                    0% {
                        opacity: 0;
                    }

                    100% {
                        opacity: 1;
                    }
                }

                @keyframes hide {
                    0% {
                        opacity: 1;
                    }

                    100% {
                        opacity: 0;
                    }
                }

                .toast_box {
                    width: 100%;
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    justify-content: center;
                    display: none;
                }

                .toast_box p {
                    box-sizing: border-box;
                    padding: 10px 20px;
                    max-width: 72%;
                    width: max-content;
                    background: #000;
                    color: #FFF;
                    font-size: 16px;
                    text-align: center;
                    border-radius: 6px;
                    opacity: 0.8;
                }

                .zan-dialog-mask {
                    position: fixed;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    z-index: 999;
                    background: rgba(0, 0, 0, 0.7);
                }

                .zan-dialog__container {
                    position: fixed;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                    background: #f8f8f8;
                    transition: all 0.4s ease;
                    z-index: 9999;
                    border-radius: 20px;
                }

                .container {
                    position: relative;
                    width: 300px;
                    height: 250px;
                    border-radius: 20px;
                    margin: 0 auto;
                }

                .title {
                    font-size: 23px;
                    color: #333;
                    font-weight: bold;
                    text-align: center;
                    padding: 25px 0 0 0;
                    margin-bottom: 20px;
                }

                .concent {
                    font-size: 20px;
                    color: #333;
                    font-weight: bold;
                    text-align: center;
                }

                .btnFlex {
                    position: absolute;
                    bottom: 15px;
                    width: 100%;
                    display: flex;
                    align-items: center;
                }

                .resetPay {
                    font-size: 18px;
                    width: 50%;
                    height: 50px;
                    line-height: 50px;
                    text-align: center;
                    font-weight: bold;
                }

                .cancel {
                    font-size: 18px;
                    width: 50%;
                    height: 50px;
                    line-height: 50px;
                    text-align: center;
                    font-weight: bold;
                    color: #ff2f4e;
                }

                .hideStyle {
                    display: none;
                }

                .showStyle {
                    display: block;
                }
            </style>
    </head>
    <body>
        <div style="height:500px"></div>
        <div class="toast_box">
            <p id="toast"></p>
        </div>
        <div id='replace'></div>
        <div id="zan-dialog-mask" class="hideStyle">
            <div class="zan-dialog-mask hideStyle">
                <div class="zan-dialog__container">
                    <div class="container">
                        <div class="title">提示</div>
                        <div class="concent">
                            <div>订单支付未完成，</div>
                            <div>是否重新支付?</div>
                        </div>
                        <div class="btnFlex">
                            <div class="resetPay" onclick="resetPay()">重新支付</div>
                            <div class="cancel" onclick="cancel()">取消</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
    <!-- uniapp的引用 -->
    <!-- <script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script> -->
    <script type="text/javascript" src="https://unpkg.com/@dcloudio/[email protected]/index.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script type="text/javascript">
        document.addEventListener('UniAppJSBridgeReady', function() {
            let plus=false;
            uni.postMessage({
                data: {
                    action: '',
                    payResult: 0
                }
            });
            
            //获取数据进行赋值
            getUrlParam()
            toast('正在跳转支付页面..', 1200)
            //获取元素 其实以下得看自身情况需求来做更改 但大体就是使用 window.location.search.substring(1)截取到凭借的参数 然后使用decodeURIComponent方法进行转译
            let replace = document.getElementById('replace')
            function getUrlParam() {
                // 取得url中?后面的字符
                let query = window.location.search.substring(1);
                // let pair, pairSplit, id, token,requestUrl,userTerminal;
                // // 把参数按&拆分成数组3
                // // let param_arr = query.split("=");
                let param_arr = query.substring(5);
//跳转webview需要转换参数，不然webview会报错
                let htmlSplit = param_arr.replace(/\%3F/g, "?")
                let htmlSplitSpace = htmlSplit.replace(/\%20/g, " ")
                let htmlSplitSpaceF = htmlSplitSpace.replace(/\%3C/g, "<")
                let htmlSplitSpaceFR = htmlSplitSpaceF.replace(/\%3E/g, ">")
                let htmlSplitSpaceFf = htmlSplitSpaceFR.replace(/\%22/g, '"')
                let htmlSplitSpaceFf3 = htmlSplitSpaceFf.replace(/\%233/g, '#')
                // let htmlSplitSpaceFfPay = htmlSplitSpaceFf3.replace(/\%E7%AB%8B%E5%8D%B3%E6%94%AF%E4%BB%98/g, '立即支付')
                setTimeout(() => {
                let divForm = document.getElementsByTagName('divform')
                if (divForm.length) {
                    document.body.removeChild(divForm[0])
                }
                const div = document.createElement('divform');
                div.innerHTML = htmlSplitSpaceFf3;
                    document.body.appendChild(div);
                    document.forms[0].setAttribute('target', '_blank')
                    document.forms[0].submit();
                }, 500)
            }        
            function toast(text, time) {
                var toast = document.getElementById('toast');
                var toast_box = document.getElementsByClassName('toast_box')[0];
                toast.innerHTML = text;
                toast_box.style.animation = 'show 1.5s'
                toast_box.style.display = 'flex';
                setTimeout(() => {
                    toast_box.style.animation = 'hide 1.5s'
                    setTimeout(() => {
                        toast_box.style.display = 'none';
                    }, 1400)
                }, time)
            }
        });
    </script>
</html>

View Code

如有疑问，可联系随笔作者！！

标签：toast,uniapp,app,50%,box,replace,let,webview,document
From： https://www.cnblogs.com/yuan-xiaohai/p/17381196.html

uniapp app端内嵌webview对接支付宝支付

相关文章

赞助商

阅读排行