APP内嵌微信H5支付完成后无法跳回APP的解决方法

问题描述

公司有一个H5的项目是内嵌在别人的app种，就像是我的南京类似的政务聚合app，需要实现用户在这个聚合app种打开我们公司的项目，如何选择支付方式，因为是内嵌在别人的app中，所以app支付方式就行不通了，只能使用H5支付，在开发的时候，支付宝支付成功后可以正常跳回到app中，但是IOS端微信支付就无法跳回到原app中，具体现象是不跳转

解决方法

先说明下实现过程，微信和支付宝向后端发起支付参数生成请求后，后端返回支付参数，放到页面的

iframe标签的src属性里面，从而实现拉起支付宝/微信进行支付，redirect_url是支付后回跳的地址

判断当前如果是IOS端（判断方法可以根据userAgent这个里面是否包含iPhone来判断），

后端返回支付参数，针对ios进行特殊处理，如下，增加一个支付结果确认页面，支付完成后跳转到该页面，默认会自动跳回到app里面，如果没有跳转，也提供让用户手动点击返回原app的按钮

location.href = `${resp.data.data.order_info.mwebUrl}&redirect_url=${encodeURIComponent("https://xxxxxx.com/项目路径/#/pages/htmlPages/payResult")}` //ios支付后跳转到支付结果页面

<template>
//此处省略支付宝，微信金额选择相关代码
<iframe :src="src" frameborder="0" class="iframeStyle" v-show="isPayShow"></iframe>
</template>

//关键代码如下
//resp.data.data.order_info.mwebUrl 点击微信支付后，后端返回的支付参数
//resp.data.data.body 点击支付宝支付后，后端返回的支付参数
if (this.payMode == 1) {//判断是微信支付
    if(navigator.userAgent.indexOf('iPhone')>-1){
        //ios这里就不再赋值给src进行拉起支付了，使用location.href方式
        location.href = `${resp.data.data.order_info.mwebUrl}&redirect_url=${encodeURIComponent("https://xxxxx.com/路径/#/pages/htmlPages/payResult")}` ios支付参数赋值
    }else {
        this.src = `${resp.data.data.order_info.mwebUrl}&redirect_url=${encodeURIComponent("https://xxxx.com/指定的一个页面路径")}` //安卓支付参数赋值
    }
} else {
    this.src = `${resp.data.data.body}` //支付宝支付参数赋值
}

支付结果payResult.vue页面关键代码

<template>
    <view>
        <view style="margin-top: 15vh;font-size: 20px;">请到我的钱包中查看充值结果</view>
        <button style="margin-top: 20vh;" @click="toMy()">点击回到钱包</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                src:''
            }
        },
        onLoad() {
            if(navigator.userAgent.indexOf('unicloud')>-1){
                this.toWallet()
            }else{
                this.toMy()
            }
        },
        methods: {
            toMy(){
                location.href = 'UrlSchemes://?wallet=1' //跳回到我的钱包
            },
            toWallet(){
                uni.navigateTo({
                    url:'../../pages/htmlPages/wallet' //默认第一次进页面会自动跳转到我的钱包
                })
            }
        }
    }
</script>