微信开发的各种坑

刚做的一个微信公众号支付的项目

1、调起公众号授权 拿到openid

 `document.getElementById('login').addEventListener('click', function() {

     const wx = {
     appid: '.........', 
     redirect_url: 'http://.........',
     scope: 'snsapi_userinfo',
     }

     const url = `https://open.weixin.qq.com/connect/oauth2/authorize?`
      + `appid=${wx.appid}&`
      + `redirect_uri=${encodeURIComponent(wx.redirect_url)}&`
      + `response_type=code&scope=${wx.scope}&`
      //+ `state=${encodeURIComponent(ref)}`
      + `#wechat_redirect`
     location.href = url
 }, false);`

2、微信支付的时候调起微信支付的接口

//点击充值按钮
if(idx == 1){
          var mobile = $(".mobile").html();
          var payMoney = $(".applyMoney").html(); //充值钱数
          payMoney = payMoney.split("¥")[1];

          $.ajax({
            url:"{:U('wx/start_recharge')}",
            type:"POST",
            data:{"mobile":mobile,"total_fee":Number(payMoney),"coins":Number(star)},
            dataType:"json",
            success:function(data){  
              if (data.code == "1") {
                  //公众号支付
                  WeixinJSBridge.invoke('getBrandWCPayRequest', data.result, function (res) {
                      // 使用以下方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                      //【因此微信团队建议：】当收到ok返回时，向商户后台询问是否收到交易成功的通知，
                      //若收到通知，前端展示交易成功的界面；
                      //若此时未收到通知，商户后台主动调用查询订单接口，查询订单的当前状态，并反馈给前端展示相应的界面。

                      if (res.err_msg == "get_brand_wcpay_request:ok") {
                          //JS API的返回结果get_brand_wcpay_request：ok仅在用户成功完成支付时返回
                          var member_id = $(".member_id").val();
                          // 支付的时候确认一下订单是否已经支付
                          $.ajax({
                              type: 'POST',
                              url: "{:U('wx/sy_order_confirm')}&t="+Date.now(),
                              //请求地址后面加了个时间戳，每次都访问不同的地址不会有缓存，有缓存的话只会成功支付一次
                              data: {
                                  out_trade_no: data.order_id,
                              },
                              dataType: 'json',
                              success: function (jsonData) {

                                  alert(jsonData.msg);

                                  if (jsonData.code == 1) {
                                      // alert("页面跳转等业务处理");

                                      post("{:U('wx/redirect_middle')}",{'member_id':member_id,'type':1})


                                  } 
                              },
                              error: function (XMLHttpRequest, textStatus, errorThrown) {
                                  alert(JSON.stringify(e));

                                  // alert("服务器网络错误！如果收到支付通知，切勿重复支付！");

                              }
                          });
                      } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
                          //由于前端交互复杂，get_brand_wcpay_request：cancel或者get_brand_wcpay_request：fail可以统一处理为用户遇到错误或者主动放弃，不必细化区分。
                          alert("您放弃了支付");

                      } else {
                          //由于前端交互复杂，get_brand_wcpay_request：cancel或者get_brand_wcpay_request：fail可以统一处理为用户遇到错误或者主动放弃，不必细化区分。
                          alert("支付失败,请稍后重试！如果收到支付通知，切勿重复支付！");

                      }
                  });
              } else {
                  alert(data.msg);

              }

            },
            error:function(){
              alert(JSON.stringify(e));
              // alert("响应失败请重试!");
            }  
          });
          $(".alertInfo").removeClass("active");
        }

总结一下遇到的坑
1、微信支付的时候会有缓存问题，解决办法是在请求地址后面加上一个时间戳

url: "{:U('wx/sy_order_confirm')}&t="+Date.now()

这样每次都会请求不一样的地址、
2、 以前在写ajax请求的时候如果响应失败了总是直接就弹出来，这次学到了，在开发的时候应该是

error:function(){
              alert(JSON.stringify(e));

}  

这样可以具体的查看响应失败的原因。

3、虚拟同步请求
在某些特殊情况下，可能需要同步请求，但是页面有没有表单，这时候可以使用虚拟 form 同步请求后台

function post(url,params){
            var form_tpl = document.createElement('form');
            form_tpl.action = url;
            form_tpl.method = 'post';
            form_tpl.display = 'none';
            for(var x in params){
                var opt = document.createElement('input');
                opt.name = x;
                opt.value = params[x];
                form_tpl.appendChild(opt);
            }
            form_tpl.submit();
            return form_tpl;
        }
//注意 params 参数的写法
post("{:U('wx/redirect_middle')}",{'member_id':member_id,'type':1});