H5微信支付

@H5微信支付前端处理流程

背景

基于项目的需要，需要做一个H5端的商城，自然少不了支付，鉴于微信的社交能力，我们前期只考虑了微信支付，在此过程中遇到的一些问题，简单整理下。
这里我只说前端需要处理的，其它的配置及参数什么的后端会给你整好所以不做介绍。

支付方式

1.微信内通过WeixinJSBridge（jsApi）来接入支付，具体方式可以查看文档
2.微信环境外（比如浏览器）吊起微信支付，具体方式可以查看文档

jsApi方式支付

1.此种方式只能在微信环境内支付，通过WeixinJSBridge（微信内置对象）来吊起支付。
2.支付流程，需要先去微信获取授权换取openid，（建议进入支付页面前先拿好openid,因为我在开发过程中发现在当前页面获取的话用户刷新页面 会报错，用户授权获取到的code只能用一次。）
我们的项目采用的React。所以通过window.WeixinJSBridge来判断是否有WeixinJSBridge否则代码会报错。

   // 外界调用 直接引入 wxPay.js 传入支付参数 以及跳转页面路由
  // 首先封装具体的封装方法
  // 参数说明 history ：路由 方便支付成功后可以跳转制定页面。
  // params: 支付需要的饿参数
  function onBridgeReady(params, history) {
  if (window.WeixinJSBridge) {
    window.WeixinJSBridge.invoke(
      'getBrandWCPayRequest',
      {
        appId: params.appId, // 公众号名称，由商户传入
        timeStamp: params.timeStamp, // 时间戳，自1970年以来的秒数
        nonceStr: params.nonceStr, // 随机串
        package: params.package,
        signType: params.signType, // 微信签名方式：
        paySign: params.paySign, // 微信签名
      },
      function(res) {
        if (res.err_msg === 'get_brand_wcpay_request:ok') {
          history.replace({
            pathname: params.pathname,
          });
        }
      },
    );
  }
}

export default function wxPay(params, history) {
  console.log('支付功能', params);

  if (typeof WeixinJSBridge === 'undefined') {
    if (document.addEventListener) {
      document.addEventListener('WeixinJSBridgeReady', onBridgeReady(params, history), false);
    } else if (document.attachEvent) {
      document.attachEvent('WeixinJSBridgeReady', onBridgeReady(params, history));
      document.attachEvent('onWeixinJSBridgeReady', onBridgeReady(params, history));
    }
  } else {
    onBridgeReady(params, history);
  }
}

非微信环境内支付

1.这种方法支付完成后微信建议增加二次确认弹窗，用于确认用户是否支付完成，为什么这样做开发文档上有体现。
2.关于支付完成后回调地址 建议采用前端自己写好传给后端，这样回调地址就会变得灵活多变，方便开发及测试。
ps注意
1.由于各个厂商浏览器机制不同，部分手机在支付完成后通过配置的redirect_url回退到二次确认页面的时候，浏览器会刷新，所以你的弹框可能会显示不正确，所以自己可以采取一些方式（增加参数/本地存储）来判断。
2.ios手机浏览器必定会重新刷新。

//微信环境外支付后端会直接返回一个url,直接拿这个结果在当前页面打开，就可以唤醒微信，吊起支付。
 window.location.href = res.data.mwebUrl;

else

1.调试时微信支付是不支持本地IP的，所以请配好开发及正式域名。
2.建议项目不要用hash（#）路由模式，这会给你带来意想不到的BUG.
3.哪里写错的地方请大家评论指正。