请问vue如何获取微信用户的基本信息及用户图像？
网友回复
首先登录公众号后台，选择开发-》接口权限
然后找到网页账号 网页授权获取用户基本信息，点击修改，输入你代码运行的域名，不需要填http://或https://,比如baidu.com
确定后，我们来编写代码：
先写vue的代码，这个文件一定要放到上面填的域名下面运行，否则会报错的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获取微信用户基本资料</title>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/axios-0.18.js"></script>
</head>
<body>
<script type="text/javascript">
var app = new Vue({
el: '#app',
mounted() {
if (!window.localStorage.getItem('openId')) {
// 如果缓存localStorage中没有微信openId，则需用code去后台获取
this.getCode()
} else {
alert("openid为"+window.localStorage.getItem('openId'));
// 别的业务逻辑
}
},
methods: {
getCode () {
// 非静默授权，第一次有弹框
this.code = ''
var local = window.location.href // 获取页面url
var appid = 'wxac8d6782856ea0f7'
this.code = this.getUrlCode().code // 截取code
if (this.code == null || this.code === '') {
// alert(local);
// 如果没有code，则去请求
var url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${encodeURIComponent(local)}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`;
// alert(url);
window.location.href = url;
} else {
axios.post('后端的url地址&code='+ this.code, null, {})
.then(function (response) {
console.log(response.data);
if(response.data.err){
alert(response.data.data);
}else{
alert("获取成功");
window.localStorage.setItem('openId',response.data.data.openid);
}
})
.catch(function (error) {
console.log(error);
});
// 你自己的业务逻辑
}
},
getUrlCode() {
// 截取url中的code方法
var url = location.search
this.winUrl = url
var theRequest = new Object()
if (url.indexOf("?") != -1) {
var str = url.substr(1)
var strs = str.split("&")
for (var i = 0; i < strs.length; i ++) {
theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1])
}
}
return theRequest
}
}
});
</script>
</body>
</html>好了，前端vue中获取了code，然后把这个code传给后端吧，后端根据这个code去换access-token，最后根据access-token去获取用户的资料，代码如下，以php为例
<?php
$appid = "wxa423432423432423423";
$appsecret = "234234345345345345345";
function http_curl($url) {
$curlobj = curl_init();
curl_setopt($curlobj, CURLOPT_URL, $url);
curl_setopt($curlobj, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($curlobj, CURLOPT_SSL_VERIFYPEER, FALSE);
curl_setopt($curlobj, CURLOPT_SSL_VERIFYHOST, FALSE);
$output = curl_exec($curlobj);
curl_close($curlobj);
return $output;
}
$url = 'https://api.weixin.qq.com/sns/oauth2/access_token?appid='.$appid.'&secret='.$appsecret.'&code='.$_GET['code'].'&grant_type=authorization_code';
$result = $this->http_curl($url);
$acessdata = json_decode($result, 1);
if (isset($acessdata['access_token'])) {
$access_token = $acessdata['access_token'];
$openid = $acessdata['openid'];
$url2 = 'https://api.weixin.qq.com/sns/userinfo?access_token='.$access_token.'&openid='.$openid.'&lang=zh_CN';
$result2 = $this->http_curl($url2);
$userinfo = json_decode($result2, 1);
echo json_encode(['err' => false,
"data" => $userinfo]);
} else {
echo json_encode(['err' => false,
"data" => "出错了"]);
}
by thinkfuture
我知道答案，我要回答
私活外包
最新提问
