html5+jquery获取微信openid

最新推荐文章于 2023-06-15 14:08:44 发布

人鱼传说

最新推荐文章于 2023-06-15 14:08:44 发布

阅读量6.8w

点赞数 6

分类专栏： javascript

本文链接：https://blog.csdn.net/baronyang/article/details/44489841

版权

javascript 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

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

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

$(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文件

<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的后台方法,这个方法不详列了，官方有示例

 /**
     * 获取openid
     * @return type
     */
    public function getopenidOp(){
        $jsApi=new JsApi_pub();
        $code = $_GET['code'];
        $jsApi->setCode($code);
        echo $jsApi->getOpenId();       
    }

function getOpenid()
<span style="white-space:pre">	</span>{
            $url = $this->createOauthUrlForOpenid();
            return $this->httpGet($url);
<span style="white-space:pre">	</span>}

/**
<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>}

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；

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

人鱼传说

关注

6
点赞
踩
23

收藏

觉得还不错? 一键收藏
7
评论
html5+jquery获取微信openid

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

扫一扫