微信小程序最新获取头像和昵称:以及头像的上传方法

懒羊羊学前端
原创
发布时间: 2026-03-28 10:27:17 | 阅读数 0收藏数 0评论数 0
前端
小程序
用户信息
头像
上传文件
微信
封面
在 微信 小程序的开发中，获取用户头像和昵称曾经是非常基础的功能，但随着隐私政策的不断升级，官方接口也经历了多次调整。如今，开发者已经无法像早期那样直接通过授权获取用户信息，而是需要结合新的用户授权流程来实现。 本文将围绕微信小程序最新规范，详细讲解如何合规地获取用户头像与昵称，包括 wx.getUserProfile 的使用方式，以及推荐的按钮触发授权方案。同时，还会介绍头像上传到服务器的完整流程（如使用 wx.uploadFile），帮助你实现从前端获取到后端存储的一整套解决方案。
1

创建新项目

图片

我这边给大家创建一个新项目进行示例 创建新项目会有部分的相关代码

2

用户昵称

图片

其实昵称就很简单 只需要把input 的type属性改成nickname即可 s示例如下



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

用户头像获取

向左
向右
图片
12


头像的话需要把open-type属性设置为"chooseAvatar" 然后选择后的函数触发是 bind:chooseavatar="onChooseAvatar" 示例如下效果如图1 chooseavatar的参数值如图2 avatarUrl 就是微信生成的你头像的临时地址


<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
<image class="avatar" src="{{userInfo.avatarUrl}}"></image>
</button>
4

头像上传

图片

由上步我们可以获取到临时的微信头像地址 我们需要把地址换算成文件传到服务器、

这就需要使用wx.uploadFile(Object object) 这个方法了 https://developers.weixin.qq.com/miniprogram/dev/api/network/upload/wx.uploadFile.html 这个是这个方法的地址


示例如图1url是服务器地址 filePath是微信头像的临时地址 name是后端的接参名

wx.uploadFile({
url: 'https//localhost:8080/appUser/profile/avatarUpload',
filePath: avatarUrl,
name: 'file',
fail (e){
console.log(e);
}
})
5

后端示例

图片

后端示例如图 就是正常上传头像的逻辑这里就不详细介绍了

阅读记录0
点赞0
收藏0
禁止 本文未经作者允许授权，禁止转载
更多相关项目
猜你喜欢
评论/提问(已发布 0 条)
评论 评论
收藏 收藏
分享 分享
pdf下载 下载
pdf下载 举报