uniapp H5集成微信JS支付

在 UniApp 中实现微信 H5 支付功能，你需要使用微信支付的官方 JS SDK，并进行相应的集成和调用。

首先，将微信支付的官方 JS SDK 引入到你的项目中。你可以在微信支付开发者文档中获取并下载最新的 JS SDK 文件，然后将其放置在项目的静态资源目录中。

接下来，在你需要使用微信支付的页面中，添加一个支付按钮，并绑定相关的支付逻辑：

      微信支付   {
          if (res.statusCode === 200) {
            // 第二步：调用微信支付的 JS SDK
            const payParams = res.data; // 从后端接口得到的微信支付参数
            wx.ready(() => {
              wx.chooseWXPay({
                timestamp: payParams.timestamp, // 支付参数中的时间戳
                nonceStr: payParams.nonceStr, // 支付参数中的随机字符串
                package: payParams.package, // 支付参数中的包
                signType: payParams.signType, // 支付参数中的签名类型
                paySign: payParams.paySign, // 支付参数中的签名
                success: () => {
                  // 支付成功的回调处理
                  console.log('支付成功');
                },
                fail: err => {
                  // 支付失败的回调处理
                  console.log('支付失败', err);
                }
              });
            });
          } else {
            console.log('获取微信支付参数失败');
          }
        },
        fail: err => {
          console.log('请求获取微信支付参数失败', err);
        }
      });
    }
  },
  mounted() {
    // 引入微信支付的 JS SDK
    const script = document.createElement('script');
    script.src = '/static/js-sdk/weixin-js-sdk.js'; // 替换为你实际放置 JS SDK 文件的路径
    document.head.appendChild(script);

    script.onload = () => {
      // 初始化微信 JS SDK
      const config = {
        // 替换为你自己的公众号 appid
        appId: 'your-appid',
        // 替换为你自己的当前页面的完整 URL
        debug: false,
        url: window.location.href
      };
      wx.config(config);
    };
  }
};
" _ue_custom_node_="true">

在以上示例中，我们首先通过 uni.request 方法调用后端的接口，获取微信支付参数。请记住，这里的 /get-wechat-pay-params 接口地址和参数需要根据你的后端实现进行替换。

接着，我们在 wxPay 方法中调用微信支付的 JS SDK，通过 wx.ready 方法监听微信 JS SDK 的准备完成事件，然后调用 wx.chooseWXPay 方法发起支付请求，传入从后端接口获得的支付参数。在 chooseWXPay 方法中，你可以根据支付成功或失败的回调进行相应的处理。

最后，在组件的 mounted 钩子函数中，我们引入微信支付的 JS SDK，并初始化微信 JS SDK 的配置。

请注意，以上代码示例中使用了 wx.ready 和 wx.chooseWXPay 方法，这是基于微信的官方 JS SDK 中的方法。确保你在 mounted 钩子函数中正确引入微信支付的 JS SDK，并根据实际情况替换需要的配置参数，如 appid、debug 和接口地址。