Uniapp如何獲取微信頭像

一、使用微信登陸接口

1、首先需要在manifest.json文件中配置微信登陸的權限

{
  "mp-weixin": {
    "appid": "",
    "permission": {
      "scope.userLocation": {
        "desc": "你的位置信息將用於小程序定位"
      },
      "scope.userInfo": {
        "desc": "獲取你的頭像、昵稱等信息"
      },
      "scope.userLocationBackground": {
        "desc": "小程序後台獲取定位"
      }
    }
  }
}

2、在page頁面中引入wx.login()接口，獲取微信登陸憑證code

//page頁面中引入以下代碼
export default {
  data() {
    return {
      userinfo: null
    }
  },
  onLoad() {
    wx.login({
      success(res) {
        if (res.code) {
          console.log(res.code)
        }
      }
    })
  }
}

3、調用getUserInfo獲取用戶信息（微信官方已經將此api廢除，需要向微信提交審核才能使用）

export default {
  data() {
    return {
      userinfo: null
    }
  },
  onLoad() {
    wx.login({
      success(res) {
        if (res.code) {
          wx.getUserInfo({
            success: function (res) {
              console.log(res.userInfo);
              that.userinfo = res.userInfo;
            }
          })
        }
      }
    })
  }
}

二、使用uniapp官方插件

1、在manifest.json文件中引入uni-app官方插件uni-id

"mp-weixin": {
  "appid": "",
  "plugins": {
    "uni-id": {
      "version": "1.5.0",
      "provider": "uni-app"
    }
  },
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息將用於小程序定位"
    },
    "scope.userInfo": {
      "desc": "獲取你的頭像、昵稱等信息"
    },
    "scope.userLocationBackground": {
      "desc": "小程序後台獲取定位"
    }
  }
}

2、在page頁面中引入uni-id的getUserInfo接口，獲取用戶信息

import uni from '@/uni_modules/uni-id/index.js'
export default {
  data() {
    return {
      userinfo: null
    }
  },
  onLoad() {
    uni.getUserInfo().then(res => {
      console.log(res.userInfo)
      this.userinfo = res.userInfo
    })
  }
}

三、使用微信小程序開發工具自帶的獲取用戶信息的api

1、在page頁面中引入wx.getUserProfile接口，獲取微信頭像信息

export default {
  data() {
    return {
      userinfo: null
    }
  },
  onLoad() {
    wx.getUserProfile({
        desc: '獲取用戶信息',
        success: (res) => {
            console.log(res.userInfo)
            this.userinfo = res.userInfo
        },
        fail:(res)=>{
            console.log(res)
        }
      })
    }
}

四、獲取微信頭像的展示

1、在當前page頁面中使用uniapp提供的image標籤引入頭像文件

2、將獲取到的頭像地址放入img標籤的src屬性中，以展示微信頭像

  
    
    {{userinfo.nickName}}
  


<script>
  export default {
    data() {
      return {
        userinfo: null
      }
    },
    onLoad() {
      uni.getUserInfo().then(res => {
        console.log(res.userInfo)
        this.userinfo = res.userInfo
      })
    }
  }
</script>