当前位置：移动技术网 > IT编程>开发语言>JavaScript > html5+jquery获取微信openid

html5+jquery获取微信openid

2017年12月21日 | 移动技术网IT编程 | 我要评论

www.0573.cm,窝友网,纳尼娱乐

最近在修改一个移动商城，由于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文件

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

function getOpenid()
	{
            $url = $this->createOauthUrlForOpenid();
            return $this->httpGet($url);
	}

/**
	 * 	作用：生成可以获得openid的url
	 */
	function createOauthUrlForOpenid()
	{
		$urlObj["appid"] = WxPayConf_pub::APPID;
		$urlObj["secret"] = WxPayConf_pub::APPSECRET;
		$urlObj["code"] = $this->code;
		$urlObj["grant_type"] = "authorization_code";
		$bizString = $this->formatBizQueryParaMap($urlObj, false);
                //api.weixin.qq.com=101.226.90.58
		return "https://api.weixin.qq.com/sns/oauth2/access_token?".$bizString;
	}

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

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

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！点击进行留言回复

微信小程序开发打开另一个小程序的实现方法

微信小程序打开另一个小程序，有两种方法：1.超链接；2.点击按钮。全局配置：跳转到其他小程序，需要在当前小程序全局配置中配置需要跳转的小程序列表,代码如下：ap... [阅读全文]
Javascript实现简易天数计算器

本文实例为大家分享了javascript实现简易天数计算器的具体代码，供大家参考，具体内容如下效果图：功能：1. 支持选择日期； 2. 自动计算闰年； 3. ... [阅读全文]
怎么理解wx.navigateTo的events参数使用详情

遇到一个这样的业务需求, 用户点击提现按钮, 跳转到提现处理结果页面, 为了避免提现请求被重复提交, 所以需要在用户点击了提交按钮以后就把按钮锁起来不给用户提交... [阅读全文]
微信小程序手动添加收货地址省市区联动

本文实例为大家分享了微信小程序手动添加收货地址省市区联动的具体代码，供大家参考，具体内容如下先看效果图html部分用小程序的piceker-view 嵌入页面的... [阅读全文]
微信jssdk踩坑之签名错误invalid signature

最近做公众号网页开发，使用微信 jssdk 页面签名时 ios 中一直报错，这才刚开始就被这只拦路虎拦住了，报错如下：然而 android 和开发者工具中好得很... [阅读全文]
基于js实现数组相邻元素上移下移

实现效果：即需要实现当前元素与相邻元素交换位置，当上移时，则是当前元素与上一元素调换位置；当下移时，则是当前元素与下一元素调换位置。实现代码：js://点击上移... [阅读全文]
JS使用for in有序获取对象数据

需要遍历对象，将key value分为两个数组，可以使用forin，但是获取到的对象中的属性及属性值排列是无序的，目的是要按顺序取出对象中的key和value值... [阅读全文]
单线程JavaScript实现异步过程详解

前两天硬着头皮在部门内部做了一次技术分享，主题如题。索性整理成文章留个纪念！要了解异步实现，首先我们得先了解：同步 & 异步同步：会逐行执行代码，会对后... [阅读全文]
JS加载解析Markdown文档过程详解

网上有很多网站会通过.md文档来做页面内容，很好奇，这是怎么做的？出于好奇，建了一个test.md文件：# hello world! asdfa asd *斜体... [阅读全文]
基于JS实现table导出Excel并保留样式

浏览器环境：谷歌浏览器1.在导出excel的时候，保存table的样式，有2种方法，①是在table的行内写style样式，②是在模板里面添加样式2.第一种方式... [阅读全文]

网友评论


验证码：

html5+jquery获取微信openid

2017年12月21日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论