PC端支付宝开发最终的页面跳转问题
首页 >  Web前端 > Vue  > 2018年12月24日阅(1353)评(1

支付宝支付一般是请求接口后收到一组form表单代码,在h5中,可以直接像下面这样直接使用

doPayAlipay(alipayNeedParams).then(resAlipay=>{
    if(resAlipay.code==0){
        const div = document.createElement('div');
        div.innerHTML = resAlipay.data.form;
        document.body.appendChild(div);
        document.getElementById('alipayForm').submit();
    }
})

但是在pc中就不能酱紫了,我们得给他新开一个标签页或者弹窗,那么可以使用window.open亦或者下面的方法

doPayAlipay(alipayNeedParams).then(resAlipay=>{
    if(resAlipay.code==0){
        const div = document.createElement('div');
        div.innerHTML = `<a style='display:none' id='triggerAlipay' href='${this.payAliUrl}' target='_blank'>Alipay</a>`;
        document.body.appendChild(div);
        document.getElementById('triggerAlipay').click()
    }
})

但是最终酱紫是会被浏览器拦截掉的,因为该操作不是用户主动触发的,浏览器认为酱紫不安全所以拦截了( _self 不会限制)

最终找到一个相对完美的方法,先打开一个空白页,待异步成功之后再赋予链接地址:

let newOpenWindow = window.open('about:blank');
doPayAlipay(alipayNeedParams).then(resAlipay=>{
    if(resAlipay.code==0){
        this.$tools.storage.set('alipayForm', resAlipay.data.form)
        newOpenWindow.location = this.payAliUrl
        // ...
    }
})

中转页面类似这样:

<template>
    <div class="container" style="margin:20px auto">
        <div class="noDataTip">即将跳转到支付宝...</div>
    </div>
</template>
<script>
export default {
    head(){
        return {
            title: '跳转中...'
        }
    },
    created(){
        if(process.client){
            let alipayForm = this.$tools.storage.get('alipayForm')
            if(alipayForm && this.$store.getters.isLogin){
                const div = document.createElement('div');
                div.innerHTML = alipayForm;
                document.body.appendChild(div);
                this.$tools.storage.remove('alipayForm')
                document.getElementsByName('punchout_form')[0].submit();
            }else{
                this.$alert('非法进入!','警告',{showClose:false}).then(()=>{
                    this.$router.replace(this.$tools.urlMerge('/', this.$route))
                })
            }
        }
    }
}
</script>

相关资料

h5页面唤起app的几种触发方式
基于vue或nuxt.js的单页应用怎么添加统计功能?

有朋自远方来...评论一下呗O(∩_∩)O哈哈~

QQ
昵称*
邮箱*
主页

评论(1)

1楼、天津网站建设 [回复该留言]
2019-01-15 17:01
就知道疑难问题来这里准没错