当前位置：首页 > news >正文

小程序获取用户头像大图小程序获取用户头像模糊的问题小程序自定义转发头像模糊小程序自定义转发分享大图...

news 来源：原创 2024/4/28 5:43:11

在开发小程序的时候，大家肯定有做过自定义转发分享图片的。我们现在做了一个名片小程序，需要做的一个功能就是，用户在转发分享自己的名片，在微信里显示的小程序缩略图，我们使用的是用户的微信头像，但是发现一个问题，就是缩略图一直很模糊。转发出去以后就跟打了马赛克一样。为什么会这样？能获取更大的图片吗？能否获取到用户的头像大图呢？

我们来看看微信的API接口文档是怎么说的。

下面这个是微信官方的代码，使用这个来获取用户的头像的

Page({
  data: {
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  onLoad: function() {
    // 查看是否授权
    wx.getSetting({
      success: function(res){
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称
          wx.getUserInfo({
            success: function(res) {
              console.log(res.userInfo)
            }
          })
        }
      }
    })
  },
  bindGetUserInfo: function(e) {
    console.log(e.detail.userInfo)
  }

获取到了以后，头像默认是132*132，这张图片用来做自定义转发分享图片，分享出去以后图片就明显变模糊了。所以我们就要调整代码了。

userInfo参数说明：

avatarUrl String 用户头像，最后一个数值代表正方形头像大小（有0、46、64、96、132数值可选，0代表132*132正方形头像），用户没有头像时该项为空。若用户更换头像，原有头像URL将失效。

这段话要仔细看，没仔细看，还真不知道微信官方说的是什么意思。尤其是他说0代表132*132，这套路太深了。

由于没找到微信的demo头像，又为了不侵犯别人的肖像，那么就只能牺牲下自己的色相了，好吧就用我的头像了，看到没有，这张图片点击以后，图片模糊，如果作为分享图，分享出去一定也是模糊的。顾客一定臭骂你一顿，game over了

见证奇迹的时刻来了，怎么获取用户的大图呢？最后这个尾数132，你直接替换为0就可以了，仔细看好了

https://wx.qlogo.cn/mmopen/vi_32/wibq8B2t2y4Hx6d60nhskKWv4Vuhk2YWou2xFQArWbuoS3tdwF1jAaicwtLjiasSLEtOsibfuE6ickevcpepgqYh1lw/132

如下，这个地址的最后尾数132被替换为0，就自动获取大图了。

https://wx.qlogo.cn/mmopen/vi_32/wibq8B2t2y4Hx6d60nhskKWv4Vuhk2YWou2xFQArWbuoS3tdwF1jAaicwtLjiasSLEtOsibfuE6ickevcpepgqYh1lw/0

然后将这个图片放入到下面代码里，做小程序的自定义转发分享缩略图即可。

Page({
  onShareAppMessage: function (res) {
    if (res.from === 'button') {
      // 来自页面内转发按钮
      console.log(res.target)
    }
    return {
      title: '自定义转发标题',
      path: '/page/xinweiyun/com/user?id=888',
　　　　imageUrl:'这里输入头像的地址就可以了'
    }
  }
})

注意的是，在用户获取授权的时候，如果不是有特殊需要，直接使用132的头像大小是足够的，你需要高清大图的时候，再将132换为0即可

好了，今天就给大家分享到这里了。我，秋峰，phper、java后端开发，目前自创业，做项目系统开发，后端加小程序前端结合，今天就给大家分享到这里，希望对大家有所帮助。欢迎交流大家相互学习共同提高我的微信号：qiufeng2999

转载于:https://www.cnblogs.com/xinweiyun/p/9361095.html