微信公众号h5支付 以及获取code（前端部分）

记录微信公众号h5支付（前端部分）

• 前一段时间换了一家公司，刚来给了一个项目，h5移动端页面，涉及登录注册、微信绑定、购买等。微信支付以前没作过，不过比较简单，在这里记录一下。

先上官网文档

• 微信支付

• 微信获取code

第一步，先拿到code，拿到code传给后台。

• 这段代码填上就能够用，当用户确认受权之后返回定义的url后，url后就有code参数，而后吧code提出来。

var appid = "公众号id";
    var redirect_uri = encodeURIComponent("成功之后返回地址");
    window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appid + "&redirect_uri=" + redirect_uri + "&response_type=code&scope=snsapi_userinfo#wechat_redirect"
复制代码

• 获取url上附带的code参数

//转码
        function parse_url(url) { //定义函数
    
            var pattern = /(\w+)=(\w+)/ig; //定义正则表达式
    
            var parames = {}; //定义数组
    
            url.replace(pattern, function (a, b, c) {
                parames[b] = c;
            });
            return parames; //返回这个数组.
        }
    //获取当前url 取到code 
     var url = window.location.href;
     		var params = parse_url(url);
     		//params.code 就是当前的code 
复制代码

• 把code传给后台，后台会返回文档提到的几个参数

var appIdVal = appId;
    var timeStampVal = timeStamp;
    var nonceStrVal = nonceStr;
    var packageVal = package;
    var signTypeVal = signType;
    var paySignVal = paySign;
复制代码

• 把参数赋值到函数中便可拉起支付

function onBridgeReady(){
       WeixinJSBridge.invoke(
          'getBrandWCPayRequest', {
             "appId":"",      //公众号id，由商户传入 
             "timeStamp":"", //时间戳，自1970年以来的秒数 
             "nonceStr":"",   //随机串 
             "package":"",    //订单详情扩展字符串
             "signType":"",   //微信签名方式： 
             "paySign":""     //微信签名 
          },
          function(res){
          if(res.err_msg == "get_brand_wcpay_request:ok" ){
          // 使用以上方式判断前端返回,微信团队郑重提示：
                //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
          } 
       }); 
    }
    if (typeof WeixinJSBridge == "undefined"){
       if( document.addEventListener ){
           document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
       }else if (document.attachEvent){
           document.attachEvent('WeixinJSBridgeReady', onBridgeReady); 
           document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
       }
    }else{
       onBridgeReady();
    }
复制代码

• 楼主遇到的问题第是公众号配置问题，由于公众号不是我本身配置，前端部分写好后一直拉不起支付，后来也是各类百度，最后确认是受权页面回调地址错误。
• 至于后台楼主就不太清楚了，没研究过。在这里记录一下，但愿对其余人有点帮助。