微信h5支付前段代碼

一.首先，需要確認是否在微信開通了這個服務，如果開通了，如下圖

二.就是前段和后台互調。
😆😆微信h5支付官網地址：https://pay.weixin.qq.com/wiki/doc/api/H5.php?chapter=15_4
根據官網解釋，前段要做的事情很簡單：就是在用戶點擊微信支付按鈕的時候，跳轉到后台返回的MWEB_URL即可。

但是，官網說：
注意：

  1.需對redirect_url進行urlencode處理

  2.由於設置redirect_url后,回跳指定頁面的操作可能發生在：1,微信支付中間頁調起微信收銀台后超過5秒 2,用戶點擊“取消支付“或支付完成后點“完成”按鈕。因此無法保證頁面回跳時，支付流程已結束，所以商戶設置的redirect_url地址不能自動執行查單操作，應讓用戶去點擊按鈕觸發查單操作。回跳頁面展示效果可參考下圖
也就是說跳轉MWEB_URL打開微信支付頁面和MWEB_URL返回我們自己的頁面是同時發生的。那么怎么返回支付成功頁面呢？官網給出的方案是給一個提示框，讓用戶點擊再去判斷有沒有支付
ps:經過測試：1.小米的沒有返回支付成功頁面，直接返回了支付選擇頁面，沒有任何反應
　　　　　　2.華為有提示框，但是他們沒有直接跳轉url，是通過form表單提交去跳轉的。這樣導致的結果是：ios跳轉微信支付頁面會有一個彈窗，如果是ios的用戶點了取消，那么再次點擊，也去不了支付頁面，除非刷新頁面。而安卓用戶點擊了取消，必須清緩存才能去支付成功頁面。體驗很不好。
我們的解決方案：

if(paytype==2){//微信支付
    if(isWeiXin()){//微信公眾號支付
        var apiConfig=back.data.wxpaysignmap;
        // alert(JSON.stringify(apiConfig));
        function onBridgeReady(){
           WeixinJSBridge.invoke(
               'getBrandWCPayRequest', {
                   "appId":apiConfig.appId,//公眾號名稱，由商戶傳入     
                   "timeStamp":apiConfig.timeStamp,//時間戳，自1970年以來的秒數     
                   "nonceStr":apiConfig.nonceStr,//隨機串     
                   "package":apiConfig.package,   
                   "signType":apiConfig.signType,//微信簽名方式：     
                   "paySign":apiConfig.paySign //微信簽名
               },
               function(res){     
                   if(res.err_msg == "get_brand_wcpay_request:ok" ) {
                       window.location.href="paysuccess.html?tradeno="+tradeno;//到支付成功頁面
                   }else if(res.err_msg == "get_brand_wcpay_request:fail" || res.err_msg=="get_brand_wcpay_request:cancel"){
                        This.isAjax=true;
                   } 
               }
           ); 
        }
        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();
        }
        This.initQuestSuc(back.data.tradeno);
        This.isAjax=true;
        return;
    }
    if(IsPC()){//pc端的微信支付
        //微信支付
        This.returnpay=true;
        $(".paylist_tit").addClass("hide");
        $(".pay_tit").html("微信支付");
        $(".paytype_con").addClass("hide");
        $(".ercodecon").fadeIn(100);
        $("#ercode").qrcode(back.data.wxpaycodeurl);
        This.canvasInter=setInterval(function(){
            if($("#ercode").find("canvas").length>0){
                var canvas=$("#ercode").find("canvas").get(0);  
                /***<p>蘋果用戶保存圖中二維碼，發送至微信會話<br>在微信會話中長按識二維碼完成支付</p>****/
                var tips_html='<div class="wechat_tips"><p>1. 請長按二維碼或手機截圖先保存至相冊<br>2. 打開微信客戶端，將二維碼圖片發送至微信會話<br>3. 在微信會話中打開並長按識別二維碼完成支付</p></div>';
                if(IsPC()){
                    tips_html='<div class="wechat_tips"><p>請打開微信客戶端掃描二維碼支付</p></div>';
                }
                $("#ercode").html('<img src="'+canvas.toDataURL("image/png")+'" style="width:2.8rem; height:2.8rem; padding:5px; display:block; background:#fff; margin:0 auto;" />'+tips_html);
                This.canvasInter=null;
                clearInterval(This.canvasInter);
            }
        })
        This.isercode=true;    
        This.initQuestSuc(back.data.tradeno);                
    }else{//重點：第一步:h5微信支付
        setTimeout(function() {
            $.Dialog({//出彈窗。讓用戶確認是否支付成功（一開始在此處出彈窗，但是經過測試發現，ios系統的瀏覽器不適用，只適用於安卓瀏覽器。所以用了當前url和redirect_url區分開的方法=====>總之：這個地方彈窗可刪除）
                cname:"owhat_dialog",
                title:"<em style='font-weight:500;padding-top:0.2rem;display:block;'>請確認支付是否已成功</em>",
                tips:"<p style='text-align:left;padding-top:0.1rem;'>1.如果您已打開微信且完成支付，請點擊“我已支付”按鈕</p><p style='text-align:left;padding-top:0.1rem;'>2.如果您沒有安裝微信支付客戶端，請點擊“取消”並選擇其他支付方式付款</p>",
                close_btn:false,
                confirm_btn:true,//確認按鈕
                cancel_btn:true,//取消按鈕
                confirm_art:"我已支付",
                cancel_art:"取消",
                cancel_call:function(){//用戶點擊取消
                    $.CloseDialog();
                    clearCookie("h5weixinpay");//用戶點擊就清cookie
                },
                confirm_call:function(){//用戶點擊確認支付
                    $.CloseDialog();
                    clearCookie("h5weixinpay");//用戶點擊就清cookie
                    This.ispaysuccess(back.data.tradeno);//去后台調接口詢問是否成功。
                    
                }
            });                            
        }, 1000);
      
        setCookie("h5weixinpay","1",1);//1表示沒有彈窗,0表示彈窗了,存貯一天（判斷是否出彈窗）
        window.location.href = back.data.wxpaymweburl+"&redirect_url=url;//此處寫上需要跳轉的url(此處的url需要和當前頁面的url區分開來，以此來判斷如果是這個鏈接就出彈窗，然后用存的

h5weixinpay的判斷是否顯示彈窗) } }

第二步：已進入頁面就判斷是否有cookie。然后判斷出彈窗
if(!isWeiXin()){
        var h5weixinpay=getCookie("h5weixinpay") ? getCookie("h5weixinpay") : null; 
        if(h5weixinpay!=null&&This.tradeno!=null){//微信外支付返回判斷(如果連接上有tradeno並且有cookie)
            $.Dialog({
                cname:"owhat_dialog",
                title:"<em style='font-weight:500;padding-top:0.2rem;display:block;'>請確認支付是否已成功</em>",
                tips:"<p style='text-align:left;padding-top:0.1rem;'>1.如果您已打開微信且完成支付，請點擊“我已支付”按鈕</p><p style='text-align:left;padding-top:0.1rem;'>2.如果您沒有安裝微信支付客戶端，請點擊“取消”並選擇其他支付方式付款</p>",
                close_btn:false,
                confirm_btn:true,//確認按鈕
                cancel_btn:true,//取消按鈕
                confirm_art:"我已支付",
                cancel_art:"取消",
                cancel_call:function(){
                    $.CloseDialog();
                    clearCookie("h5weixinpay");
                },
                confirm_call:function(){
                    $.CloseDialog();
                    clearCookie("h5weixinpay");
                    This.ispaysuccess(This.tradeno);//去后台調接口詢問是否成功。

} }); } }