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

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

这种做法只适合 APP -> 浏览器 -> 支付宝的支付形式

本人项目为uniapp做的APP项目

官方文档的原话：

在 IOS 系统中，唤起支付宝 App 支付完成后，不会自动回到浏览器或商户 App。用户可手工切回到浏览器或商户 App；支付宝 H5 收银台会自动跳转回商户 return_url 指定的页面。

官方文档这么说可能是不让你修改里面的fromAppUrlScheme值把，目前原因未知

1.当我们在webview 支付宝支付的时候，页面会加载支付宝返回的页面链接（如果浏览器访问的话，会直接跳到支付宝，在webview的话，就不会跳过去，需要点击 继续付款 才会跳转，所以我们要对这里的 继续付款 的按钮进行处理），如图：

2.H5支付，这里就不贴代码了，其实就是前端发起请求，后端返回一个 form 表单，将他 v-html 渲染在页面上，在执行 setTimeout(()=>{document.forms[0].submit();},300) ，就可以了，具体参考网上代码。

3.首页我们要了解为什么会跳到支付宝APP，我们首先要了解下 `URL Scheme` ，每个APP都有单独`URL Scheme` ，除非恶意软件，它是能在浏览器输入访问的话，就会跳到对应的APP的一个东西，这里推荐一个网站，能查对应APP的`URL Scheme`:[https://sharecuts.cn/app/333206289](https://sharecuts.cn/app/333206289)

当我们点击继续付款的话，会出现(可以拿H5页面去测试，在log报错会出现这一条):

alipay://alipayclient/?xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

解码为(网站：http://tool.chinaz.com/tools/urlencode.aspx)：

alipay://alipayclient/?
{
"requestType":"SafePay",
"fromAppUrlScheme":"alipays",
"dataString":"h5_route_token=\"xxxxxxxxxxxxxxxxx\"&is_h5_route=\"true\"&h5_route_senior=\"true\""
}

我们看到了 alipay:这个东西就是跳转到支付宝APP的东西，点击的话他在 IOS 上是 点击 -> 链接到Safari-> 跳转到支付宝，这里我们要对这段链接进行拦截并修改里面的fromAppUrlScheme的值，改成为你 公司的APP 的URL Scheme，这里我们看 fromAppUrlScheme 的值为 alipays所以，支付成功后还是留在 支付宝

4.理解1、2两点之后我们在webview进行拦截，直接贴代码：

原理：这段代码是，拦截我们点击按钮跳转的链接，并修改里面的fromAppUrlScheme的值，实现跳转

onReady() 
		// #ifdef APP-PLUS
		if (uni.getSystemInfoSync().platform == 'ios') {
			const currentWebview = this.$mp.page.$getAppWebview();
			var wv = currentWebview.children()[0];
				 
			//拦截支付宝点击支付的按钮跳转，并修改里面的 fromAppUrlScheme 值
			wv.overrideUrlLoading({mode: 'reject',match: '.*alipay\:\/\/.*'},(e)=>{
				console.log(e.url);
				let newUrl = e.url.replace(/alipays/,'www.xxx.com://')
				setTimeout(() => {
					console.log(newUrl);
					plus.runtime.openURL(newUrl, function(res) {
						console.log('跳转支付宝成功:'+ res);
					}); 
				},500);  
			});
		}
		// #endif
	}	

注：我们使用 plus.runtime.openURL 会报一个错，会出现 报错code:-3,msg:此功能不支持，这是因为iOS平台需要通过设置appInf的action属性（Scheme）进行查询，在iOS9以后需要添加白名单才可查询。

设置 在manifest.json文件的"plus"->“distribute”->"ios"下添加 urltypes 和 urlschemewhitelist 节点数据如下：

"ios" : {
    "urltypes" : [
        {
            "urlidentifier" : "com.xxx.www",
            "urlschemes" : [ "www.xxx.com" ]	//名字随便取，不过要跟上面的拦截修改一致，拦截的话后面记得加上 ://，相关配置文章看我最后发的链接
        }
    ],
    "urlschemewhitelist" : [ "alipay" ],
}

注：保存后提交App云端打包后才能生效 或者自定义基座运行

iOS平台设置UrlSchemes：https://ask.dcloud.net.cn/article/64

iOS平台设置应用访问白名单：https://ask.dcloud.net.cn/article/434