目錄前言完整的代碼如下：總結(jié)前言

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

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

成功獲取用戶名頭像之后，小程序允許保存調(diào)用的結(jié)果，以便下一次打開(kāi)頁(yè)面的時(shí)候自動(dòng)顯示頭像和名字。保存用戶名和頭像并不是保存在用戶自己的手機(jī)上，也不能保存在小程序的云、或者服務(wù)器上，而是調(diào)用小程序的另一個(gè)官方API wx.setStorage（），由小程序官方統(tǒng)一保管。而自動(dòng)調(diào)用這個(gè)保存好的用戶名和頭像 ，則需要wx.getStorage()

完整的代碼如下：

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

onLoad(options) {let that=thiswx.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: '請(qǐng)?jiān)试S小程序可以使用您的頭像和名字！', success (res) { if (res.confirm) {console.log('用戶點(diǎn)擊確定')that.getUserProfile() } else if (res.cancel) {console.log('用戶點(diǎn)擊取消') } } }) } }) },

2.獲取用戶名和頭像的函數(shù)

getUserProfile(e) {// 推薦使用wx.getUserProfile獲取用戶信息，開(kāi)發(fā)者每次通過(guò)該接口獲取用戶個(gè)人信息均需用戶確認(rèn)// 開(kāi)發(fā)者妥善保管用戶快速填寫(xiě)的頭像昵稱，避免重復(fù)彈窗 wx.getUserProfile({ desc: '用于保存用戶的昵稱', // 聲明獲取用戶個(gè)人信息后的用途，后續(xù)會(huì)展示在彈窗中，請(qǐng)謹(jǐn)慎填寫(xiě) success: (res) => { console.log(res) this.setData({ userInfo: res.userInfo, }) wx.setStorage({key:'name',//本地緩存中指定的 key(類型：string)data:res.userInfo,//需要存儲(chǔ)的內(nèi)容。只支持原生類型、Date、及能夠通過(guò)JSON.stringify序列化的對(duì)象(類型:any)success:(s)=>{ this.setData({avatarUrl:res.userInfo.avatarUrl, name:res.userInfo.nickName })},fail:(f)=>{ // console.log('存儲(chǔ)緩存失敗====',f); } }) }}) },

3.在data{}中記錄的用戶名和頭像

data: {avatarUrl:'',userInfo:'' },總結(jié)

到此這篇關(guān)于小程序獲取用戶名和頭像的文章就介紹到這了,更多相關(guān)小程序獲取用戶名頭像內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！