微信小程序获取头像的基本方法是调用小程序自带的API wx.getUserProfile(),这也是小程序官方目前最推荐的做法。
但是为了避免用户感到自己的隐私被自动调取，小程序要求调用 getUserProfile() 必须是用户主动点击请求才可以，因此可以在前端设置一个弹窗（或者其他的按钮），用户主动点击之后才可以调用getUserProfile（）。
成功获取用户名头像之后，小程序允许保存调用的结果，以便下一次打开页面的时候自动显示头像和名字。保存用户名和头像并不是保存在用户自己的手机上，也不能保存在小程序的云、或者服务器上，而是调用小程序的另一个官方API wx.setStorage（），由小程序官方统一保管。而自动调用这个保存好的用户名和头像 ，则需要wx.getStorage()
完整的代码如下：
1.在onload（）中先尝试获取用户名和头像，如果获取失败，则弹窗提示用户允许小程序获取其用户名和头像。
onLoad(options) {
let that=this
wx.getStorage({//异步获取缓存
key:"name",//本地缓存中指定的 key
success:(res)=>{
console.log('获取缓存成功',res.data)
this.setData({
name:res.data.nickName, //将得到的缓存给key
avatarUrl:res.data.avatarUrl
})
},
fail(res){
console.log(res)
wx.showModal({
title: '感谢您使用！',
content: '请允许小程序可以使用您的头像和名字！',
success (res) {
if (res.confirm) {
console.log('用户点击确定')
that.getUserProfile()
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
}
})
},2.获取用户名和头像的函数文章来源：https://www.toymoban.com/news/detail-505979.html
getUserProfile(e) {
// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
// 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
wx.getUserProfile({
desc: '用于保存用户的昵称', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
success: (res) => {
console.log(res)
this.setData({
userInfo: res.userInfo,
})
wx.setStorage({
key:'name',//本地缓存中指定的 key(类型：string)
data:res.userInfo,//需要存储的内容。只支持原生类型、Date、及能够通过JSON.stringify序列化的对象(类型:any)
success:(s)=>{
this.setData({
avatarUrl:res.userInfo.avatarUrl,
name:res.userInfo.nickName
})
},
fail:(f)=>{
// console.log('存储缓存失败====',f);
}
})
}
})
},3.在data{}中记录的用户名和头像文章来源地址https://www.toymoban.com/news/detail-505979.html
data: {
avatarUrl:'',
userInfo:""
},到了这里，关于小程序如何获取用户名和头像？的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
