微信小程序中使用微信头像的实现方式-逐梦个人博客

最近在很多与微信头像处理相关的微信小程序中，看到了这么一个小功能，点击按钮即可直接使用当前用户的微信头像：

这类小程序主要是对微信头像做处理，比如添加一些装饰之类的，大部分用户都会选择使用当前的微信头像，如果有一个按钮可以直接获取当前用户的微信头像会显得十分的贴心。

那么这个功能是如何实现的呢？

首先我们在wxml文件中放置Button组件并将open-type设置为chooseavatar，在chooseavatar事件的处理函数中接收获取的微信头像地址，代码如下：

wxml:

<button open-type="chooseAvatar" type="primary" bind:chooseavatar="onChooseAvatar">微信头像</button>

处理函数：

...,
onChooseAvatar(e) {
    const { avatarUrl } = e.detail;
    console.log(avatarUrl);
},
...

一切准备就绪，当点击我们上面定义的微信头像Button，就会弹出图1所示的ActionSheet，选择“用微信头像”，即可打印出微信头像的地址。这里我们留意到除了“用微信头像”之外，还有3个选项，除去“取消”外还有“从相册选择”和“拍照”，我们知道“用微信头像”返回的一定是满足微信头像尺寸要求的图片，但是通过“从相册选择”和“拍照”得到的图片就不一定，对于这2种情况获得的图片，我们需要进行一定的裁剪，但是处理函数是统一的，我们要怎么将它们与“用微信头像”区分开呢？其实也很简单，微信头像肯定是方形的，即宽=高，我们可以获取我们图片的信息，根据宽高情况，判定是不是需要裁剪，代码如下：

...,
onChooseAvatar(e) {
    const { avatarUrl } = e.detail;
    wx.getImageInfo({
        src: avatarUrl,
        success: (res) => {
          const {
              width,
              height
          } = res;
          if (width === height) {
              this.setData({
                avatarUrl,
              });
          } else {
              wx.navigateTo({
                url: `/pages/copper/index?url=${avatarUrl}`,
              });
          }
        },
        fail: (err) => {
          console.log(err)
        }
    });
},
...

注意：该功能从基础库2.21.2开始支持

官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/userProfile.html