获取用户高清头像的需求：

获取用户头像的实现：

• 第一种方法很简便：是在wxml中使用<open-data type="userAvatarUrl"></open-data>组件直接展示用户头像，注意只是展示，并不能获取到用户的头像数据（即图片链接），而且展示的头像是132×132（单位：px）大小的，如果需求中要求更大且清晰的头像，那这种方法是行不通的。
• 第二种方法是通过js获取app.globalData中的userInfo.avatarUrl，然后再经过wxml的image组件展示出来，优点是同时获取到了用户的头像信息，缺点依旧是获取不到用户的高清头像。关键在于，用户头像的图片链接app.globalData.userInfo.avatarUrl是以’/132’结尾的，’/xxx’表示像素点的大小，而把’/132’改成’/0’即可获取400×400像素的高清用户头像，代码如下：

获取用户高清头像

效果示意图：

代码：

wxml

<view class="weui-tab__content"> <view class="container-body"> <image class="image" src="{{bgPic}}" ></image> <button class='button' bindtap="getavatar" open-type="getUserInfo" bindgetuserinfo="getUserInfo" type="submit">获取头像</button> </view> </view> 

js

const app = getApp(); Page({ /**    * 页面的初始数据    */   data: {     imageUrl: null,     userInfo: {},     hasUserInfo: false,     canIUse: wx.canIUse('button.open-type.getUserInfo') },   onLoad: function() { if (app.globalData.userInfo) { this.setData({         userInfo: app.globalData.userInfo,         hasUserInfo: true }) } else if (this.data.canIUse) { // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回 // 所以此处加入 callback 以防止这种情况       app.userInfoReadyCallback = res => { this.setData({           userInfo: res.userInfo,           hasUserInfo: true }) } } else { // 在没有 open-type=getUserInfo 版本的兼容处理       wx.getUserInfo({         success: res => {           app.globalData.userInfo = res.userInfo           this.setData({             userInfo: res.userInfo,             hasUserInfo: true }) } }) } },   getUserInfo: function (e) {     console.log(e)     app.globalData.userInfo = e.detail.userInfo     this.setData({       userInfo: e.detail.userInfo,       hasUserInfo: true }) },   getavatar: function(){ var that=this;     wx.downloadFile({       url: this.data.userInfo.avatarUrl,       success: function(res){         console.log(res)         that.setData({           bgPic: headimgHD(app.globalData.userInfo.avatarUrl) }) } }) } }) function headimgHD (imageUrl) {   imageUrl = imageUrl.split('/'); //把头像的路径切成数组 //把大小数值为 46 || 64 || 96 || 132 的转换为0 if (imageUrl[imageUrl.length - 1] && (imageUrl[imageUrl.length - 1] == 46 || imageUrl[imageUrl.length - 1] == 64 || imageUrl[imageUrl.length - 1] == 96 || imageUrl[imageUrl.length - 1] == 132)) {       imageUrl[imageUrl.length - 1] = 0; }   imageUrl = imageUrl.join('/'); //重新拼接为字符串 return imageUrl; } 

在Page()外建立子函数—headimgHD()来将获取到的头像进行修改后返回高清头像。此例子是通过点击按钮获取用户头像，所以在自定义函数getavatar()中调用headimgHD()；如果想实现进入该页面自动获取高清头像，则需要在onload()函数里面完成调用。

wxss

.weui-tab__content{   width: 100%;   height: 100%;   text-align: center; } .container-body {   padding-top: 120rpx; } .image {   width: 500rpx;   height: 500rpx;   border: 12rpx solid white;   border-radius: 5%; }