微信h5支付遇到的问题

在第三方sdk体验很好的状况下为毛要对接h5支付呢？主要是可让用户下降充值的门槛，毕竟浏览器确定仍是有的，还有一个就是ios的缘由。

此次主要仍是描述一下遇到的一些问题，毕竟后端的同窗已经作了不少的处理，这边只是须要调用接口就能够了，还有就是微信有很完善的文档，不少问题其实都能在文件获得解决方案

要求

1. 在页面支付完成以后须要查询结果
2. 在调起支付的时候，不要刷新页面（体验问题）

问题

referer丢失的问题

在咱们拿到微信的payurl以后，用

location.href = payurl
复制代码

去调起微信支付的是,发现andorid不行，anroid的referer丢失了，这android是能够解决的，可是旧版依然会有问题,而后找到了另一种方式

let iframe = document.createElement('iframe');
iframe.src = 'payurl';
document.body.appendChild(iframe);
setTimeout(()=>{
    document.body.removeChild(iframe);
},3000)

复制代码

用iframe的形式发现能够解决：

• android referer丢失的问题
• 当前页面不须要刷新，体验自我感受良好

iframe有referrerPolicy这个属性，该属性定义了在获取资源时发送的引用者,具体文档

接着又发现了问题，ios12.4的机子，iframe没法调起微信支付(奔溃

由于恰好这个页面是在本身的app的内嵌页，而后app也有javascriptBridge（如下简称jsb）能够打开一个弹窗webview，那么脑洞就来了（另外一个大佬的点子），经过jsb去让原生打开一个webview（不可见，透明）而后去打开一个中转页面，接着去调起微信支付

//h5支付绑定的是 aaa.com
jsb(`https://aaa.com/static/function/xxx.html?open=${encodeURIComponent(payurl)}`);

//xxx.html
window.location.href = open;

复制代码

正常来讲其实 只须要页面去访问payurl就行了，可是不想页面刷新。

说明:以上是在app内嵌页里面使用，因此有jsb的方式，也能够保证了浏览器的统一，因此没那么兼容问题；

---

后面须要作一个页面是给用户在普通浏览器打开的，就又遇到了问题了；

兼容问题，在qq浏览器，uc浏览器，safari，android默认浏览器，发现有些能够经过iframe调起微信，有些不行。例如：

safari

//方案一,相似上面的作法，打开一个新窗口

window.open(payurl);

//发现无效，而后去查了一些文档，看到了一种解决方法
//在 window.open();调用成功了以后，会返回一个新窗口的应用，能够经过改变locationl来调起微信支付
element.click = ()=>{
    let newWin = window.open();
    getPayurl().then((payUrl)=>{
        newWin.location = payUrl;
        //3秒后关闭新窗口
        setTimeout(()=>{
            newWin.close();
        },3000)
    })
}
/*
注意点：
1.须要有交互去调用window.open
2.newWin.location的赋值须要异步。这里不知道是否是须要在新的窗口打开以后，才会返回window的对象去给location赋值。
*/

复制代码

safari的问题解决了，还有千千万万个safari，由于是须要在外部浏览器打开的，若是要兼容好这些浏览器的话，估计得挂在这了，放弃了，用最终的方案

直接用最最最普通的方式

window.location = "payUrl"
复制代码

直接忽略“要求”的第二点，至于结果的查询，用微信支付的return_uri+cookie来去实现。