微信H5支付保持原页面继续执行的实现方式
随着移动互联网的发展,越来越多的用户选择通过手机进行购物消费。而移动端网页展示商品或服务的场景也越来越普遍。为了让用户体验更加顺畅,微信推出了H5支付。H5支付是一种方便用户在移动端网页唤起微信客户端进行支付的方式。但是,在进行支付过程中,有些用户会感到困扰:支付完成后,是否应该回到原页面,或者停留在微信支付的结果页?
为了解决这一问题,我们可以采取如下的实现方式:
1. 将原网页URL作为支付参数传递给微信支付页面
在进行微信支付之前,我们可以将原网页URL作为支付参数传递给微信支付页面。这样,在支付完成后,微信支付页面会带上这个URL一起返回,我们可以通过解析这个URL,将用户自动跳转回原页面。具体实现方式如下:
```javascript
// 将当前页面URL作为参数传递给微信支付页面
var currentUrl = window.location.href;
var wxPayUrl = 'http://www.xxx.com/wxpay.php?originUrl=' + encodeURIComponent(currentUrl);
// 跳转到微信支付页面
window.location.href = wxPayUrl;
```
在微信支付页面中,我们可以通过获取URL参数,获取原页面URL并带回:
```php
// 获取支付完成后返回的URL
$originUrl = isset($_GET['originUrl']) ? urldecode($_GET['originUrl']) : '';
// 在微信支付结果页中添加一个“返回”按钮,并在点击时跳转到原页面
echo '返回';
```
2. 基于iframe的方案
在进行微信支付时,我们可以创建一个隐藏的iframe,然后将微信支付页面嵌入到这个iframe中。这样,在支付完成后,用户还可以在原页面保持其他操作而不被打断。具体实现方式如下:
```javascript
// 创建一个需要隐藏的iframe
var iframe = document.createElement('iframe');
iframe.style.display = 'none';
// 将微信支付页面带上原页面URL一起加载
var currentUrl = window.location.href;
var wxPayUrl = 'http://www.xxx.com/wxpay.php?originUrl=' + encodeURIComponent(currentUrl);
iframe.src = wxPayUrl;
// 将iframe添加到页面
document.body.appendChild(iframe);
```
在微信支付页面中,我们可以在页面加载完成后,通过Javascript发送消息给父页面,告诉它支付已完成,然后由父页面来决定是否跳转回原页面:
```javascript
// 发送消息给父页面,告诉它支付已完成
window.parent.postMessage('wxpay:success', '*');
```
在父页面中,我们可以监听这个消息,并根据需要跳转回原页面:
```javascript
// 监听微信支付页面发送的消息
window.addEventListener("message", function(event) {
// 如果支付已完成,跳转回原页面
if (event.data === 'wxpay:success') {
window.location.href = originUrl;
}
});
```
以上就是实现微信H5支付保持原页面继续执行的方案。通过正确地寻找实现方式,我们可以为用户提供更好的体验,提高用户购物消费的满意度。
添加客服微信