微信小程序获取用户信息,如果仅是需要用户头像和用户微信昵称,那就直接下面这两行代码无需授权直接获取
<!-- 如果只是展示用户头像昵称,可以使用 <open-data /> 组件 -->
<open-data type="userAvatarUrl"></open-data>
<open-data type="userNickName"></open-data>
好的,但是想要获取到更多,就需要调用wx.getUserInfo这个接口了,它会返回当前登陆的用户的详细信息,还是不错的
但是由于wx.getUserInfo接口的改版,不会再主动出现授权弹窗,需要用户去主动点击button来实现,所以我们就换个思路。
一般像这样的数据我们肯定需要用到多次,所以我们就把数据通过wx.setStorage放到本地的缓存中,然后当使用时候再wx.getStorage拿出来。
敲黑板!!!!!!!!!
我们在首页onShow方法里面先获取缓存wxuserinfo的信息,这个时候因为还没有存入,所以会获取失败,那么好,我们自己做一个引导页,同时在跳转到引导页的同时带上wx.login返回的code(解密时候会用到),引导用户进入授权页面,当用户点击确定授权时我们会获得如下这样的三个值,code是刚才通过wx.login传递过来的,然后将这三个值传递到后台进行解析,,解析成功之后,就会得到用户的信息,然后返回给小程序,这时候再用wx.setStorage将数据存储进去,OK,具体代码下面展示。
index.js
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
wx.login({
success: function (res) {
var code=res.code;
if (code) {
wx.getStorage({
key: 'wxUserInfo',
success: function (res) {
console.log(res);
},
fail: function (res) {
wx.showModal({
title: '微信小账本',
content: '尚未进行授权,请点击确定跳转到授权页面进行授权。',
showCancel: false,
success: function (msg) {
if (msg.confirm) {
wx.redirectTo({
url: '../auth/auth?code=' + code,
})
}
}
})
}
});
} else {
console.log('登录失败!' + res.errMsg)
}
},
});
},
引导页面
<view class='container'>
<view class='logo'>
<image src='./logo.png'></image>
<view id="font">将获取您的公开头像与昵称</view>
</view>
<button id="{{code}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo" hover-class='none'>同意授权</button>
</view>
引导页面css
.logo{
font-size: 24rpx;
color: #333;
text-align: center;
margin-top: 120rpx;
margin-bottom: 78rpx;
}
.logo image{
width: 133rpx;
height: 133rpx;
margin-bottom: 6rpx;
}
button{
height: 120rpx;
background: #edc94f;
font-size: 30rpx;
color: #333;
line-height: 120rpx;
text-align: center;
width: 96%;
}
引导页面JS
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that=this;
that.setData({
code: options.code
});
},
bindGetUserInfo:function(event){
var code = event.currentTarget.id;
wx.request({
url: 'https://***********/isregister',
method :'post',
data: {
encryptedData: event.detail.encryptedData,
iv: event.detail.iv,
code: code,
},
success:function(data){
console.log(data);
wx.setStorage({
key: 'wxUserInfo',
data: data.data,
success: function (re) {
if (re.errMsg =='setStorage:ok'){
wx.reLaunch({
url: '../app/index',
})
}
},
fail: function () {
console.log('保存wxUserInfo 失败')
}
})
}
})
}
OK小程序代码基本上好了,接下来看看服务端(PHP)代码
public function isregister(Request $request){
$msg='ok';
$request=$request->all();
$url = 'https://api.weixin.qq.com/sns/jscode2session?appid='.$this->appid.'&secret='.$this->appsecret.'&js_code='.$request['code'].'&grant_type=authorization_code';
$getOpenid = $this->my_curl_wx_api($url,'GET');
//将数据解密
$Crypt=new WXBizDataCrypt($this->appid,$getOpenid['session_key']);
$errCode = $Crypt->decryptData($request['encryptedData'],$request['iv'],$data);
if($errCode==0){
$data = json_decode($data, true);
$register=$this->user->where("username",$data['nickName'])->first();
if(empty($register)){
$userInfo=[
"openid"=>$data['openId'],
"username"=>$data['nickName'],
"image_url"=>$data['avatarUrl']
];
$this->storeRecord($userInfo,$this->user);
}else{
$msg="用户已经存在";
}
}
return ['info'=>$data,'msg'=>$msg];
}
上面就是获取用户信息的代码,如有不对,欢迎留言。