apiCloud 微信H5支付前端代码

apiCloud 微信H5支付前端代码

H5支付是指商户在微信客户端外的移动端网页展示商品或服务,用户在前述页面确认使用微信支付时,商户发起本服务呼起微信客户端进行支付。
主要用于触屏版的手机浏览器请求微信支付的场景。可以方便的从外部浏览器唤起微信支付。
但是,官方文档上又说:H5支付不建议在APP端使用,如需要在APP中使用微信支付,请接APP支付

我的项目就是一个app端,而不是手机浏览器端,但是客户要求,就只能硬着头皮做了。
但是做的时候发现微信H5支付前端处理起来很简单,服务端返回的url,负责跳转一下就ok。代码如下:

                                   api.openWin({
												name: 'wxpage',
												url: res.data.orderStr,
												headers: {
													Referer: 'http://jushicc.com'  // 请求头
												},
												bgColor: "#ffffff"
											});

以上代码就能调起微信H5支付了,
所遇问题:
1、oppo手机时而调起时而不能调起微信H5支付
解决办法:这是因为oppo手机线性太差,反应反应不过来,需要加一个延时器,这样才能实现每次都能调起微信h5支付,
2、调起成功之后要返回app内我们所需要展示的页面,在测试的过程中,支付成功之后老是返回一个带有类似于我们请求数据返回的打印字符串的空白页面,而且这个页面不可操作,所以我想到利用 api.closeToWin()来回到app指定页面。
但是,这并没有返回到指定页面。
解决方法:经过多方测试,在android系统内,要在api.closeToWin()之前加一个弹窗,alert('即将跳往支付页面'),这个弹窗将在前往支付页面之前调起,测试过程中发现只能是弹窗,替换成其他的都不行。在ios系统内, 要延时执行api.closeToWin(), 而且要弹窗替换成api.showProgress()加载框,在api.closeToWin()之后关闭它,这样才成功

主要代码:`
api.openWin({

											name: 'wxpage',
											url: res.data.orderStr,
											headers: {
												Referer: 'http://jushicc.com'
											},
											bgColor: "#ffffff"
										});
										var systemType = api.systemType;
										if (systemType == 'ios') {
											api.showProgress({
												title: '正在跳往支付页面...',
												text: '先喝杯茶...',
												modal: false
											});
											setTimeout(() => {
													api.closeToWin({
														name: 'cartwin',
													});
													api.hideProgress();
												},1000);
										} else if (systemType == 'android') {
											alert('即将跳往支付页面')
											setTimeout(() => {
												api.closeToWin({
													name: 'cartwin',
												});
											}, 2000);
										}`							

我的代码虽然实现了功能,但是我知道按照以上写法肯定是有问题的,希望能有小伙伴们给提点意见

你可能感兴趣的:(apiCloud,微信H5支付,前端)