微信支付失败后如何正确处理用户取消或网络异常？

你遇到的问题很常见，微信支付的回调有时候确实不太稳定。首先建议你在主题里加一个全局的错误处理机制，这样就算微信那边没反应，也不会白屏。

在你的现有代码基础上，可以加上超时处理和手动关闭loading状态。我一般会用JavaScript的 Promise.race 来实现超时控制：

function wechatPay(payData) {

  let loading = true;

  showLoading(); // 自己定义的显示加载动画函数

  

  const payPromise = new Promise((resolve, reject) => {

    WeixinJSBridge.invoke('getBrandWCPayRequest', payData, function(res) {

      if (res.err_msg === 'get_brand_wcpay_request:ok') {

        resolve('success');

      } else {

        reject(res);

      }

      loading = false;

    });

    

    setTimeout(() => {

      if (loading) {

        reject('timeout');

      }

    }, 30000); // 30秒超时

  });



  return payPromise;

}

然后在外面再包一层处理逻辑：

wechatPay(payData).then(result => {

  hideLoading();

  alert('支付成功');

}).catch(error => {

  hideLoading();

  if (error === 'timeout') {

    alert('网络连接超时，请重试');

  } else if (error.err_msg === 'get_brand_wcpay_request:cancel') {

    alert('用户取消了支付');

  } else {

    alert('支付失败，请重试');

  }

});

这个方案在我好几个项目里都用过，效果还不错。记得在页面加载时先判断一下 WeixinJSBridge 是否存在，不存在的话要等它ready再调用。这玩意儿有时候就是这么不讲道理。

血泪教训：微信支付的回调根本不可靠，尤其是用户主动取消或者网络中断时，getBrandWCPayRequest的回调经常不触发，这不是你代码写错了，是微信自己的坑。

你现在的写法本身没问题，但必须加兜底逻辑，不然页面真会卡死。

首先，调起支付前一定要开个loading状态，比如显示个遮罩+转圈动画，别直接白屏等。

然后，回调里处理成功和失败，但别只依赖回调——加个定时器，比如5秒后自动清理状态，假设“支付流程已结束”，让用户能继续操作。

举个例子，你这样改：

var payTimer = null;



function callWechatPay(payData) {

  // 先开loading

  showLoading();



  payTimer = setTimeout(function() {

    hideLoading();

    alert('支付响应超时，请检查网络或重试');

  }, 5000);



  WeixinJSBridge.invoke('getBrandWCPayRequest', payData, function(res) {

    clearTimeout(payTimer);

    hideLoading();



    if (res.err_msg === 'get_brand_wcpay_request:ok') {

      // 跳转结果页或轮询订单状态确认

      checkOrderStatus();

    } else if (res.err_msg === 'get_brand_wcpay_request:cancel') {

      // 用户取消，给个友好提示

      alert('您已取消支付');

    } else {

      alert('支付失败，请重试');

    }

  });

}

关键点有三个：

1. 一定要有loading状态，且必须有清除逻辑，别让页面卡死
2. 回调里记得clearTimeout，不然5秒后弹个“超时”提示，用户明明已支付成功，会骂娘
3. 最好配合后端轮询订单状态，因为前端回调不可信，微信可能成功扣款但前端回调没触发，用户刷新页面发现订单还没变“已支付”，那才是真坑

我之前项目就栽在这儿：用户点了取消，但钱扣了，订单没更新，客服电话被打爆。后来加了轮询+超时兜底才稳住。

别嫌麻烦，支付这玩意儿宁可多写点容错代码，也别让用户干等白屏。