微信公众号H5支付的两种方式

1.老版微信支付,通过微信APP自带的浏览器中的WeixinJSBridge支付

这种方式无需引入任何js,但必须在微信中打开

    wxPay(payInfo){ //老版微信支付,通过微信浏览器中的WeixinJSBridge支付
      function onBridgeReady() {
        WeixinJSBridge.invoke(
          'getBrandWCPayRequest', {
            "appId": payInfo.appId, //公众号名称，由商户传入     
            "timeStamp": payInfo.timeStamp, //时间戳，自1970年以来的秒数     
            "nonceStr": payInfo.nonceStr, //随机串     
            "package": payInfo.package,
            "signType": payInfo.signType, //微信签名方式：     
            "paySign": payInfo.sign //微信签名 
          },
          function(res) {
            if(res.err_msg == "get_brand_wcpay_request:ok") {
              console.log('支付成功')
              //在这里做后续操作
            } else if(res.err_msg == "get_brand_wcpay_request:cancel" || res.err_msg == "get_brand_wcpay_request:fail") {
              console.log('取消支付');
            }
          });
      }
      if(typeof WeixinJSBridge == "undefined") {
        if(document.addEventListener) {
          document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
        } else if(document.attachEvent) {
          document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
          document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
        }
      } else {
        onBridgeReady()                   ;
      }
    },

2.新版微信支付,通过weixin-js-sdk支付

这种方式需要安装npm install weixin-js-sdk --save 并引入import wx from 'weixin-js-sdk'

通过后端(获取签名需要的参数需要在后端存储以便多次使用)接口获取微信配置参数

    wxPay2(payInfo){ //新版微信支付,通过wx-jssdk支付
      const url=location.href //.split('#')[0]  根据需要看是否需要截取#前面的
      axios({url:'/weixin/getWxConfig?url='+url})
        .then(res => {
          console.log(res)
          let data=res.data
          wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: data.appid,
            timestamp: data.timestamp,
            nonceStr: data.nonceStr,
            signature: data.signature,
            jsApiList: ['checkJsApi', 'chooseWXPay']
          });
          wx.ready(() => {
            console.log('配置成功')
            wx.checkJsApi({
              jsApiList: ['chooseWXPay'], // 需要检测的 JS 接口列表，所有 JS 接口列表见附录2,
              success: function(res) {
                // 以键值对的形式返回，可用的 api 值true，不可用为false
                // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
                console.log('验证chooseWXPay结果:',res)
              }
            });
            wx.chooseWXPay({
              timestamp: data.timeStamp, // 支付签名时间戳，注意微信 jssdk 中的所有使用 timestamp 字段均为小写。但最新版的支付后台生成签名使用的 timeStamp 字段名需大写其中的 S 字符
              nonceStr: data.nonceStr, // 支付签名随机串，不长于 32 位
              package: data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
              signType: data.signType, // 微信支付V3的传入 RSA ,微信支付V2的传入格式与V2统一下单的签名格式保持一致
              paySign: data.sign, // 支付签名
              success: function (res) {
                // 支付成功后的回调函数
                console.log('支付结果:' + JSON.stringify(res));
                if(res.errMsg==='chooseWXPay:ok'){
                  console.log('支付成功')
                }
              },
            });
          })
          wx.error(function (res) {
            console.log(res)
          });
        }).catch(err => {
          console.error(err);
        });
    },

参考:微信jssdk官方文档