微信开发的各种坑

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

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});