/**
 * （觸屏版）跳轉游記支付二維碼頁 (介面返回表單如下)
*  <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>*/

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

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