React实现微信公众号支付

 请求后台接口获取weChatData数据

送上一波福利

微信公众号开发、企业建站开发、小程序、vue、h5、css3、react等前端视频学习资料关注公众号【码兄】免费获取

请求后台接口获取weChatData数据

然后实现下面代码

/**
     * 微信公众号支付的数据
     */
    if (weChatData !== oldWeChatData && weChatData) {
      if (typeof WeixinJSBridge === "undefined") {
        if (document.addEventListener) {
          document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(weChatData), false);
        } else if (document.attachEvent) {
          document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady(weChatData));
          document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady(weChatData));
        }
      } else {
        this.onBridgeReady(weChatData);
      }
    }

 下面代码里面就是直接拉起微信支付，支付结果的操作

/**
   * 拉起微信公众号支付
   * @param response
   */
  onBridgeReady = (response) => {
    if (response.package === undefined) {
      return;
    }
    WeixinJSBridge.invoke(
      'getBrandWCPayRequest', {
        "appId": response.appid,     //公众号名称，由商户传入
        "timeStamp": response.timestamp,         //时间戳，自1970年以来的秒数
        "nonceStr": response.nonce_str, //随机串
        "package": response.package,
        "signType": response.signType,         //微信签名方式：
        "paySign": response.paySign //微信签名
      },
      function (res) {
        if (res.err_msg === "get_brand_wcpay_request:ok") {
          router.push('/results/check');
        } else if (res.err_msg === "get_brand_wcpay_request:cancel") {
          message.info("支付取消");
        } else if (res.err_msg === "get_brand_wcpay_request:fail") {
          router.push('/results/check');
        } else {
          message.info(res.err_msg);
        }
        WeixinJSBridge.log(response.err_msg);
      }
    );

  };

以上操作的过程中在android中会出现拉起微信支付慢的情况，考虑的android支付情况我们可以给微信请求数据成功后执行一个加载圈用户不能操作、知道用户取消支付、支付成功、失败才让加载圈隐藏。