微信小程序调起H5页面支付的全流程解析与实战

  咦咦咦，各位小可爱，我是你们的好伙伴——bug菌，今天又来给大家普及Java SE相关知识点了，别躲起来啊，听我讲干货还不快点赞，赞多了我就有动力讲得更嗨啦！所以呀，养成先点赞后阅读的好习惯，别被干货淹没了哦~

🏆本文收录于「滚雪球学Java」专栏中，这个专栏专为有志于提升Java技能的你打造，覆盖Java编程的方方面面，助你从零基础到掌握Java开发的精髓。赶紧关注，收藏，学习吧！

环境说明：Windows 10 + IntelliJ IDEA 2021.3.2 + Jdk 1.8

前言

随着微信小程序的普及，越来越多的商家和开发者将其作为轻量化应用的开发首选。在小程序中，微信提供了原生的支付接口，但在某些特定场景下，比如第三方支付平台或某些复杂的支付需求，我们可能需要通过小程序调起H5页面进行支付。那么，如何实现从微信小程序到H5页面的无缝支付体验？本文将详细解析微信小程序如何调起H5页面支付的全流程，结合实际案例，帮助开发者掌握这一功能的实现技巧。

一、为什么在微信小程序中调起H5页面支付？

尽管微信小程序提供了丰富的支付功能接口，但在一些特殊场景下，原生的支付接口可能无法完全满足需求，例如：

1. 跨平台支付：某些支付场景涉及到第三方平台的支付系统，无法直接调用微信支付。
2. 支付页面定制化：有些支付页面需要复杂的定制化设计和交互，而小程序的页面展示可能无法完全满足需求。
3. 已有H5支付系统：某些商家已经有稳定运行的H5支付系统，并不想为小程序支付专门开发一套新流程，调起H5支付是最直接的方式。

因此，在这些场景下，我们需要通过小程序内嵌H5页面来调起支付。

二、微信小程序调起H5支付的实现原理

在微信小程序中调起H5支付，核心的流程是通过小程序的 WebView 组件嵌入一个外部的H5页面，然后在该页面上执行具体的支付操作。由于微信小程序限制了直接跳转外部应用的能力，H5页面支付需要遵循一系列的规则，特别是涉及跨域、安全性及支付环境的验证等问题。

2.1 使用WebView组件加载H5页面

在小程序中，我们可以使用 WebView 组件加载外部的H5页面。WebView是一个容器，允许我们在小程序中嵌入网页内容。

2.2 调用微信支付接口

一旦H5页面被加载到 WebView 中，我们可以在H5页面中使用微信的JSSDK调起支付。需要注意的是，H5页面必须是在微信的浏览器环境中运行，才能调用JSSDK的支付功能。

三、实现步骤详解

3.1 前置准备工作

在调起H5支付前，我们需要确保以下准备工作已完成：

1. 微信支付商户号：必须拥有微信支付的商户号，并且在微信支付平台上配置了支付目录、域名等信息。
2. H5支付页面：确保已经开发好H5支付页面，该页面支持在微信内通过微信JSSDK调用支付功能。
3. 微信开发平台设置：确保小程序在微信开发平台已经进行了合法域名的配置，并且开启了 WebView 容器权限。

3.2 微信小程序端代码

3.2.1 WebView 组件配置

首先，在小程序的页面中使用 WebView 组件来加载H5支付页面。

<view class="container">
  <web-view src="https://your-h5-domain.com/pay?orderId=12345"></web-view>
</view>

这里的 src 属性指向的是你要调起的H5支付页面的URL，URL可以附带参数，例如订单号等信息。

3.2.2 小程序配置文件

为了确保WebView能够正常访问外部域名，需要在 app.json 文件中配置 webView 允许的域名。

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "支付",
    "navigationBarTextStyle": "black"
  },
  "webview": {
    "allowedDomains": [
      "your-h5-domain.com"
    ]
  }
}

3.3 H5页面端代码

3.3.1 微信JSSDK配置

在H5页面中，首先要配置微信JSSDK，确保页面能够正确调用微信的支付接口。你需要在微信支付后台获取签名并进行相关配置。

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
  wx.config({
    debug: false, // 开启调试模式
    appId: 'your-app-id', // 必填，公众号的唯一标识
    timestamp: 123456789, // 必填，生成签名的时间戳
    nonceStr: 'random-string', // 必填，生成签名的随机串
    signature: 'generated-signature', // 必填，签名
    jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表
  });

  wx.ready(function () {
    // JSSDK配置成功后，可以调用支付接口
  });
</script>

3.3.2 调用微信支付接口

当用户在H5页面点击支付按钮时，可以通过以下代码调起微信支付：

function callWeChatPay(paymentData) {
  wx.chooseWXPay({
    timestamp: paymentData.timestamp, // 支付签名时间戳
    nonceStr: paymentData.nonceStr, // 支付签名随机串
    package: paymentData.package, // 订单详情扩展字符串
    signType: paymentData.signType, // 签名方式
    paySign: paymentData.paySign, // 支付签名
    success: function (res) {
      // 支付成功后的回调
      alert('支付成功');
    },
    fail: function (res) {
      // 支付失败后的回调
      alert('支付失败');
    }
  });
}

// 点击支付按钮时调用该函数
document.getElementById('payButton').addEventListener('click', function () {
  // 获取支付信息后调起微信支付
  const paymentData = {
    timestamp: '123456789',
    nonceStr: 'random-string',
    package: 'prepay_id=wx123456789',
    signType: 'MD5',
    paySign: 'generated-pay-sign'
  };
  callWeChatPay(paymentData);
});

3.4 后端支持

为了确保支付流程顺利完成，后端需要提供支付签名接口。在用户点击支付按钮时，前端H5页面向后端请求获取支付相关的数据，后端生成签名并返回给前端。后端代码的逻辑可以如下：

@RestController
public class PaymentController {

    @PostMapping("/getPaymentData")
    public PaymentData getPaymentData(@RequestParam String orderId) {
        // 生成支付签名的逻辑
        PaymentData paymentData = new PaymentData();
        paymentData.setTimestamp(System.currentTimeMillis() / 1000);
        paymentData.setNonceStr("random-string");
        paymentData.setPackage("prepay_id=wx123456789");
        paymentData.setSignType("MD5");
        paymentData.setPaySign(generatePaySign(paymentData));

        return paymentData;
    }

    private String generatePaySign(PaymentData paymentData) {
        // 根据支付信息生成签名
        return "generated-signature";
    }
}

四、调起H5支付常见问题与解决方案

4.1 跨域问题

由于小程序加载外部H5页面可能会遇到跨域问题，确保H5页面所在的服务器已设置适当的跨域策略。例如，通过添加以下HTTP头部来允许跨域请求：

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST

4.2 微信内支付环境限制

H5支付必须在微信的内置浏览器中调用，因此要确保在H5页面中进行支付前，检查用户是否在微信浏览器环境下：

function isWeChatBrowser() {
  const ua = navigator.userAgent.toLowerCase();
  return ua.indexOf('micromessenger') !== -1;
}

4.3 签名无效问题

H5页面调用支付接口时，如果支付签名不正确会导致支付失败。确保你的签名生成逻辑和微信支付后台配置正确匹配，包括时间戳、随机串和支付包信息。

五、总结

通过本文的介绍，我们详细解析了如何通过微信小程序调起H5页面进行支付。虽然微信小程序有原生的支付接口，但在特定场景下，H5支付更为灵活。通过使用 WebView 组件嵌入H5页面，并利用微信的JSSDK调起支付，可以实现小程序与H5页面的无缝对接。

在实际项目中，我们需要合理配置小程序和H5页面的域名，并确保支付环境的正确性。通过精心设计和完善后端签名逻辑，可以实现稳定可靠的支付流程。

这种实现方式为开发者提供了

多种场景下的支付解决方案，同时也让已有的H5支付系统能够快速迁移到微信小程序中，为用户提供更好的支付体验。

☀️建议/推荐你

  无论你是计算机专业的学生，还是对编程有兴趣的小伙伴，都建议直接毫无顾忌的学习此专栏「滚雪球学Java」，bug菌郑重承诺，凡是学习此专栏的同学，均能获取到所需的知识和技能，全网最快速入门Java编程，就像滚雪球一样，越滚越大，指数级提升。

  码字不易，如果这篇文章对你有所帮助，帮忙给bug菌来个一键三连(关注、点赞、收藏) ，您的支持就是我坚持写作分享知识点传播技术的最大动力。   同时也推荐大家关注我的硬核公众号:「猿圈奇妙屋」 ；以第一手学习bug菌的首发干货，不仅能学习更多技术硬货，还可白嫖最新BAT大厂面试真题、4000G Pdf技术书籍、万份简历/PPT模板、技术文章Markdown文档等海量资料，你想要的我都有！

📣关于我

  我是bug菌，CSDN | 掘金 | infoQ | 51CTO 等社区博客专家，历届博客之星Top30，掘金年度人气作者Top40，51CTO年度博主Top12，掘金等平台签约作者，华为云 | 阿里云| 腾讯云等社区优质创作者，全网粉丝合计30w+ ；硬核微信公众号「猿圈奇妙屋」，欢迎你的加入！免费白嫖最新BAT互联网公司面试题、4000G pdf电子书籍、简历模板等海量资料。

--End