微信小程序获取头像的基本方法是调用小程序自带的API wx.getUserProfile(),这也是小程序官方目前最推荐的做法。
但是为了避免用户感到自己的隐私被自动调取,小程序要求调用 getUserProfile() 必须是用户主动点击请求才可以,因此可以在前端设置一个弹窗(或者其他的按钮),用户主动点击之后才可以调用getUserProfile()。
成功获取用户名头像之后,小程序允许保存调用的结果,以便下一次打开页面的时候自动显示头像和名字。保存用户名和头像并不是保存在用户自己的手机上,也不能保存在小程序的云、或者服务器上,而是调用小程序的另一个官方API wx.setStorage(),由小程序官方统一保管。而自动调用这个保存好的用户名和头像 ,则需要wx.getStorage()
完整的代码如下:
在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('用户点击取消') } } }) } }) },
获取用户名和头像的函数
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); } }) } }) },
在data{}中记录的用户名和头像
data: { avatarUrl:'', userInfo:"" },
来源地址:https://blog.csdn.net/hahalel/article/details/128418261