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