微信H5支付保持原页面继续执行

微信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支付保持原页面继续执行的方案。通过正确地寻找实现方式，我们可以为用户提供更好的体验，提高用户购物消费的满意度。