解决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

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

把下面的配置给删除了

解决ios H5微信支付不能跳回App的问题_第1张图片

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

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

UrlSchemes相同,无法跳到想要的APP案列(无法解决):https://www.ithome.com/html/it/361607.htm

你可能感兴趣的:(技巧,微信,ios,前端)