小程序头像昵称获取“一刀切”式调整，害苦开发者

💬 前言

💻 还原业务场景

要讲清楚当时开发过程遇到的问题，就要先代入到业务场景来说明。“星点贴纸” 主要提供给微信头像加各类贴纸的功能，那么这首先就需要获取到用户头像，当然这是功能最直接的实现路径。“星点贴纸” 小程序所能够提供并使用作为头像的方式有：

• 使用微信头像
• 从相册中选择
• 使用相机拍摄

是的，我就是这样规划业务功能的，于是我就实现了点击头像预览区时，弹出选项列表。

 

弹出选项列表

<view class="avatar-area" bind:tap="preAvatarTapped">
<image class="img-sticker"

    mode="{{preAvatar.stickerMode}}"

    style="{{preAvatar.stickerPosition}}"

    src="{{preAvatar.sticker}}">
image>
<image class="img-sample" src="{{preAvatar.sample}}">image>
view>

Page({
preAvatarTapped(event) {

    wx.showActionSheet({

      itemList: ["使用微信头像", "从相册中选择", "使用相机拍摄"],

      itemColor: "#FFBB66",

      success: (res) => {
console.log(res.tapIndex);

      },

      fail: (err) => {
console.log(err.errMsg);

      }

    });

  }

});

获取用户头像

那么接下来，就是实现 “获取用户微信头像”，于是我在微信小程序 API 中找到了wx.getUserProfile用于获取用户头像昵称。

Page({
preAvatarTapped(event) {

    wx.showActionSheet({

      itemList: ["使用微信头像", "从相册中选择", "使用相机拍摄"],

      itemColor: "#FFBB66",

      success: (res) => {
console.log(res.tapIndex);
if (res.tapIndex === 0) {

          wx.getUserProfile({

            desc: '用于处理图像',

            success: (res) => {
console.log(res.tapIndex);

            },

            fail: (err) => {
console.log(err.errMsg);

            }

          });

        }

      },

      fail: (err) => {
console.log(err.errMsg);

      }

    });

  }

});

但是编译测试后发现控制台报错了，获取的头像也是灰色的默认头像。看着错误信息 “jsapi invalid request data”，我以为是请求的参数问题，实际上是接口本身的问题。

📖 阅读文档

起初我也看到了红色的 Tip，但是并没有理会，因为 API 调整我想大概率也就是字段变更之类的。但是找了一圈发现依然解决不了 “jsapi invalid request data” 的问题，索性点进去看看 Tip。

小程序用户头像昵称获取规则调整公告

不看不知道，一看才知道，自2022年10月25日之后基础库 2.27.1 版本以上通过wx.getUserProfile接口获取用户头像将统一返回默认灰色头像，昵称将统一返回 “微信用户”。如业务需获取用户头像昵称，可以使用「头像昵称填写」能力。

头像昵称填写

Ok，既然官方文档也给出了解决方法，那就换成 “头像昵称填写” API 来实现获取用户微信头像。只不过，这又让我犯了难。

首先官方文档规定 “获取头像昵称” 的开放能力只能通过button组件的open-type="chooseAvatar"实现。而我前面所使用的wx.showActionSheet并不支持给选项添加这样的参数，当然第三方的 UI 组件库是能够实现的。

其次就是 “弹出选项列表” 通过给view组件添加点击事件实现的，，而获取头像昵称的开放能力只能通过button组件实现。

最开始我是循着业务功能的需求尝试解决问题，使用第三方的 UI 组件库来实现 “弹出选项列表”，但是因为 UI 样式及一些参数无法达到预期遂放弃。

于是想着如何给view实现添加open-type="chooseAvatar"，经过研究后终于实现了。这里面的难点是只能使用button组件的前提下又要不影响原本页面设计的样式，如何对button组件的样式作改动。

这里的思路如下：

<view class="avatar-area">
<button class="btn-mask" plain="true" open-type="chooseAvatar" bindchooseavatar="getUserAvatar">button>
<image class="img-sticker" mode="{{preAvatar.stickerMode}}" style="{{preAvatar.stickerPosition}}" src="{{preAvatar.sticker}}">
image>
<image class="img-sample" src="{{preAvatar.sample}}">image>
view>

.avatar-area .btn-mask {
position: absolute;
width: 100%;
height: 100%;
border: unset;
z-index: 1;

}

小程序页面实现效果如下：

🫠 放弃使用微信头像

也许大家都以为改用 “头像昵称填写” 后问题已经解决了，但是我却放弃了这个方案。原因很简单，“头像昵称填写” 所获取的头像是一个十分模糊的头像，根本不适用于 “微信头像” 图像处理类业务，包括 “微信头像加国旗” 这样的功能。至于有多糊，我也懒得去看图片尺寸了，因为当时也是被气到模糊了，根本没法用。一路下来就没办法实现 “使用微信头像”——前功尽弃。

🍉 个人见解

微信官方调整 API 虽然见怪不怪，但是却没想到废弃一个 API 也是想做就做。虽然在 “规则” 的调整背景中有一段话 “实践中发现有部分小程序，在用户刚打开小程序时就要求收集用户的微信昵称头像，或者在支付前等不合理路径上要求授权。如果用户拒绝授权，则无法使用小程序或相关功能。在已经获取用户的 openId 与 unionId 信息情况下，用户的微信昵称与头像并不是用户使用小程序的必要条件”，但是请问，在没有获取用户的 openId 与 unionId 信息情况下呢？

微信官方似乎是站在用户隐私的立场做的调整，但如此 “一刀切” 式的调整，那么《小程序用户隐私保护指引》的意义在哪里？如果用户觉得授权不合理自然会举报，而官方则应当要求违规的小程序整改，而不该想当然地废弃一个接口，又临时拿出一个替代接口，属实是又当又立。再退一步讲，即使是用替代接口，也总不该是个功能降级的接口......

言尽于此，最后还是希望微信官方有一天能把这个问题解决。