h5页面 如何进行微信支付呢?

H5生成微信支付的实现思路

1.提前在微信中进行相应的申请操作
2.后端生成预支付单
3.跳转至微信支付中间页

==============注意事项======================
 ✅ 注意事项
- 确保域名已在微信商户平台正确配置
- 所有签名操作必须在后端完成，避免密钥暴露
- 微信支付只支持在微信内置浏览器中打开页面调起支付

1.前提条件

- 拥有微信商户号，并且申请开通了 H5 支付权限。
- 配置好支付域名（确保当前页面网址符合微信白名单）。
- 获取用户的 OpenID（如果需要）。

2.后端生成预支付订单

前端无法直接调起微信支付，需后端通过微信统一下单接口生成预支付交易单：
- 请求地址：`https://api.mch.weixin.qq.com/pay/unifiedorder`
- 参数包括：商品描述、订单号、金额、回调地址、支付类型等。
- 微信返回 `prepay_id` 等信息用于前端唤起支付。

> 注意：签名字段 `sign` 必须由后端生成，不能泄露私钥。

3.前端跳转到微信支付中间页(适用于 H5)

  后端将微信返回的数据组装成如下格式返回给前端：
	 {
	  "appId": "wx8888888888888888",
	  "timestamp": "1609436768",
	  "nonceStr": "5K8264ILTKCH16CQ2502SI8ZNMTM67VS",
	  "package": "prepay_id=wx26160922228953ac8efd8d5b88888888",
	  "signType": "MD5",
	  "paySign": "C380BEC2BFD727A4CE60FED1213676F6"
	}

前端使用 `WeixinJSBridge` 调用微信支付组件

function onBridgeReady(data) {
  WeixinJSBridge.invoke(
    'getBrandWCPayRequest', {
      "appId": data.appId,     // 公众号ID
      "timestamp": data.timestamp, // 时间戳
      "nonceStr": data.nonceStr,   // 随机字符串
      "package": data.package,     // 预支付交易包
      "signType": data.signType,   // 签名方式
      "paySign": data.paySign      // 签名值
    },
    function(res) {
      if (res.err_msg === "get_brand_wcpay_request:ok") {
        alert("支付成功");
      } else if (res.err_msg === "get_brand_wcpay_request:cancel") {
        alert("用户取消支付");
      } else {
        alert("支付失败：" + res.err_msg);
      }
    }
  );
}

// 调用支付前需要判断是否微信环境
if (typeof WeixinJSBridge === "undefined") {
  document.addEventlistener('WeixinJSBridgeReady', function() {
    onBridgeReady(data); // data为后端传来的支付参数
  }, false);
} else {
  onBridgeReady(data);
}

4.支付结果回调处理

   微信支付完成后会异步通知商户服务器（后台配置的 notify_url）。
   商户服务器应验证签名并返回 `success` 给微信，防止重复通知。
   可以通过轮询或 WebSocket 主动更新前端支付状态。