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

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

目錄

• 前言
• 完整的代碼如下：
• 總結

前言

微信小程序獲取頭像的基本方法是調用小程序自帶的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.獲取用戶名和頭像的函數

 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:""
    },

總結

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

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