app端内h5页面使用微信h5支付

一、起初使用的方法

在对接支付宝支付的时候，我是使用window.open()直接打开后端返回的链接，完全没有任何问题，然后等到对接微信h5支付的之后，我故技重施，继续使用window.open()方法，结果就是下图这样：

我尝试在axios中的拦截器的添加请求头(Referer)，结果虽然添加成功了，但是还是报上图同样的错误

Vue.prototype.$u.http.setConfig({baseUrl: '/api',header: {'content-type': 'application/x-www-form-urlencoded;charset=UTF-8','Access-Control-Allow-Origin': '*','Referer': "" //你们申请的微信h5支付域名，调用接口的域名一定要和这个一样}});

二、解决方法

一、经过大量的尝试，目前这个方法可以正常调起微信h5支付(稍微有点延迟)

let iframe = document.createElement('iframe');
iframe.src = res.data.url; //你调用接口返回的微信h5支付的链接
iframe.sandbox = "allow-scripts allow-top-navigation allow-same-origin"
document.body.appendChild(iframe);
document.body.click() //这个方法和下一行的window.focus()应该可以只写一个就行了
window.focus() //我这边测试急，为了方便就全写上了
setTimeout(() => {document.body.removeChild(iframe);
}, 3000)

二、这个方法还没有试过，看着好像简便些

let iframe = document.createElement('iframe');
iframe.onload = () => {
console.log('这样子就没问题了')
}
iframe.src = res.data.url //你调用接口返回的微信h5支付的链接
document.body.appendChild(iframe);
setTimeout(() => {document.body.removeChild(iframe);
}, 3000)

三、最后

第一次写博客，有什么写的不好的地方欢迎大家指点，有什么技术问题也可以直接在评论区提出来，互相学习一下，我就是个前端菜只因

app端内h5页面使用微信h5支付相关推荐

微信公众号H5页面开发--微信JS-SDK引用
微信公众号H5页面开发–微信JS-SDK引用微信提供了微信公众号开发者手册,官方地址:https://mp.weixin.qq.com/ 公众号内许多复杂的业务场景,都是通过网页形式来提供服务,这时 ...
html(h5)页面实现微信js分享
html(h5)页面实现微信js分享注:并非所有代码原创服务端实现签名等因为引用了第三方dll,所以需先添加nuget包,这个包直接在nuget管理器中搜索不到,在pm控制台输入如下内容:也 I ...
[html] H5页面在微信中如何禁止分享给好友和朋友圈？
[html] H5页面在微信中如何禁止分享给好友和朋友圈? 利用JSBridge实现调用微信提供的一些原生功能,可以通过调用隐藏操作菜单来实现禁用分享. 代码如下: document.addEvent ...
H5页面调用微信支付
1.H5页面使用微信支付,首先需要注册微信公众号,在设置与开发>公众号设置>功能设置中配置业务域名.JS接口安全域名.网页授权域名.支付功能页面需在此域名链接下的页面. 2.加入域名后,就 ...
在服务器上部署自己的h5页面用于微信内部浏览器打开
在服务器上部署自己的h5页面用于微信内部浏览器打开域名注册和虚拟主机租用都是在西部数据进行的以下为西部数据的官网登录和注册这里不过多介绍...... 一.域名注册点击官网首页 ...
h5页面在微信中打开，字体显示不正常
h5页面在微信中打开,页面打开时字体正常显示,加载完成字体变大或者变小(其他浏览器均正常显示). 原因是调整了微信中页面字体大小,如下图所示: 如果不想在微信中打开的H5页面字体变大或者变小而影响整体 ...
H5页面在微信浏览器中打开，右上角没有出现三个点
在发现问题的日期2020/09/23,微信好像出现了纯H5页面在微信浏览器中打开右上角没有三个点,经过同文件更换多个服务器和域名测试,发现可能是由于打开的域名的没有备份,现在正在走备案流程,出现问题换 ...
H5页面使用微信网页授权实现登录认证
在用H5开发微信公众号页面应用时,往往需要获取微信的用户信息,H5页面在微信属于访问第三方网页,因此通过微信网页授权机制,来获取用户基本信息,此处需要用户确认授权才能获取,用户确认授权后,我们可以认为 ...
H5页面在微信浏览器中自动播放视频
H5页面在微信浏览器中自动播放视频安卓和IOS不同 h5在安卓微信浏览器上的视频不能自动播放 h5在iOS微信浏览器上的视频可以自动播放 iOS的实现方案

app端内h5页面使用微信h5支付

app端内h5页面使用微信h5支付

app端内h5页面使用微信h5支付

一、起初使用的方法

二、解决方法

三、最后

app端内h5页面使用微信h5支付相关推荐

最新文章

热门文章