前言：
公司一个远古级APP改成了“原生壳子+H5”的结构，支付模块也改成了H5的方式。其中所有的H5模块都是来源于另一个已有的H5 APP项目。
老夫高高兴兴的把远古大便代码清理的干净，还专门在之前的WebVC基础上封装了专门用于加载Web页面的模块...
一切顺利，唯独在微信支付的时候，无法返回APP，却打开了Safari浏览器来加载回调后的H5网页。
这...似曾相识，难不倒老夫。
问题总结
[描述]：
- APP内网页跳转微信支付后无法返回APP
- 且APP内的web页面变为空白页
[期望]：
- APP跳转微信后能正确返回APP
- 回调APP后，页面显示正常
思考
为什么没有唤起APP？
原生微信支付是以URL Scheme来作为跳转的。只需要APP与微信支付后台的URL Schemes配置好即可。那么H5支付的流程极可能在这里发生了变化导致两端配置不一。
为什么会打开Safari网页？
微信回调的时候并没有回调APP，而是回调的H5网页。那么很可能与无法回调APP是同一个问题，也就是微信的回调环节出了问题。
为什么跳转支付后H5页面变为空白页？
可能是H5页面处于等待回调的状态，但微信并未正确回调到APP内的H5，导致其一直处于等待状态。
开始
这个远古级的项目之前是用了一个第三方金融平台的支付SDK，由其负责APP与支付中间的各种通信。流程大致如下：
APP的支付流程
以前的支付流程交给了第三方金融平台，金融平台负责管理多个微信支付账号，并提供统一的调用接口给APP。更改为H5之后，调用支付的操作交给了服务端，由服务端调用微信H5支付。
在与后台小哥沟通后，得知：
- 微信H5的支付结果被设置为Web页面，无法更改
- 微信支付后台的配置在客户手里，无法查看，无法获取（WTF？）
- H5模块为另一个APP，最好不更改H5部分
这.......?意思就是只能在APP端解决无法唤起APP的问题
喝一罐可乐压压惊，先解决回调的问题
前面说到，微信返回APP是微信的操作，查询了微信的文档后，得知这个回调操作是H5调用支付时所配置的。具体配置在唤起微信支付的连接请求头的Referer字段，链接形式类似：
唤起支付的H5链接
我们需要更改其请求头Headers中的“Referer”字段为APP中URL Schemes所配置的值。有一点需要注意，这个值必须与微信支付后台的配置的一致，否则在调用支付时会报类似“商家参数”的错误。
在尝试多个商户的支付操作时，发现后台所有的回调都是同一个域名，便尝试其作为我们的URL Schemes的值。
替换Referer
上面的代码以UIWebView为例（WKWebView同理），做了三件事：
- 拦截微信H5支付链接
- 修改其 Headers 中的 Referer 字段为我们 APP 的 URL Schemes。
- 防止微信H5支付的二次调用将值改回去造成无限循环
Tips: 需要注意的是，APP内配置的 URL Schemes 为“www.XXXX.org”，拦截修改的Referer 的值为“www.XXXX.org://”。
测试过后回调成功。
H5支付页面还没有被通知到，页面没有刷新。文档中有如下描述：
微信文档
从中可知，微信可能无法回调H5网页，使得H5页面无法及时响应。需要H5页面在调用支付时，就弹框让用户操作手动查询支付结果来刷新界面。
【这~又给老夫机会跟H5妹子沟通了】
老夫：“妹子，需要加个弹框，来让用户手动查询支付回调，因为...”
H5妹子：“我加了啊”
老夫：“嗯？”
H5妹子：“你看，Android都有！”
老夫：“What?”【就在同时，我发现APP又不能唤起支付了，还报了商户参数的错误】
后台刚在URL中添加了redirect_url参数，并指定其为支付成功后的回调，
而这个回调...是H5网页...**redirect_url 与 Referer 不相同造成了报错。
【老夫把左轮枪上了膛，站在了后台汉子的身后】
“你这redirect_url加的防不胜防啊”
“那边应用喊加的，需要制定回调页面”
“那...”
“不能改”
“...”
【枪没有响，老夫也回到了座位，这难不倒我】
经过简单的替换，将URL中的 redirect_url 字段像 Headers 中的 Referer 一样替换成“www.XXXX.org://”后，就又可以成功跳转了。
这时候就剩下一个问题了...
解决APP端的H5页面未响应回调
我们知道后端给redirect_url 和 Referer 指定的链接就是跳转支付后回调(取消、成功、失败)的链接，而我们为了微信能返回APP修改了这俩的值。且在微信回调APP后，webView 的代理 shouldStartLoadWithRequest 加载了 “www.XXXX.org://” 。
这能加载成功就有鬼了。不过这也说明回调APP后，网页也确实触发了回调的方法。
那我们只需要缓存下回调的地址。将调用支付拦截下来的 redirect_url链接缓存下来，当回调APP调用“www.XXXX.org://”时再加载缓存下来的链接就可以完成整个流程了。
支付回调后刷新页面
问题解决，按时下班~
网友评论