解决ios H5微信支付不能跳回App的问题

解决ios H5微信支付不能跳回App的问题

app项目是uni-app开发的安卓和iOS版本，安卓测试无问题，以下主要说iOS的解决方案。
问题点：app用webview打开H5页面，在H5页面发起微信支付（非app支付）唤醒微信打开支付，此时放弃支付或者支付完成，微信默认打开safari浏览器，没有返回app。

1.H5页面

发起支付时，后端写一个接口去访问微信的接口，微信会返回一段链接，直接回调给前端，前端处理代码如下：

//请求后台接口获取url
$.ajax({
 url:"",
 type:"post",
 data:{},
 success: function (data) {
   //拼接自己定义的返回页面，注意一定要encodeURIComponent
   //没参数的话，至少www.公司域名.com://
   let myUrl="www.公司域名.com://参数xxx";
   //唤起微信
   window.location.href=data+"&redirect_url="+encodeURIComponent(myUrl);
 }
})

2.配置UrlSchemes

支付完成/取消回调
www.公司域名.com:// 作用是访问这个“地址”能唤醒app，就像你能唤醒手机上app一样，他们都给自己取了一个名字是“UrlSchemes”
注意：首先需要在uni-app配置中 配置iOS 的UrlSchemes 配置位置在（app常用其他设置）配置过之后需**打包**才能生效，然后在Safari中获取app的其他浏览器中输入你的UrlSchemes+“: //”成功唤醒你的app则配置成功。测试在app的webview中发起H5支付回调即可返回app。

配置相关链接：https://ask.dcloud.net.cn/article/64

配置案例：urlschemes 必须配置，在safari浏览器输入 h5.huojianpeiwan.com:// 将跳转到对应的app，urlidentifier 目前不知道干啥子用的

// 记得打包、打包、打包
"urltypes" : [
    {
        "urlidentifier" : "com.公司域名.www",
        "urlschemes" : [ "www.公司域名.com" ]	//基本都是设置对用webview钱包的链接
    }
],

3.webview回调的处理

第一、二步成功之后，如果微信支付成功之后返回app需要打开的页面仍然是webview中的支付详情页，这个时候就会发现，显示的是白屏，这是因为微信的回调打开路径是
redirect_url=“www.公司域名.com://参数xxx”
这不是H5路径，微信回调的时候 只是返回了app，没有拿到具体路径，这时我们就可以对第一步的时候发起微信支付时进行判断

// #ifdef APP-PLUS
let statusbar = uni.getSystemInfoSync().safeAreaInsets.bottom;	
let statusBarHeight = statusbar ? uni.getSystemInfoSync().statusBarHeight : (uni.getSystemInfoSync().statusBarHeight + 44)；	//用来判断是否有安全距离设置高度	
let wv = plus.webview.create("", "custom-webview", {
	 plusrequire: "none", //禁止远程网页使用plus的API，有些使用mui制作的网页可能会监听plus.key，造成关闭页面混乱，可以通过这种方式禁止
	 'uni-app': 'none', //不加载uni-app渲染层框架，避免样式冲突
	 top: uni.getSystemInfoSync().statusBarHeight + 44,//放置在titleNView下方。如果还想在webview上方加个地址栏的什么的，可以继续降低TOP值
	 height: uni.getSystemInfoSync().screenHeight - statusBarHeight
})
wv.loadURL(`${this.url}`)	//防止对应需要加载的钱包页面
var currentWebview = this.$scope.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效，非v3编译模式使用this.$mp.page.$getAppWebview()
currentWebview.append(wv); //一定要append到当前的页面里！！！才能跟随当前页面一起做动画，一起关闭
wv.addEventListener('loaded',()=>{
	if(wv.getURL().indexOf('https://wx.tenpay.com') != -1){
	let redirect = decodeURIComponent(wv.getURL()).split('redirect_url=')[1];
	console.log(redirect);
	let newRedirect = redirect.replace('://','/');
	wv.loadURL('https://'+newRedirect)
	console.log('https://'+newRedirect); 
}},false)
// #endif

唤起微信支付时，在uni-app上拿到 redirect_url 并把

“www.公司域名.com://参数xxx” 替换成

“https://www.公司域名.com/参数xxx”

的H5回调链接，并重新用webview的方法loadURL打开wv.loadURL(" ")

4.返回app跳到别的页面

3成功返回app之后，如果业务需求返回的是app的支付详情页，需要监听app被UrlSchemes唤醒，在app.vue中做如下处理
在app.vue中onLaunch写

// #ifdef APP-PLUS
// 用来 ios 微信支付回调回来跳转到钱包页面，实现重新刷新
uni.getSystemInfo({
    success: function (res) {
        // 防止 andorid 系统点击通知栏的IM消息跳到钱包的情况
        if (res.platform == 'ios') {
            plus.globalEvent.addEventListener('newintent', (e)=>{
                var args= plus.runtime.arguments;  
                if(args){
                    uni.redirectTo({ //关闭当前的webview,在跳进钱包实现重新刷新
                        url:"/pages/huojian/wallet/wallet"
                    })
                }
            });
        }
    }
});
// #endif

注意：这种判断情况需要关闭启动页，不然第三方登录的话会直接跳到钱包页面

把下面的配置给删除了

UrlSchemes相关查询网址：https://sharecuts.cn/

支付宝问题跳转问题：猪博士 APP

UrlSchemes相同，无法跳到想要的APP案列（无法解决）：https://www.ithome.com/html/it/361607.htm