H5在微信中获取openid

为什么要获取openid

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

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

手动授权：需要用户点击同意授权，能获取到更多用户信息

（我本次使用的是静默授权，所以详细记录一下静默授权的方式）

获取方法

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

2、静默授权，在进入网页之后，访问微信提供的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码只能使用一次，使用过后就失效了。

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

微信开发文档

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

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

开发建议：

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

1、判断是否是微信浏览器

isWeiXin() {

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

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

return true;

} else {

return false;

}

}

2、根据以上函数判断值进行不同的操作

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("不是来自微信内置浏览器")

}