欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

html5+jquery获取微信openid(代码教程)

程序员文章站 2022-06-04 22:58:41
最近在修改一个移动商城,由于wap端是html5的,还大量使用了art模板技术,一开始修改很不适应,而且实现html5取openid一直没能实现很好的实现,经过对获取原理的理解和学习,终于还是实现了...

最近在修改一个移动商城,由于wap端是html5的,还大量使用了art模板技术,一开始修改很不适应,而且实现html5取openid一直没能实现很好的实现,经过对获取原理的理解和学习,终于还是实现了html获取微信openid,而且改动不大,闲话少说,直接上干货:

一、写个js,用于取accesscode,并直接通过openid读取用户表中的注册信息

[javascript] view plain copy

$(function () {  

    var wxopenid=getcookie('wxopenid');  

    var key=getcookie('key');  

    if (key==''){  

        var access_code=getquerystring('code');  

        if (wxopenid==""){  

            if (access_code==null)  

            {     

                var fromurl=location.href;  

                var url='https://open.weixin.qq.com/connect/oauth2/authorize?appid=填你自已的appid哟&redirect_uri='+encodeuricomponent(fromurl)+'&response_type=code&scope=snsapi_base&state=state%23wechat_redirect&connect_redirect=1#wechat_redirect';  

                location.href=url;  

            }  

            else  

            {     

                $.ajax({  

                    type:'get',  

                    url:apiurl+'/index.php?act=payment&op=getopenid',   

                    async:false,  

                    cache:false,  

                    data:{code:access_code},  

                    datatype:'json',  

                    success:function(result){                   

                            if (result!=null && result.hasownproperty('openid') && result.openid!=""){  

                               addcookie('wxopenid',result.openid,360000);                             

                               getlogininfo(result.openid);  

                            }   

                            else  

                            {  

                              alert('微信身份识别失败 \n '+result);  

                              location.href=fromurl;  

                            }  

                        }  

                    });      

            }  

        }else{  

           if (key=='' && wxopenid!='')  

               getlogininfo(wxopenid);    

        }  

  

        function getlogininfo(wxopenid){         

            $.ajax({  

               type:'get',  

               url: apiurl + '/index.php?act=login&op=autologininfo',  

               data: { wxopenid:wxopenid},  

               datatype:'json',  

               async:false,  

               cache:false,                 

               success: function (result) {                     

                       if (result.return_code=='ok'){  

                           addcookie('key',result.memberinfo.key);  

                           addcookie('username',result.memberinfo.username);  

                       }else{  

                           alert(result.return_msg);  

                           location.href=wapsiteurl+'/tmpl/member/login.html';  

                       }  

               }  

            });  

        }  

    }  

});  

第二步:在html页的head中加载js文件

[html] view plain copy

<head>  

<meta charset="utf-8">  

<title>麦斯卡商城</title>  

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">  

<meta name="apple-mobile-web-app-capable" content="yes">  

<meta name="apple-mobile-web-app-status-bar-style" content="black">  

<meta name="format-detection" content="telephone=no">  

<link rel="stylesheet" type="text/css" href="css/reset.css">  

<link rel="stylesheet" type="text/css" href="css/main.css">  

<link rel="stylesheet" type="text/css" href="css/index.css">  

<link rel="stylesheet" type="text/css" href="css/member.css">  

<script type="text/javascript" src="js/config.js"></script>  

<script type="text/javascript" src="js/zepto.min.js"></script>  

<script type="text/javascript" src="js/template.js"></script>  

<script type="text/javascript" src="js/common.js"></script>  

<script type="text/javascript" src="js/getwxopenid_index.js"></script>  

</head>  

第三步:实现openid的后台方法,这个方法不详列了,官方有示例

[php] view plain copy

/** 

    * 获取openid 

    * @return type 

    */  

   public function getopenidop(){  

       $jsapi=new jsapi_pub();  

       $code = $_get['code'];  

       $jsapi->setcode($code);  

       echo $jsapi->getopenid();         

   }  

[php] view plain copy

function getopenid()  

<span style="white-space:pre">    </span>{  

            $url = $this->createoauthurlforopenid();  

            return $this->httpget($url);  

<span style="white-space:pre">    </span>}  

[php] view plain copy

/** 

<span style="white-space:pre">    </span> * <span style="white-space:pre">    </span>作用:生成可以获得openid的url 

<span style="white-space:pre">    </span> */  

<span style="white-space:pre">    </span>function createoauthurlforopenid()  

<span style="white-space:pre">    </span>{  

<span style="white-space:pre">        </span>$urlobj["appid"] = wxpayconf_pub::appid;  

<span style="white-space:pre">        </span>$urlobj["secret"] = wxpayconf_pub::appsecret;  

<span style="white-space:pre">        </span>$urlobj["code"] = $this->code;  

<span style="white-space:pre">        </span>$urlobj["grant_type"] = "authorization_code";  

<span style="white-space:pre">        </span>$bizstring = $this->formatbizqueryparamap($urlobj, false);  

                //api.weixin.qq.com=101.226.90.58  

<span style="white-space:pre">        </span>return "https://api.weixin.qq.com/sns/oauth2/access_token?".$bizstring;  

<span style="white-space:pre">    </span>}  

[javascript] view plain copy

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 "";  

}  

  

function delcookie(name){//删除cookie  

    var exp = new date();  

    exp.settime(exp.gettime() - 1);  

    var cval=getcookie(name);  

    if(cval!=null) document.cookie= name + "="+cval+"; path=/;expires="+exp.togmtstring();  

}  

另外,js文件中的变量,尽量不要用全局的,当多个js加载时,变量可能冲突,造成一些不可预则的问题;

这样就实现了在html5页面直接取accesscode,再通过ajax方法在后台取openid;