首页 > 站长在线 > html5+jquery获取微信openid

html5+jquery获取微信openid

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

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

[javascript]

  1. $(function () {  
  2.     var wxopenid=getcookie('wxopenid');  
  3.     var key=getcookie('key');  
  4.     if (key==''){  
  5.         var access_code=GetQueryString('code');  
  6.         if (wxopenid==""){  
  7.             if (access_code==null)  
  8.             {     
  9.                 var fromurl=location.href;  
  10.                 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';  
  11.                 location.href=url;  
  12.             }  
  13.             else  
  14.             {     
  15.                 $.ajax({  
  16.                     type:'get',  
  17.                     url:ApiUrl+'/index.php?act=payment&op=getopenid',   
  18.                     async:false,  
  19.                     cache:false,  
  20.                     data:{code:access_code},  
  21.                     dataType:'json',  
  22.                     success:function(result){                   
  23.                             if (result!=null && result.hasOwnProperty('openid') && result.openid!=""){  
  24.                                addcookie('wxopenid',result.openid,360000);                             
  25.                                getlogininfo(result.openid);  
  26.                             }   
  27.                             else  
  28.                             {  
  29.                               alert('微信身份识别失败 \n '+result);  
  30.                               location.href=fromurl;  
  31.                             }  
  32.                         }  
  33.                     });      
  34.             }  
  35.         }else{  
  36.            if (key=='' && wxopenid!='')  
  37.                getlogininfo(wxopenid);    
  38.         }  
  39.   
  40.         function getlogininfo(wxopenid){         
  41.             $.ajax({  
  42.                type:'get',  
  43.                url: ApiUrl + '/index.php?act=login&op=autologininfo',  
  44.                data: { wxopenid:wxopenid},  
  45.                dataType:'json',  
  46.                async:false,  
  47.                cache:false,                 
  48.                success: function (result) {                     
  49.                        if (result.return_code=='OK'){  
  50.                            addcookie('key',result.memberinfo.key);  
  51.                            addcookie('username',result.memberinfo.username);  
  52.                        }else{  
  53.                            alert(result.return_msg);  
  54.                            location.href=WapSiteUrl+'/tmpl/member/login.html';  
  55.                        }  
  56.                }  
  57.             });  
  58.         }  
  59.     }  
  60. });  

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

[html]

  1. <head>  
  2. <meta charset="UTF-8">  
  3. <title>麦斯卡商城</title>  
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">  
  5. <meta name="apple-mobile-web-app-capable" content="yes">  
  6. <meta name="apple-mobile-web-app-status-bar-style" content="black">  
  7. <meta name="format-detection" content="telephone=no">  
  8. <link rel="stylesheet" type="text/css" href="css/reset.css">  
  9. <link rel="stylesheet" type="text/css" href="css/main.css">  
  10. <link rel="stylesheet" type="text/css" href="css/index.css">  
  11. <link rel="stylesheet" type="text/css" href="css/member.css">  
  12. <script type="text/javascript" src="js/config.js"></script>  
  13. <script type="text/javascript" src="js/zepto.min.js"></script>  
  14. <script type="text/javascript" src="js/template.js"></script>  
  15. <script type="text/javascript" src="js/common.js"></script>  
  16. <script type="text/javascript" src="js/getwxopenid_index.js"></script>  
  17. </head>  

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

[php]

  1. /** 
  2.     * 获取openid 
  3.     * @return type 
  4.     */  
  5.    public function getopenidOp(){  
  6.        $jsApi=new JsApi_pub();  
  7.        $code = $_GET['code'];  
  8.        $jsApi->setCode($code);  
  9.        echo $jsApi->getOpenId();         
  10.    }  
[php]

  1. function getOpenid()  
  2. <span style="white-space:pre">    </span>{  
  3.             $url = $this->createOauthUrlForOpenid();  
  4.             return $this->httpGet($url);  
  5. <span style="white-space:pre">    </span>}  
[php]

  1. /** 
  2. <span style="white-space:pre">    </span> * <span style="white-space:pre">    </span>作用:生成可以获得openid的url 
  3. <span style="white-space:pre">    </span> */  
  4. <span style="white-space:pre">    </span>function createOauthUrlForOpenid()  
  5. <span style="white-space:pre">    </span>{  
  6. <span style="white-space:pre">        </span>$urlObj["appid"] = WxPayConf_pub::APPID;  
  7. <span style="white-space:pre">        </span>$urlObj["secret"] = WxPayConf_pub::APPSECRET;  
  8. <span style="white-space:pre">        </span>$urlObj["code"] = $this->code;  
  9. <span style="white-space:pre">        </span>$urlObj["grant_type"] = "authorization_code";  
  10. <span style="white-space:pre">        </span>$bizString = $this->formatBizQueryParaMap($urlObj, false);  
  11.                 //api.weixin.qq.com=101.226.90.58  
  12. <span style="white-space:pre">        </span>return "https://api.weixin.qq.com/sns/oauth2/access_token?".$bizString;  
  13. <span style="white-space:pre">    </span>}  

另外,js文件中的变量,尽量不要用全局的,当多个js加载时,变量可能冲突,造成一些不可预则的问题;
这样就实现了在html5页面直接取accesscode,再通过ajax方法在后台取openid;

 如果要看效果,可以微信扫码进入商城(本来只想放个二维码,又怕有人以为是什么下载链接)


本文固定链接: http://www.devba.com/index.php/archives/6185.html | 开发吧

报歉!评论已关闭.