微信小程序获取用户头像和昵称问题的解决方案

OString2024

于 2025-04-22 16:59:13 发布

阅读量874

点赞数 24

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/huntershuai/article/details/147425867

版权

在开发微信小程序时，许多开发者遇到了无法获取用户头像和昵称的问题。这主要是因为微信官方在 2022 年 11 月 8 日调整了相关规则，回收了部分接口权限。本文将详细介绍几种解决这一问题的方法。

问题背景

在小程序授权获取用户头像和昵称时，开发者可能会遇到以下问题：获取到的头像和昵称为空，或者无法正常使用。这主要是因为微信官方对基础库版本进行了调整，导致部分旧接口失效。

解决方案

一、临时解决方案：降低基础库版本

微信官方提到，对于低于 2.27.1 版本的小程序，仍然可以使用旧的授权接口来获取用户头像和昵称。开发者可以通过以下步骤实现这一方案：

在小程序的 app.json 文件中，将基础库版本设置为 2.27.0 或更低版本。
清空本地缓存，重新运行小程序。
测试获取头像和昵称的功能，确认是否恢复正常。

虽然这种方法可以暂时解决问题，但它并不是长久之计。因为微信官方会不断升级基础库，如果长期使用低版本，可能会导致小程序无法使用新功能。

二、官方方案：使用头像昵称填写能力（不推荐）

微信官方提供了一个新的方案，允许开发者通过用户手动填写的方式获取头像和昵称。具体实现方式如下：

在页面中添加一个输入框，允许用户输入昵称。通过设置 input 标签的属性，用户可以选择使用微信昵称或自定义昵称。
提供一个按钮或区域，让用户上传头像。微信会返回一个临时链接，但该链接的有效期较短，不适用于长期存储。

这种方法的缺点是明显的：临时链接无法长期使用，且用户体验较差。因此，这种方法仅适用于对头像需求不高的场景。

三、推荐方案：自行存储头像和昵称

为了彻底解决头像和昵称获取问题，开发者可以自行存储用户头像和昵称。以下是两种实现方式：

1. 使用云开发存储头像和昵称

云开发是微信官方提供的后端服务，支持云存储功能，可以方便地存储用户头像并生成永久链接。以下是实现步骤：

初始化云开发：在小程序中初始化云开发环境，配置环境 ID。
上传头像：通过 wx.chooseMedia 方法让用户选择图片，然后使用 wx.cloud.uploadFile 方法将图片上传到云存储中。
存储昵称：通过 input 标签获取用户输入的昵称，并将其存储到云数据库中。

以下是完整的代码示例：

WXML 文件

<view class="item">
  <view class="tip">编辑用户昵称</view>
  <input type="nickname" bindinput="getName" />
</view>
<view class="line"></view>
<view class="item" bindtap="chooseImage">
  <view class="tip">点击修改头像</view>
  <image src="{{avatarUrl}}" />
</view>

WXSS 文件

.item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 15rpx;
  border-bottom: 1rpx solid gray;
  padding-bottom: 20rpx;
}
.tip {
  font-size: 44rpx;
  margin: 20rpx;
  color: red;
}
.item image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 10rpx;
  margin: 10rpx 30rpx;
}
.item input {
  flex: 1;
  border: 1px solid gray;
  border-radius: 20rpx;
  padding: 5rpx 15rpx;
}

JS 文件

const app = getApp()
wx.cloud.init({
  env: 'cloud1-3g3xyg1a9ff9d8fe' // 替换为你的环境 ID
})
const db = wx.cloud.database()

Page({
  getName(e) {
    this.setData({
      name: e.detail.value
    })
  },
  chooseImage() {
    wx.chooseMedia({
      count: 1,
      mediaType: ['image'],
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      success: (res) => {
        console.log("选择图片成功", res)
        let avatarUrl = res.tempFiles[0].tempFilePath
        this.setData({
          avatarUrl: avatarUrl
        })
        wx.cloud.uploadFile({
          cloudPath: new Date().getTime() + '.png',
          filePath: avatarUrl,
        }).then(res => {
          let fileID = res.fileID
          console.log("上传返回的头像永久链接", fileID)
        }).catch(error => {
          console.log("上传失败", error)
        })
      }
    })
  }
})