微信小程序开发之获取用户头像昵称

本文是对另一篇文档 https://blog.csdn.net/duke_ding2/article/details/130674320 的补充。

环境

• 微信开发者工具 Stable 1.06.2306020
• 调试基础库 2.32.2

背景

在较低版本（2.27.0及以下）的基础库中，在小程序里可以使用 wx.getUserProfile() API接口来获取微信用户信息。

返回的用户信息包括头像、昵称等。

在2.27.1及以上的基础库中，该接口已经被收回了。该API在调用时，不会弹出用户授权窗口，而是会直接返回默认的昵称“微信用户”和默认头像。

在官方的 小程序用户头像昵称获取规则调整公告 中，解释如下：

……
但实践中发现有部分小程序，在用户刚打开小程序时就要求收集用户的微信昵称头像，或者在支付前等不合理路径上要求授权。如果用户拒绝授权，则无法使用小程序或相关功能。在已经获取用户的 openId 与 unionId 信息情况下，用户的微信昵称与头像并不是用户使用小程序的必要条件。为减少此类不合理的强迫授权情况，作出如下调整。
……

总而言之，就是不要再使用这个接口了，要想获取头像昵称，请参考 头像昵称填写能力 。

获取头像昵称

准备

新建小程序 miniprogram-15 ，不使用云服务，选择JavaScript基础模板。

新建页面 myPage1 。在 app.js 中，把 myPage1 调整到最前面。

点击右上角 “详情” -> “本地设置” ，将“调试基础库” 设置为 2.32.2 。

获取头像

代码

只需将按钮的 open-type 设置为 "chooseAvatar" ，即可通过 bindchooseavatar 事件获取头像的临时路径。

• myPage1.wxml ：

<button open-type="chooseAvatar" bindchooseavatar="onChooseAvatar">
  <image src="{{avatarUrl}}" style="width: 132rpx; height: 132rpx;">image>
button>

• myPage1.js ：

......
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
......
  data: {
    avatarUrl: defaultAvatarUrl,
  },
......
  onChooseAvatar(e) {
    const { avatarUrl } = e.detail 
    this.setData({
      avatarUrl,
    })
  },
......

效果

点击按钮，效果如下：

选择“用微信头像”：

获取昵称

代码

只需将input的type设置为 "nickname" 。

<input type="nickname" placeholder="请输入昵称"/>

效果

当input获得焦点时，页面下方就会提示使用微信昵称：

点击之，微信昵称就会填充到input里。

其它

本例中为了简化，省略了CSS美化。在微信官网中，有一个完整的示例： https://developers.weixin.qq.com/s/AHlLS9mn7Izb

参考

• https://developers.weixin.qq.com/community/develop/doc/00022c683e8a80b29bed2142b56c01
• https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/userProfile.html