关于前端: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.哪里写错的中央请大家评论斧正。