关于微信支付(H5获取openid)

长夜漫漫,无心睡眠。
起身打开电脑,有种强烈的想写东西的欲望。脑袋里把最近做的需求过了一遍,让我最吃足苦头的还是微信支付,不是说有多难,而是坑太多,防不胜防,具体遇到的坑后续总结后再一并更新。
第一次做微信开发,第一次做微信支付,没办法,硬着头皮来,边看文档边思考整个逻辑,等到整个流程过了一遍后,就开始着手撸代码了。
唯有代码才能抑制我的洪荒之力。。Come on!!!

Config参数配置(配置成功可略过此步)

<?php
    error_reporting(E_ALL || ~E_NOTICE);
    header("Content-type:text/html; charset=utf-8");
    require_once "sdk/jssdk.php";
    $jssdk = new JSSDK(appId, 密钥);
    $signPackage = $jssdk->GetSignPackage();
?>

//通过config接口注入权限验证配置
wx.config({
    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    appId: '<?php echo $signPackage["appId"];?>',
    timestamp: '<?php echo $signPackage["timestamp"];?>',
    nonceStr: '<?php echo $signPackage["nonceStr"];?>',
    signature: '<?php echo $signPackage["signature"];?>',
    jsApiList: ['getBrandWCPayRequest'] // 必填,需要使用的JS接口列表
}); 
建议debug开启调试模式,config配置提示成功后,开始进入主题。

网页授权获取openid

由于微信支付需要用户openid,而获取openid则需要进行网页授权,将获取到的openid存入cookie中,避免每次请求都要进行一次授权来获取openid。
1.授权用静默授权即可,首先获取code
https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

如果用户同意授权,页面将跳转至 redirect_uri/?code=CODE&state=STATE。若用户禁止授权,则重定向后不会带上code参数,仅会带上state参数redirect_uri?state=STATE

2.获取code后,请求以下链接获取access_token: 
https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
请求成功后,返回的数据中可获得openid,进而可进行下一步的支付。

微信支付关键点是要获取到openid。

以下为代码实现:

        $(function(){
            var openId="";
            var code="";        
            //获取openId
            openId=getcookie('openId'); 
            _code = getQueryString('code');
            if (openId==null){
                if(_code==null){
                    var fromurl = location.href;            
                    var url="https://open.weixin.qq.com/connect/oauth2/authorize?appid=公众号ID&redirect_uri="+encodeURIComponent(fromurl)+"&response_type=code&scope=snsapi_base&state=123#wechat_redirect";   
                    window.location.href=url;
                }else{
                    $.ajax({     
                        url: serverUrl+"api/webpay.openid?_v=1.3.4&code="+_code, 
                        type: "get",
                        async:false,  
                        cache:false,                        
                        dataType:'json',
                        success: function (result) {
                            if (result.data != null && result.data.hasOwnProperty('openid') && result.data.openid !=""){  
                                openId = result.data.openid;
                                addcookie("openId",openId,36000);   
                                //进行支付逻辑...     

                            }else{  
                              location.href(fromurl);  
                            } 
                        }

                    });                         
                }
            }else{
                openId = getcookie('openId');   
                //进行支付逻辑...         
            }
        })      

        //获取code参数
        function getQueryString(name) {
            var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
            var r = window.location.search.substr(1).match(reg);
            if (r != null) {
                return unescape(r[2]);
             }
            return null; 
        }

        function addcookie(name,value,expireHours){  
            var cookieString=name+"="+escape(value)+"; path=/";  
            //判断是否设置过期时间  
            if(expireHours>0){  
                var date=new Date();  
                date.setTime(date.getTime+expireHours*3600*1000);  
                cookieString=cookieString+"; expire="+date.toGMTString();  
            }  
            document.cookie=cookieString;  
        }  

        function getcookie(name){  
            var strcookie=document.cookie;  
            var arrcookie=strcookie.split("; ");  
            for(var i=0;i<arrcookie.length;i++){  
            var arr=arrcookie[i].split("=");  
            if(arr[0]==name)return decodeURIComponent(arr[1]); 
            }  
            return null;  
        }  

猜你喜欢

转载自blog.csdn.net/guoxiaodi001/article/details/71699547