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.哪里写错的地方请你们评论指正。