微信支付jsapi 前端后端的坑，以及详细流程（前端VUE 后端JAVA）

首先，微信支付需要通过一个微信特定的链接来获取到用户的code，再通过code获取到openid（openid是后面需要传入的参数）；先看一下跳转获取code的代码。（获取code需要在公众号配置授权地址）

 @RequestMapping("getCodeToChildOrder")
    public static String getCodeToChildOrder(String scope,String url) throws Exception {
   
        // scope 为获取授权类型，null为默认授权
        if (scope == null) {
   
            scope = "snsapi_base"; 
        } else {
   
            scope = "snsapi_userinfo";
        }
            String code = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + WeiXinUtils.APP_ID + "&redirect_uri=" + URLEncoder.encode(url, "UTF-8") + "&response_type=code&scope=" + scope + "#wechat_redirect";
            return code;
    }

可见，获取code的这段代码是回跳转到另外一个路径的，参数中的url就是要跳转的路径，很多时候页面跳转需要传递参数，顺带说一下vue中参数的传递和获取参数的方法。（WeiXinUtils.APP_ID是公众号的appid，打开需要收款的公众号，在开发配置中查看）

    var url  = "http://www.baidu.com/Pay_leftAll?orderNumber="+this.order_number

比如说以上这是你需要跳转的页面以及携带的参数，那么把这个链接当作参数传递到后端。在进行页面跳转的时候就在地址栏带了这些参数，前台这样获取参数。

getParams () {
   
                var url = location.search;
                var theRequest = new Object();
                if(url.indexOf("?") != -1){
   
                    var str = url.substr(1);
                    var strs = str.split("&");
                    for(var i = 0;i < strs.length;i++) {
   
                        theRequest[ strs[i].split("=")[0] ] = (strs[i].split("=")[1]);
                    }
                }
                this.orderNumber=theRequest.orderNumber;
            },

然后是前台code的获取方式

getQueryString(name){
   
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
                var r = window.location.search.substr(