(Web、触屏)微信支付功能调用以及QQ回调地址配置、以及遇到的一些坑

/**
 * （触屏版）跳转游记支付二维码页 (接口返回表单如下)
 *  <form id="lolapaysubmit" name="lolapaysubmit" action="https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb?prepay_id=wx13092343961008fc45bd70563985297260&package=1871099982&redirect_url=https%3A%2F%2Ft.2bulu.com%3A7203%2Flolapay%2Fbusiness_success.htm%3ForderNumber%3DRO201806130922281712461"
 * method="post">
 * <input type="submit" value="确认">
 * </form>
 * <script>
 * document.forms['lolapaysubmit'].submit();
 * </script>
 *
 */
function travelPayPage(articleId,money){
    $.ajax({
        type:'post',
        url:basePath+'/community/pay_travel.htm',
        data:{articleId:articleId,payType:2,money:money},
        success:function(data){
            if(data.code==13045){
                Msg.fade({text:"订单已支付"});
            }else if(data.code==0){//请求成功
                //会返回一个H5原生表单，通过构造div来唤起微信支付 就是下面返回的js代码
                 var $mainElement = document.getElementById("payInsuranceDiv");
                if($mainElement && $mainElement.length !=0){
                   $mainElement.parentNode.removeChild($mainElement);
                 }
                var turnForm = document.createElement("div");
                turnForm.id = "payInsuranceDiv";
                turnForm.style.display = "none";
                document.body.appendChild(turnForm);
            $("#payInsuranceDiv").html(data.result);
            }else if(data.code==202){//无登录
                window.location.href = basePath+"/login.htm";
            }else{//系统错误
                Msg.fade({text:"系统错误"});
            }
        }
    });
}      

/**
 * （PC端）跳转游记支付二维码页
 */
var requestInterval;
function travelPayPage(articleId,money,showFlag){
     $.ajax({
         type:'post',
         url:basePath+'/community/pay_travel.htm',
         data:{articleId:articleId,payType:2,money:money},
         success:function(data){
             if(data.code==13045){
                 Msg.fade({text:"订单已支付"});
             }else if(data.code==0){//请求成功
               $("#orderId").val(data.result.out_trade_no);//订单号
               $(".qr-code-img").attr("src","../qrCode?"+data.result.code_url);//二维码绑定链接
                $("#payMoney").text(money);
               if(showFlag==1){
                    $(".reward_window1").hide();
                    $(".reward_window3").show();
                }else if(showFlag ==2){
                    $(".reward_window2").hide();
                    $(".reward_window3").show();
                }
            //定时扫描订单支付情况
                 requestInterval = window.setInterval("getPayResult('"+data.result.out_trade_no+"')",3000);//3秒钟循环检查订单支付情况
             }else if(data.code==202){//无登录
                 window.location.href = basePath+"/login.htm";
          }else{//系统错误
                 Msg.fade({text:"系统错误"});
             }
         }
     });
}      

/****
 * 支付结果请求
 * @param orderId 订单id
 * @returns
 */
function getPayResult(orderId){
    $.ajax({
        type:'get',
        url:basePath+'/community/get_travel_detail.htm',
        data:{orderId:orderId},
        success:function(data){
            if(data.order.status== 2){
                window.clearInterval(requestInterval);
            $("#payUserHeadPic").attr("src",data.order.user.cover.fileUrl);
            $(".payUserName").text(data.order.user.nickname);
                $(".appreMoney").text(data.order.money/100);
                $(".reward_window4").show();
                // location.href=basePath+'/lolapay/business_ac_success.htm?id='+orderId;
            }
        }
    });
}      

2.微信拦截，获取微信登录的openid

此处测试经常遇到的问题总结如下：

1.需要配置域名测试，必须是http://www.baidu.com这样的类似的域名，必须是www开头

2.唤起微信支付页面二级链接必须要在微信官网上有注册，是二级目录的 http://www.2bulu.com/

http://www.2bulu.com/lolapay/webchat_travel_pay.htm //这样子就可以了、二级目录：lolapay，换成别的就不可以
就会出现图三错误：url未注册

      

3.本地测试的时候必须是正规的域名，后面不能加后缀如 http://www.xxx.com/tbl/....这个tbl不能要的

必须是这个样子：http://www.2bulu.com/community/gotohuatinfo.htm?id=40467&type=1      

/*//微信调用成功会出现如下的链接如下：
https://open.weixin.qq.com/connect/oauth2/authorize?
    appid=wxf4089e0e20e0c44b&redirect_uri=http%3A%2F%2Flocalhost%3A8080%2Ftbl%2Fcommunity%2Fcommon%2F
authorization_open_id.htm%3Fa%3Db&response_type=code&scope=snsapi_base&state=authorize_flag
&uin=NDE1MzkwMjQw&key=2d22aaf0f212624a6154ffe6be5f7790d1b68cf1bade9a5203542e07012e86f01da8d387a1669b38da63b1495bc32148&
pass_ticket=dfUpz5Or1CLGRwxk2rJYbR5+3diWDT4Ik8wcvTYorY5/K5hYIcbKAsGZOx4uVFlLNLcm/EqrFlRrqZ0a00Q7nA==
*/


/*这个是接口返回的js用来唤起
*<script>
function onBridgeReady(){
    WeixinJSBridge.invoke('getBrandWCPayRequest',{"timeStamp":"1528875741","package":"prepay_id=wx1315431306070889f094a7181293102091",
            "paySign":"254DA78D5BD8E76571F2B12598EE0846","appId":"wxf4089e0e20e0c44b","signType":"MD5","nonceStr":"s8oehike250smturtr3tjqi2ir2qe1t0"},
        function(res){if(res.err_msg=="get_brand_wcpay_request:ok"){
            window.location.href='https://t.2bulu.com:7203/lolapay/business_success.htm?orderNumber=RO201806131542113072057'}});}
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();
}
</script>*/      

4.本地测试话，需要改下host文件：映射为域名 

127.0.0.1      www.2bulu.com      

package com.lolaage.tbl.util.intercepter;

import javax.servlet.RequestDispatcher;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.log4j.Logger;
import org.springframework.util.StringUtils;
import org.springframework.web.servlet.ModelAndView;
import org.springframework.web.servlet.handler.HandlerInterceptorAdapter;

import com.lolaage.tbl.util.Config;
import com.lolaage.tbl.util.LoginUtil;
import com.lolaage.tbl.util.TerminalUtil;
import com.lolaage.util.LolaPayUtil;
public class WechatAuthorizationIntercepter extends HandlerInterceptorAdapter {
    
    private static Logger logger = Logger.getLogger(WechatAuthorizationIntercepter.class);
    
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler)
        throws Exception {
        String path = request.getRequestURI();
        
        if (TerminalUtil.isWeChat(request) && path.indexOf("common/authorization_open_id.htm") > -1  ) {
            String openId = request.getSession().getAttribute("authorization_open_id") != null?request.getSession().getAttribute("authorization_open_id").toString():null;
            if(openId==null || "".equals(openId)){
                String state = request.getParameter("state");
                if("authorize_flag".equals(state)){//判断是否为微信获取用户信息请求调用
                    String code = request.getParameter("code");//用户同意授权，获取code
                    openId = LolaPayUtil.getOpenId(code).getString("openid");
                    request.getSession().setAttribute("authorization_open_id", openId);
                    String strBackUrl = request.getSession().getAttribute(LoginUtil.LOGIN_SUCCESS_BACK_PATH_NAME)+"";
                    // 处理完成后仍未登录,跳转到登录页面
                    response.sendRedirect(strBackUrl.replace("＆", "&"));
                    return false;
                }
            }else{
                String strBackUrl = request.getSession().getAttribute(LoginUtil.LOGIN_SUCCESS_BACK_PATH_NAME)+"";
                 // 处理完成后仍未登录,跳转到登录页面
                 response.sendRedirect(strBackUrl);
                 return false;
            }
            request.getSession().setAttribute(LoginUtil.LOGIN_SUCCESS_BACK_PATH_NAME, request.getHeader("referer"));
            String strBackUrl =  Config.previewAddress      //项目名称  
            + request.getServletPath().substring(1)      //请求页面或其他地址  
            + "?" + (request.getQueryString()!=null?request.getQueryString():"a=b"); //参数 
            request.setAttribute("requestUrl", LolaPayUtil.toAuthorize(strBackUrl,"snsapi_base"));
            RequestDispatcher rd = request.getRequestDispatcher("/common/wechat_authorization.htm");
            rd.forward(request,response);
            return false;
        }
        return super.preHandle(request, response, handler);
    }
    
    @Override
    public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler,
        ModelAndView modelAndView)
        throws Exception {
        super.postHandle(request, response, handler, modelAndView);
    }
    
    @Override
    public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex)
        throws Exception {
        super.afterCompletion(request, response, handler, ex);
    }
    
    
}      

图三

https://connect.qq.com/manage.html#/appinfo/web/101344923

配置回调地址、地址必须是域名http开头，加上正确的地址

手机端用微信支付经常会遇到一个问题就是回调地址，提前回调了，通过查看微信支付的API上面说

所以必须要重定向到一个中间页面来唤起微信，到时候微信支付完成或取消支付都会，再回到这个中间页面，中间页面可以让用户自己做处理或者用轮询去查数据库订单状态，上图请确认微信需要放到一个中间页面 ，下图就是我自己随便做的一个跳转页面