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