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属性中，以展示微信头像

   

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