(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上面說

是以必須要重定向到一個中間頁面來喚起微信，到時候微信支付完成或取消支付都會，再回到這個中間頁面，中間頁面可以讓使用者自己做處理或者用輪詢去查資料庫訂單狀态，上圖請确認微信需要放到一個中間頁面 ，下圖就是我自己随便做的一個跳轉頁面