H5在微信中获取openid

为何要获取openid

    openId是用户在当前公众号下的惟一标识（‘身份证’）。在微信中进行微信分享、支付等操做时须要用户的openid。H5要在微信中获取到用户openid，须要得到微信受权，受权分两种方式：静默受权和手动受权

静默受权：用户使用过程当中不知不觉获取到openid，不须要用户手动受权，可是会在原页面进行刷新

手动受权：须要用户点击赞成受权，能获取到更多用户信息

    （我本次使用的是静默受权，因此详细记录一下静默受权的方式）

获取方法

一、首先，要有一个公众号，以及公众号的appid，而后在公众号后台上设置你的网页受权域名（注意不加http://和https://）

二、静默受权，在进入网页以后，访问微信提供的url，在其中设置受权方式以及回调页面url，返回的页面url中就会包含一个code参数

（注意：此处的url是转码事后的url）

url转码方法：

var url = this.urlencode(url_old);

// 编码函数

    urlencode (str) { 

      str = (str + '').toString(); 

      return encodeURIComponent(str).replace(/!/g, '%21').replace(/'/g, '%27').replace(/\(/g, '%28'). 

      replace(/\)/g, '%29').replace(/\*/g, '%2A').replace(/%20/g, '+'); 

    },

具体获取code方法：

// 获取code

    getBaseInfos(){

      var url_code = "https://open.weixin.qq.com/connect/oauth2/authorize?appid="+你的appid+"&redirect_uri="+当前页面url+"&response_type=code&scope=snsapi_base&state=1&connect_redirect=1#wechat_redirect";

      window.location.href = url_code;//打开这个连接，你的url后面就会跟上code的参数

    }

若是配置参数所有正确，那么此时经过回调地址刷新页面后，你就会看到在地址栏中的code了。

注意：要监测当前url中是否含有code参数，若是包含的话就继续下一步操做，不然页面是一直重复刷新反复获取code。且要注意code码只能使用一次，使用事后就失效了。

三、拿到code以后，须要把code传给后端，后端去请求微信获取openid等参数，前端是获取不到的，微信开发文档中是这么写的：

微信开发文档

后端请求成功后，获得的数据应该是这样的

四、这样咱们就能获取到用户的openid进行开发了

开发建议：

判断是否微信内置浏览器，若是是微信内置浏览器的话，去获取用户的openid，不然在外面浏览器中打开获取不到code是会报错的。

一、判断是不是微信浏览器

isWeiXin() {

        var ua = window.navigator.userAgent.toLowerCase();

        if (ua.match(/MicroMessenger/i) == 'micromessenger') {

            return true;

        } else {

            return false;

        }

}

二、根据以上函数判断值进行不一样的操做

if(this.isWeiXin()){

        console.log(" 是来自微信内置浏览器")

        if(url_s.indexOf("code") > 0 ){// 若是url字符串包含code字段

          this.code = cs.code;//则获取code参数值并存入缓存

          localStorage.setItem("code", cs.token);

            this.getOpenId();//继续下一步获取openid

        }else{//不然，就先调取函数获取code

          this.getBaseInfos();

        }

    }else{

        console.log("不是来自微信内置浏览器")

    }