微信jsapi支付对接

小咪咪 2023-07-20 12:08 5阅读 0赞

微信jsapi对接首先需要获取code传给后台以获取用户的openid

刚进入页面需要判断是否是在微信app内部打开你页面的连接
    var is_weixin = (function(){ return navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1})();
    当页面加载完成(){ 
      if(is_weixin){ 
        this.isLink()
      }
    }
    为什么要获取code？
    package：统一下单接口返回的prepay_id参数值，提交格式如：prepay_id=***
    prepay_id = code（前端获取）——>openid(后台拿code去获取openid)——>prepay_id(后台拿openid再去获取prepay_id)
    
    //判断链接 跳转微信回调以获取code
    isLink(){ 
                var self = this;
                // alert(self.urlAll)
                //self.urlAll = window.location.href
                if(self.urlAll.indexOf('code=')=='-1'){ 
    		//需要换成自己公司的appid 
                    var appId = "111111111";
                    var redirect_uri = window.location.origin + window.location.pathname;            
    		//这个链接的格式是固定的 参数换为自己的即可,访问之后微信会在redirect_uri后自动拼接code
    		//如你自己的地址为a.com 则访问这个页面后地址会变为a.com?code=xxx 只能在微信内打开有效 
                    //encodeURIComponent是对url的地址进行urlEncode处理（微信需求）
    
    		window.location.replace("https://open.weixin.qq.com/connect/oauth2/authorize?appid="+appId+"&redirect_uri="+encodeURIComponent(self.urlAll)+"&response_type=code&scope=snsapi_base&state=STATE&connect_redirect=1#wechat_redirect")
                }else{ 
     		//这里是获取code传给后台,来换取预支付id
                     this.code = this.getUrlParam('code')
    		//调用后台的pay方法
    		//这里是后台写的支付接口,不一定只是传个code,可能会根据业务需要传其他参数,总之让你传啥传啥,调用成功后直接调取后面的 wxInnerPay()方法即可
    		this.pay(code)
                }
            },
    //这个是获取地址栏中的参数
    getUrlParam(name) { 
                var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
                console.log( window.location.search)
                var r = window.location.href.split('?')[1].match(reg);
                if (r != null) { 
                return unescape(r[2]);
                }
                return null;
            },

//这里切记,页面js一定要引入微信的jsapi,如上
    //下面的两个方法内部基本不用动,原样粘上即可
    //微信内吊起支付
            wxInnerPay(res) { 
    	    //res的基本数据我用图给你们看一下 暂放在代码底部
                const pay_params = res
                console.log(res)
                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{ 
                        console.log('onBridgeReady')
                        this.onBridgeReady(pay_params);
                }
            },
            onBridgeReady(params) { 
                const pay_params = params;
                const self = this;
                console.log(params)
                WeixinJSBridge.invoke(
                    'getBrandWCPayRequest', { 
                        "appId": pay_params.appId,  //公众号名称，由商户传入 
                        "timeStamp": pay_params.timeStamp,  //时间戳，自1970年以来的秒数 
                        "nonceStr": pay_params.nonceStr,  //随机串 
                        "package": pay_params.package,     
                        "signType": pay_params.signType,  //微信签名方式： 
                        "paySign": pay_params.sign  //微信签名 
                    },
                    function(res){ 
                        console.log(res)
                        if(res.err_msg == "get_brand_wcpay_request:ok" ){ 
                            // self.queryThirdOrder(3)
                        } 
                }); 
            },

下面是res的基本字段  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NTQyMDI3_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5NTQyMDI3_size_16_color_FFFFFF_t_70]: /images/20230528/d970aee402cd41df85d71e1b3393341a.png