关于react开发微信公众号前端发起微信支付的坑

前言：近期初次试着使用react独自开发微信公众号，期间也是各种采坑。这里说一下开发过程中最难跨越的微信支付。灵魂工程师都是与度娘为伴的。老夫也是各种百度翻文档。但由于太菜总是找不到适合自己的方案。费了很长时间整理出了适合自己需求的方案。总结一下方便以后开发使用：

$\color{red}{特别注意：微信支付的测试一定一定要在线上测试，本地是测不了的报错报错报错！！！！}$

项目需求：用户点击支付缴费支付按钮向微信官方发起支付下单！！！！

解决方案

$\color{green}{心急不想看，直接去文档底部复制粘贴源代码吧！！！！}$

官方微信支付文档信息 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

前提条件: 支付前需要先下单拿到订单信息（签名的时间戳，生成签名的随机串，公众号的唯一标识，签名等信息）
1.react为单页面app应用，需要入口文件（index.htmol中）引入下面文件。

// 只需要引入weixin-1.4.0.js 调试不成功时引入jq
// <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

在支付页面（pay.jsx中）通过wx.config初始化配置


window.wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: data.appId, // 必填，公众号的唯一标识
        timestamp: data.timeStamp, // 必填，生成签名的时间戳
        nonceStr: data.nonceStr, // 必填，生成签名的随机串
        signature: data.paySign,// 必填，签名
        jsApiList: ["chooseWXPay"] // 必填，需要使用的JS接口列表chooseWXPay为支付js接口
      });

可加入初始化配置失败时的函数提示

window.wx.error(function (err) {
        console.log("初始化失败！");
        alert(err);
      });

在window.wx.ready()中放入支付函数window.wx.chooseWXPay()（ready个人理解相当于onload函数，意为值config初始化完成之后执行调用支付接口）

window.wx.ready(() => {
        window.wx.chooseWXPay({
          appId: data.appId,
          nonceStr: data.nonceStr, // 支付签名随机串，不长于 32 位
          package: data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
          signType: data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
          paySign: data.paySign, // 支付签名
          timestamp: data.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
          success: function (res) {
            // 支付成功后的回调函数
           // 执行成功的回调操作 
          },
          fail: function (res) {
            alert("支付失败");
            alert(res.errMsg);
          }
        })
      })

此整个支付过程的分解步骤结束。下面附上完整代码

完整代码

index.html(入口文件中)

// 只需要引入weixin-1.4.0.js 调试不成功时引入jq
// <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

pay.jsx(支付页面jsx)

操作时可将下面代码中PayCost函数中未注释部分直接放入自己需求页面下单函数成功回调中（拿到后台返回的订单信息之后才能向官方发起支付）

// ====支付下单 payCost为点击支付按钮触发的函数 
  PayCost = async () => {  
    /*  // 该注释为收集数据发送后端下单过程 
    //此处为发起订单（下单）需要准备的信息 
    const { paymentProject, student } = this 
    const PaymentInfo = {
      paymentProjectId: paymentProject.paymentProjectId,
      parentUserId: storageUtils.getUser("userInfo").parentUserId,
      studentId: student.studentId,
      transactionMoney: paymentProject.paymentProjectMoney,
      applyPaymentName: paymentProject.paymentProjectName,
      userOpenId: storageUtils.getUser("userInfo").parentUserOpenID,
    }
    // 此处开始向后台发起请求下单
    Toast.loading("加载中...")
    const result = await reqPayOrder(PaymentInfo)
    Toast.hide()
    if (result[0].status === "200") { // 状态200 请求成功
      const data = result[0].data// ====拿到后台返回的订单信息
      */
      // ==== 开始配置信息上述操作1 过程
      window.wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: data.appId, // 必填，公众号的唯一标识
        timestamp: data.timeStamp, // 必填，生成签名的时间戳
        nonceStr: data.nonceStr, // 必填，生成签名的随机串
        signature: data.paySign,// 必填，签名
        jsApiList: ["chooseWXPay"] // 必填，需要使用的JS接口列表
      });
        // ==== 开始处理初始化配置失败是提示信息 上述操作2 过程
      window.wx.error(function (err) {
        console.log("初始化失败！");
        alert(err);
      });
        //=== 此处在 config完成初始化配置之后调用支付函数
      window.wx.ready(() => {
          // 调用支付函数
        window.wx.chooseWXPay({
          // appId: data.appId, // 可不发
          nonceStr: data.nonceStr, // 支付签名随机串，不长于 32 位
          package: data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
          signType: data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
          paySign: data.paySign, // 支付签名
          timestamp: data.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
          success: function (res) {
            // 支付成功后的回调函数
            alert(res.errorMsg)
          },
          fail: function (res) {
            alert("支付失败");
            alert(res.errMsg);
          }

        })
      })
    }
  }