webview内嵌uniappH5支付

 ————————————————重要通知——————————————

Hello，本人的博客文章已更新至个人网站（www.jonexu.cn）

文章中有问题可以到网站联系博主，后续新的文章也将更新在个人网站

——————————————————————————————————

这玩意是真的到处是坑，app支付就不讲了，用官方uni.requirepayment能走完的，后续有时间可以稍稍整理点坑出来

主要讲uniapp h5支付，包括嵌套到webview(某糟心果)支付

h5支付接口啥的前端没什么关系，主要是后端的活，可以让你后端去看这两个文档

支付宝网站支付、微信h5支付（微信确认已开通H5支付资格：微信商户平台——产品大全——H5支付（已开通））

特别注意：微信这里我讲的是外部浏览器支付，因为还有微信内部浏览器支付的写法，与本次讲的h5支付不同。

前端不要去研究怎么唤醒支付宝/微信，你只需要研究从后端拿到的form（支付宝）或者url（微信）时该做那些处理。

主讲是网上的各种坑，如何设置完成回调，微信支付完成回调到浏览器问题，支付宝回调在webview里打开新链接问题

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

// #ifdef H5
this.$ajax.JPost(myApi,myArgument,(res)=>{//请求后台接口获取url
    //拼接自己定义的返回页面，注意一定要encode
    let myQuery="&redirect_url="+encodeURIComponent("www.公司域名.com/xxxx")
	window.location.href=res+myQuery;//跳转
});
// #endif

支付完成/取消回调
微信的回调是前端在后端返回url时自己做拼接，拼接一个叫redirect_url的query参数，配置的地址主域名得在微信商户平台配置H5白域名（微信商户平台——产品大全——开发配置——h5白域名）。

这里有个坑，可能刚配置的白域名微信后台还未刷新，导致唤醒微信是提示“商家存在未配置的参数”等错误。如确认配置一致后建议稍等个半天，别白瞎了宝贵生命，毕竟我被他坑的太阳公公出山时才躺下的，第二天莫名其妙就正常了。

在h5中以上也是ok的，但是ios webview中我微信的回调会直接打开Safari浏览器。Oh，No！
所以！我们需要了解一下UrlSchemes： uniappIOS urlSchemes文档.

作用是访问这个“地址”能唤醒app，就像你能唤醒微信支付宝一样，他们都给自己取了一个“UrlSchemes”

Ios中配置了之后（注意uniapp配置需打包后生效）在Safari中输入你的UrlSchemes+“://”成功唤醒你的app则配置成功，

有了这一出，我修改了上面微信唤醒逻辑，我打开自己的webview页面支付时告诉自己的h5page是webview访问，然后配置redirect_url时拼接自己app的UrlSchemes，让其支付回调的是app而非浏览器

注意这个UrlSchemes要让微信认，一样得配置h5白域名 ，我们配置的UrlSchemes就是白域名“www.公司域名.com”。

// #ifdef H5
this.$ajax.JPost(myApi,myArgument,(res)=>{//请求后台接口获取url
    //拼接自己定义的返回页面，注意一定要encode
    let myQuery="www.公司域名.com/参数xxx";//默认走h5回调
    if(this.isFromWebview){	
        myQuery="myappUrlSchemes://参数xxx"
    }
	window.location.href=res+"&redirect_url="+encodeURIComponent(myQuery);//跳转
});
// #endif

监听app被UrlSchemes唤醒

在app.vue中onLaunch写
// #ifdef APP-PLUS
	plus.globalEvent.addEventListener('newintent', (e)=>{
		var args= plus.runtime.arguments;  
		if(args){//值就是"myappUrlSchemes://参数xxx"
            let argArr=args.split("myappUrlSchemes://");
			uni.redirectTo({//关闭当前的webview,并跳转到app支付成功页面
				url:"/pages/public/payResult?"+argArr[1]
			})
		}
	
	}
});
// #endif

支付宝：
支付宝的h5支付也是后端写接口把我们系统申请的商户信息啥的去调用支付宝的接口。然后支付宝会返回一段form表单的html。
后端直接返回给前端，前端只需如下处理就可以唤醒支付宝app进行支付。

// #ifdef H5
this.$ajax.JPost(myApi,myArgument,(res)=>{//请求后台接口获取form

const div = document.createElement('div');
div.innerHTML = res;
document.body.appendChild(div);
//document.getElementsByName("return_url")[0].value//其实这里能抓到表单中的一些值，但是我想修改就失败了

//表单填入之后，调用表单的提交，以此来跳转到支付宝的h5收银台，它会去唤醒支付宝app
document.forms.alipaysubmit.submit();

//网上还流传这两种提交form方式，我是失败了，用上面那种是成功的
//document.forms['alipaysubmit'].alipaysubmit.submit();

});
// #endif

支付宝完成回调：

唤醒app后 ios需要手动切换回自己的app（这里有位老铁说可以改参自动回调，我拦截url没看到那个参数，所以就没强求了，毕竟官方说了ios h5不会回调。PS：url拦截往下看，后面要用的！）

主要讲解点：用户在支付宝h5收银台点击“已完成付款”或者左上角“X”的时触发的回调：

主要需要后端请求支付宝接口时需要给支付宝两个参，return_url(交易完成或取消返回地址)和biz_content中的quit_url（中途退出返回地址），我配置的都是一样的。这两参应该是由前端定义，前端想让支付宝收银台完成操作时跳到哪个页面得自己想好（PS：我的做法是让支付宝和微信都跳转到一个叫支付结果的页面，在这个页面能查询刚交易的结果）。

webview中：

以上流程在h5中是ok的，如果你的webview符合你的业务逻辑就不需要往下看了

我是用在app ios端用webview去访问，支付宝h5收银台完成回调时，会打开当前webview然后去访问我们配置的return_url中的地址，我这里就会出现webview中我在一开始跳转webview给的参数丢失情况，比如token。

为了与微信统一逻辑，我想让支付宝支付完成也跳转到app中的支付成功页面，而非继续在webview中游荡。所以我做了h5+联盟中提到的webview跳转url拦截，也就是对支付宝h5收银台的回调跳转做拦截，让其跳转到app中的支付成功页面。app中webview代码如下：

onReady() {
	// #ifdef APP-PLUS
	const currentWebview = this.$mp.page.$getAppWebview();
	var wv = currentWebview.children()[0];

    // wv.overrideUrlLoading({mode: 'allow',match: '.*alipay\.com/.*'},(e)=>{//允许阿里的地址跳转
	wv.overrideUrlLoading({mode: 'reject',match: '.*公司域名\.com.*'},(e)=>{//拦截我定义的阿里return_url地址，假设你定义的是“https://www.公司域名.com”,正则，不懂建议去学习下
		uni.redirectTo({//拦截到了就跳转到app中的支付成功页面
			url:"/pages/public/payResult?ptype=alipay&orderid=xxx"
		})
	});
	// #endif
},