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