⼩程序获取⽤户登录信息（头像，昵称，地址，性别等）
login.wxml页⾯代码：
重点：open-type="getUserInfo"
<view wx:if="{{isHide}}">
<view wx:if="{{canIUse}}">
<view class='header'>
<image src='../../../assets/images/logo.jpg'></image>
</view>
<view class='content'>
<!-- <view>申请获取以下权限</view>
<text>获得你的公开信息(昵称，头像等)</text> -->
</view>
<button class='bottom' type='primary' open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="bindGetUserInfo">
授权登录
</button>
</view>
<view wx:else>请升级版本</view>
</view>
<view wx:else>
<view>我的⾸页内容</view>
</view>
css代码：
.header {
margin: 90rpx 0 90rpx 50rpx;
border-bottom: 1px solid #ccc;
text-align: center;
width: 650rpx;
height: 300rpx;
line-height: 450rpx;
}
.header image {
width: 200rpx;
height: 150rpx;
}
.content {
margin-left: 50rpx;
margin-bottom: 90rpx;
}
.content text {
display: block;
color: #9d9d9d;
margin-top: 40rpx;
}
.bottom {
border-radius: 80rpx;
margin: 70rpx 50rpx;
font-size: 35rpx;
}
js代码：
Page({
怎么把头像加上国旗globalData: {
appid: '', //appid需⾃⼰提供
secret: '', //secret需⾃⼰提供
},
data: {
//判断⼩程序的API，回调，参数，组件等是否在当前版本可⽤。
canIUse: wx.canIUse('UserInfo'),
isHide: false
},
onLoad: function () {
var that = this;
// 查看是否授权
success: function (res) {
if (res.authSetting['scope.userInfo']) {
success: function (res) {
// ⽤户已经授权过，不需要显⽰授权页⾯，所以不需要改变 isHide 的值
// 根据⾃⼰的需求有其他操作再补充
/
/ 我这⾥实现的是在⽤户授权成功后，调⽤的 wx.login 接⼝，从⽽获取code
wx.login({
success: res => {
// 获取到⽤户的 code 之后：de
console.log("⽤户的code:" + de);
// 可以传给后台，再经过解析获取⽤户的 openid
// 或者可以直接使⽤的提供的接⼝直接获取 openid ，⽅法如下：
var d = that.globalData; //这⾥存储了appid、secret、token串
// // ⾃⾏补上⾃⼰的 APPID 和 SECRET
url: 'api.weixin.qq/sns/jscode2session?appid=' + d.appid + '&secret=' + d.secret + '&js_code=' + de + '&grant_type=authorization_code', data: {},
method: 'GET',
success: res => {
var obj = {};
obj.openid = res.data.openid;
console.log("openid:" + obj.openid);
console.log("session_key:" + res.data.session_key);
wx.setStorageSync('user', obj); //存储openid
// 获取到⽤户的 openid
console.log(res.data)
console.log("⽤户的openid:" + res.data.openid);
}
});
}
});
}
});
} else {
// ⽤户没有授权
// 改变 isHide 的值，显⽰授权页⾯
that.setData({
isHide: true
});
}
}
});
},
bindGetUserInfo: function (e) {
if (e.detail.userInfo) {
//⽤户按了允许授权按钮
var that = this;
// 获取到⽤户的信息了，打印到控制台上看下
console.log("⽤户的信息如下：");
console.log(e.detail.userInfo);
//授权成功后，通过改变 isHide 的值，让实现页⾯显⽰出来，把授权页⾯隐藏起来 that.setData({
isHide: false
});
} else {
//⽤户按了拒绝按钮
wx.showModal({
title: '警告',
content: '您点击了拒绝授权，将⽆法进⼊⼩程序，请授权之后再进⼊',
showCancel: false,
confirmText: '返回授权',
success: function (res) {
// ⽤户没有授权成功，不需要改变 isHide 的值
if (firm) {
console.log('⽤户点击了“返回授权”');
}
}
});
}
},
})
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
豫公网安备41160202000598
发表评论