微信h5支付前端代码

更加准确的描述点击如下链接

https://www.cnblogs.com/dandan1924/p/8359620.html

一.首先，需要确认是否在微信开通了这个服务，如果开通了，如下图

二.就是前段和后台互调。

??微信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);//去后台调接口询问是否成功。
} }); } }

注意：本文章是从其他网站迁移过来的，是 2018年1月26日写的，后续可能已经有开发人员相处更合理的优化方案