ios H5支付 空白页 h5支付页面模板

IOS无法打开支付页面问题

• h5支付一般是后台写好接口，提交订单，后台返回一个支付宝form表单，表单格式如下：
• 解决IOS不能跳转支付页面问题

h5支付一般是后台写好接口，提交订单，后台返回一个支付宝form表单，表单格式如下：

提交订单页面（home.vue）

this.payUrl = res.data.data.payUrl        //form表单
  console.log(this.payUrl)					//	<form id='alipaysubmit' name='alipaysubmit' action="">...</form>
  let routerData = this.$router.resolve({	//打开新页面，将form表单传过去，在新窗口打开。
  	path:'/apply',							
  	query:{htmls:this.payUrl}				
  });
  window.open(routerData.href,'_blank');

创建一个新页面（apply.vue）用来展示支付宝支付页面

<template>
    <div v-html="apply"></div>						//用v-html替换页面内容
</template>
<script>
    export default {
        name: 'apply',
        data(){
            return {
                apply:''
            }
        } ,
        mounted () {
            let form = this.$route.query.htmls		//接收表单内容
            this.apply = form
            console.log(form)
            // setTimeout(() => {
            //     document.forms[0].submit();
            // }, 100);
            this.$nextTick(()=> {					
                document.forms[0].submit();			//自动执行表单提交事件
            })
        }
    }
</script>
 
<style>
</style>

效果如图：

然后每隔三秒查询一次订单状态，支付成功跳转至支付成功页面，到这一步支付宝支付就完成了。

经测试，安卓可以正常跳转，但是iOS提交订单没有自动打开新窗口，也没有报错，
后来发现是IOS阻止了新窗口自动打开。
不能自动跳转那就退一步让用户手动跳转至支付宝支付页面。

解决IOS不能跳转支付页面问题

提交订单页面（home.vue）

//添加一个提示弹框，因为IOS默认阻止自动打开新窗口，那么就让用户点击跳转至支付宝支付页面
<van-dialog @confirm='confirmPay' v-model="showA" title="跳转支付页面" show-cancel-button>        
  <div style="text-align:center;line-height:.4rem;color:blue">是否跳转至支付页面</div>
</van-dialog>

//点击确定
methods:{
	confirmPay(){
  		window.open(this.payUrl, "_blank");		
  		console.log(this.payUrl)  				//https://******.cn/xiaoaiedu/promote/pay/TGPRO20200727101444TTT3391746629
  		//这里的this.payUrl不再是一个form表单了，而是由后端渲染支付宝支付页面，返给前端一个链接，前端只需在新窗口打开该链接即可
	},
},

效果如下：

PS：用微信打开商品链接时，会出现支付页面把原有的商品页面覆盖，导致支付完成后不能跳转至支付成功页面的问题

解决办法：将支付成功页面重定向至前端所写的支付成功页面，前端从url中解析所需参数。

各位客官要是感觉有用的话能留个小心心嘛,谢谢啦！！！^ v ^