使用vue静态页获取微信的用户信息,通过调取微信的接口进行实现。
注意:我写的代码判断了只有在微信浏览器打开才可以获取用户信息,别的还没有进行测试!!!!!!!!!!
第一步:获取code
getCode(){
var _api_root = "";
_api_root = "这里是你获取完code后,跳转到的地址";
//获取地址参数
var hrefAdd = window.location.href.split("?")[1];
//当前url路径转base格式
var baseUrl = _api_root + hrefAdd;//这个是你要跳转地址的完整路径
var encode = encodeURI(baseUrl);
var base64 = btoa(encode);
//跳转后台路径 拼接base格式的url路径
window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+"你的appid"+'&redirect_uri='+
base64 +'&response_type=code&scope=snsapi_userinfo&state=wecedirect';
}
注意:这是微信官方给定的接口。
第二步:获取用户的openid
注意:这里的process.env.VUE_APP_URL == ‘/api’
getWxUserInfo(code) {
var that = this;
var url = process.env.VUE_APP_URL+ "sns/oauth2/access_token?appid='小程序的APPID'&secret='用自己的'&code=" + code + "&grant_type=authorization_code";
return new Promise((resolve, reject) => {
axios.get(url).then(function (res) {
var access_token = res.data.access_token;
var openid = res.data.openid;
sessionStorage.setItem("openid", openid);
that.getWxUnionids(access_token, openid);//这个是获取unionid
})
})
},
注意:这个官方接口是需要解决跨域问题,我这边是在nigex里边添加了以下代码
location /api {
proxy_pass https://api.weixin.qq.com; #代理的域名
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-AllowCredentials' 'true';
}
第三步就是unionid
注意:这里的process.env.VUE_APP_URL == ‘/api’
getWxUnionid(access_token, openid) {
var that = this;
var url = process.env.VUE_APP_URL+ "sns/userinfo?access_token=" +access_token + "&openid=" + openid + "&lang=zh_CN";
return new Promise((resolve, reject) => {
axios.get(url).then(
console.log("unionid结果",unionid);
)
})
},
注意:这个也需要跨域,不过因为在获取openid的时候已经加了代理,所以就不用再加了,因为他们的网站是一样的。
一次记录,不知道对你有没有帮助。如果有错误还希望大家可以提出来。