小程序獲取用戶名和頭像完整代碼

目錄 前言 完整的代碼如下： 總結(jié) 前言 微信小程序獲取頭像的基本方法是調(diào)用小程序自帶的API wx.getUserProfile(),這也是小程序官方目前最推薦的做法。 但是為了避免用戶感到自己的隱私

目錄

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

前言

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

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

成功獲取用戶名頭像之后，小程序允許保存調(diào)用的結(jié)果，以便下一次打開頁面的時候自動顯示頭像和名字。保存用戶名和頭像并不是保存在用戶自己的手機上，也不能保存在小程序的云、或者服務(wù)器上，而是調(diào)用小程序的另一個官方API ?wx.setStorage（），由小程序官方統(tǒng)一保管。而自動調(diào)用這個保存好的用戶名和頭像 ，則需要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.獲取用戶名和頭像的函數(shù)

 getUserProfile(e) {
        // 推薦使用wx.getUserProfile獲取用戶信息，開發(fā)者每次通過該接口獲取用戶個人信息均需用戶確認
        // 開發(fā)者妥善保管用戶快速填寫的頭像昵稱，避免重復彈窗    
        wx.getUserProfile({
          desc: '用于保存用戶的昵稱', // 聲明獲取用戶個人信息后的用途，后續(xù)會展示在彈窗中，請謹慎填寫
          success: (res) => {
              console.log(res)
            this.setData({
              userInfo: res.userInfo,
            })
            wx.setStorage({
                key:'name',//本地緩存中指定的 key(類型：string)
                data:res.userInfo,//需要存儲的內(nèi)容。只支持原生類型、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:""
    },

總結(jié)

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

【本文轉(zhuǎn)自：香港大帶寬服務(wù)器 http://www.558idc.com/st.html 歡迎留下您的寶貴建議】