微信小程序獲取頭像的基本方法是調用小程序自帶的API? wx.getUserProfile(),這也是小程序官方目前最推薦的做法。

但是為了避免用戶感到自己的隱私被自動調取，小程序要求調用 getUserProfile() 必須是用戶主動點擊請求才可以，因此可以在前端設置一個彈窗（或者其他的按鈕），用戶主動點擊之后才可以調用getUserProfile（）。

成功獲取用戶名頭像之后，小程序允許保存調用的結果，以便下一次打開頁面的時候自動顯示頭像和名字。保存用戶名和頭像并不是保存在用戶自己的手機上，也不能保存在小程序的云、或者服務器上，而是調用小程序的另一個官方API ?wx.setStorage（），由小程序官方統一保管。而自動調用這個保存好的用戶名和頭像 ，則需要wx.getStorage()

完整的代碼如下：

1.在onload（）中先嘗試獲取用戶名和頭像，如果獲取失敗，則彈窗提示用戶允許小程序獲取其用戶名和頭像。

onLoad(options) {let that=thiswx.getStorage({//異步獲取緩存key:"name",//本地緩存中指定的 keysuccess:(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.獲取用戶名和頭像的函數

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{}中記錄的用戶名和頭像

data: {avatarUrl:'',userInfo:""},

總結

以上是生活随笔為你收集整理的小程序如何获取用户名和头像？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。