首页前端开发HTMLhtml5+jquery获取微信openid（代码教程）

html5+jquery获取微信openid（代码教程）

时间2024-01-26 18:33:02发布访客分类HTML浏览258
导读：收集整理的这篇文章主要介绍了html5教程-html5+jquery获取微信openid（代码教程），觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。...
收集整理的这篇文章主要介绍了html5教程-html5+jquery获取微信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; iarrcookie.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；

最近在修改一个移动商城，由于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; iarrcookie.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；

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！

AJAXAPICSSdivHTMLMappost-format-galleryPropStateTemplatethis

若转载请注明出处： html5+jquery获取微信openid（代码教程）
本文地址： https://pptw.com/jishu/587125.html
H5新特性Canvas绘图技术的使用学习 HTML5拖放实现逻辑及代码讲解

游客 回复需填写必要信息
↑