我做的是微信小程序getUserProfile登录实现,点击后可以获取微信头像和微信昵称
1.点击
2.点击授权
3.获取成功
下面是代码
HTML代码
<view class="content">
<button bindtap="login" wx:if="{{isshow}}" class="an" >请点击登录</button>
<view class="userinfo" wx:else>
<image src="{{img}}" class="img"></image>
<view class="name">{{name}}</view>
</view>
</view>
css代码
.name{
font-size: 25px;
}
.an{
background-color: rgb(247, 248, 248);
height: 40px;
top: 40px;
}
.img{
width: 65px;
height: 65px;
display: inline-block;
border-radius: 50%;
overflow: hidden;
border: 1px solid #131212;
margin-right: 20px;
}
.userinfo{
top: 10px;
display: flex;
flex-direction: row;
width: 100%;
height: 100px;
align-items: center;
}
.content{
padding: 0px;
margin-bottom: 30px;
height: 100px;
flex-direction: column;
background-color: rgb(30, 211, 45);
}
js代码
Page({
data: {
name:"",
img:"",
isshow:true,
},
login() {
var that=this
wx.getUserProfile({
desc: '展示用户信息', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
success: (file) => {
console.log(file.userInfo.nickName)
console.log(file.userInfo.avatarUrl)
that.setData({
img:file.userInfo.avatarUrl,
name:file.userInfo.nickName,
isshow:false,
})
}
})
},
})