前端实现微信支付（H5，微信小程序）_微信h5支付

  if (document.addEventListener) {
    document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
  } else if (document.attachEvent) {
    document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
    document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
  }
} else {
  onBridgeReady();
}

function onBridgeReady() {
    WeixinJSBridge.invoke(
      'getBrandWCPayRequest', {
        "appId": "appId", //公众号名称，由商户传入
        "timeStamp": "timeStamp", //时间戳，自1970年以来的秒数
        "nonceStr": "nonceStr", //随机串
        "package": "package",
        "signType": "MD5", //微信签名方式：
        "paySign": "paySign" //微信签名
      },
      function(res) {
        // 支付成功
        if (res.err_msg == "get\_brand\_wcpay\_request:ok") {
          // 使用以上方式判断前端返回,微信团队郑重提示：
          //res.err\_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
        }
        // 支付过程中用户取消
        if (res.err_msg == "get\_brand\_wcpay\_request:cancel") {

        }
        // 支付失败
        if (res.err_msg == "get\_brand\_wcpay\_request:fail") {

        }
        /\*\*

• 其它
• 1、请检查预支付会话标识prepay_id是否已失效
• 2、请求的appid与下单接口的appid是否一致
• */
  if (res.err_msg == “调用支付JSAPI缺少参数：total_fee”) {

        }
      });
  }

从上述代码中我们可以看出，先会检测支付环境中的 WeixinJSBridge，个人认为是为了判断执行代码是否处于微信环境。在执行WeixinJSBridge.invoke()的接口请求时，会用到一组支付签名的数据，这正是通过后端请求支付签名所给的。  
 分别为以下五种数据：

* appId为公众号名称
* timeStamp为时间戳，自1970年以来的秒数
* nonceStr为随机串
* package为订单详情扩展字符串
* signType为微信签名方式，默认为MD5
* paySign为微信签名，通过签名生成算法生成  
 `（注意：在调用支付接口的参数，支付签名的数据中的字段名受大小写敏感）`

#### 1.3.2 微信公众号的JSSDK中的wx.chooseWXPay

##### 1.3.2.1 使用wx.chooseWXPay的前置条件

wx.chooseWXPay使用前需要先准备jweixin-1.6.0.js文件，并在需要使用的页面引用此JS文件。具体使用说明可以查看[微信官方JSSDK文档]( )

##### 1.3.2.2 wx.chooseWXPay相关代码

let WeChatPay = function() {
// 2、引入js后、获取公众号校验信息
let timestamp = ‘’,
nonceStr = ‘’,
signature = ‘’;
let v = {
// 用于换取微信校验信息的参数：要求不可以包含 “#” 号
url: location.split(‘#’)[0]
};

// 3、通过config接口注入权限验证配置（需要同步进行，在获取到校验信息后方可注入config，否则校验失败！）
wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '', // 必填，签名
  jsApiList: ["checkJsApi", "chooseWXPay", "updateAppMessageShareData", "updateTimelineShareData"] // 必填，需要使用的JS接口列表
});

axios.post('/wx/pay/orderPay\_XXXX', data).then(res => {
  // 支付成功状态
  if (res.code == 200) {
    // 获取支付必备的参数
    let {
      nonceStr,
      package,
      signType,
      paySign
    } = res.data;
    // 4、通过ready接口处理成功验证
    wx.ready(function() {
      /\* 微信支付 \*/
      wx.chooseWXPay({
        timestamp: 0, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
        nonceStr: nonceStr, // 支付签名随机串，不长于 32 位
        package: package, // 统一支付接口返回的prepay\_id参数值，提交格式如：prepay\_id=\\*\\*\\*）
        signType: signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
        paySign: paySign, // 支付签名
        success: function(res) {
          // 前端判断返回方式，微信团队郑重提示：不保证绝对可靠，切记！
          if (res.errMsg == 'chooseWXPay:ok') {
            // 【支付成功】
          } else if (res.errMsg == 'chooseWXPay:cancel') {
            // 【支付取消】：用户取消支付不会进入这个判断，而是进入complate和cancel函数
          } else {

          }
        },
        complete: function(res) {
          // 接口调用完成时执行的回调函数，无论成功或失败都会执行
          if (res.errMsg == 'chooseWXPay:ok') {
            // 【支付成功】：支付成功提示页面，点击完成按钮之后
            wx.closeWindow(); /\* 关闭微信窗口，调用时需要在config中进行校验 \*/
          } else if (res.errMsg == 'chooseWXPay:cancel') {
            // 【支付取消】
          } else {

          }
          /\*\*

• iOS和Android支付成功点击“完成”后都会进入success和complete函数，都返回’chooseWXPay:ok’
• （也有人说Android支付成功不进入success函数，）
• 原因是【iOS和Android返回数据不同。支付成功后Android返回 {“errMsg”:“getBrandWCPayRequest:ok”}，iOS返回{“err_Info”:“success”,“errMsg”:“chooseWXPay:ok”}，故Android找不到success方法，导致失败】
• */
  },
  fail: function(err) {
  // 接口调用失败
  },
  cancel: function(err) {
  // 用户点击取消时的回调函数：用户取消支付后实际上进入cancel 和 complate函数
  }
  });
  });
  }
  }).catch(err => {
  console.log(‘支付失败：’, err);
  });
  }

观察上述代码，对比之前的JS API支付接口，可以看多出了2，3两步，需要进行config接口的权限认证，下面支付场景就不多叙述了，重点看第2，3步。  
 在此中不但需要支付签名的数据，还是用到了jsApiList的字符串数组。那jsApiList的字符串数组是什么用呢？在下面**1.3.2.3 jsApiList** 会具体说明一下。

##### 1.3.2.3 jsApiList

## 最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。