当前位置：首页 > news >正文

Uniapp中进行微信小程序头像和昵称的更改

news 2025/9/4 6:58:04

一、官方文档：

1、`wx.getUserInfo`（`uni.getUserInfo`）：`基础库版本低于2.27.1可用`

① 文档链接：

https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx.getUserInfo.html
https://uniapp.dcloud.net.cn/api/plugins/login.html#getuserinfo

② 官方说明：

2021年4月28日24时后发布的小程序新版本，无法通过wx.getUserInfo与<button open-type="getUserInfo"/>获取用户个人信息（头像、昵称、性别与地区），将直接获取匿名数据（包括userInfo与encryptedData中的用户个人信息），获取加密后的openID与unionID数据的能力不做调整。此前发布的小程序版本不受影响，但如果要进行版本更新则需要进行适配

③ 替代方案 - 已经废弃：

<button open-type="getUserInfo" @getuserinfo="handleGetUserInfo">获取用户信息</button>

2、`wx.getUserProfile`（`uni.getUserProfile`）：`基础库版本2.9.5~2.27.1可用`

① 文档链接：

https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx.getUserProfile.html#%E7%A4%BA%E4%BE%8B%E4%BB%A3%E7%A0%81
https://uniapp.dcloud.net.cn/api/plugins/login.html#getuserprofile

② 官方说明：

自 2022 年 10 月 25 日 24 时起，小程序 wx.getUserProfile 接口将被收回：生效期后发布的小程序新版本，通过 wx.getUserProfile 接口获取用户头像将统一返回默认灰色头像，昵称将统一返回 “微信用户”。

③ 替代方案 - 已经废弃：

<button @click="getUserProfile">获取用户信息</button>

3、非静默获取用户头像和昵称：

① 文档链接：

https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/userProfile.html

② 完整代码：

<template><view class="myIndex" :style="{ paddingTop: navbarHeight + 'px' }"><view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }"><view class="navbar-title">{{title}}</view></view><view class="content"><!-- 头像 --><button open-type="chooseAvatar" @chooseavatar="onChooseAvatar" class="avatar-button"><image :src="avatar" mode="aspectFill" class="img" /></button><!-- 昵称 --><input type="nickname" placeholder="请输入昵称" v-model="nickName" @input="onKeyInput"/></view></view>
</template><script>export default {data() {return {title: '个人中心',navbarHeight: 0, // 导航栏高度statusBarHeight: 0,avatar: 'https://img0.baidu.com/it/u=3824830576,2699714066&fm=253&app=138&f=JPEG?w=800&h=804', // 默认的头像nickName: '默认的昵称', // 默认的昵称}},onLoad() {// 获取系统信息计算导航栏高度const systemInfo = uni.getSystemInfoSync();this.statusBarHeight = systemInfo.statusBarHeight;this.navbarHeight = this.statusBarHeight + 44; // 44是导航栏标准高度},methods: {// 点击进行头像选择onChooseAvatar(e) {const that = thisconst {avatarUrl} = e.detailuni.showLoading({ title: '上传中...' });// 构造请求的参数let params = {}uni.uploadFile({url: _uploadUrl, // 后端接口地址filePath: avatarUrl, // 临时文件路径name: 'imageFile', // 后端接收文件的参数名（必须与后端一致）formData: params,header: {// 请求头信息},success: (res) => {uni.hideLoading();// 根据后端返回的准确地址进行存储与渲染if (res.code === 200) {console.log('线上的新头像地址为', res.url)uni.showToast({ title: '头像更新成功', icon: 'success' });} else {uni.showToast({ title: result.msg || '上传失败', icon: 'none' });}},fail: (err) => {uni.hideLoading();console.error('上传失败:', err);uni.showToast({ title: '网络错误，请重试', icon: 'none' });}});},// 输入框输入内容onKeyInput() {// 在这里调用后端的接口，存储昵称console.log('这个是输入的数据', this.nickName)}}}
</script><style scoped>.myIndex {width: 100vw;height: 100vh;background-color: #F9F9FB;}.myIndex .custom-navbar {position: fixed;top: 0;left: 0;right: 0;z-index: 999;display: flex;align-items: center;}.myIndex .navbar-title {flex: 1;height: 88rpx;line-height: 88rpx;text-align: center;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-weight: 600;font-size: 32rpx;color: #000000;}.myIndex .content {position: absolute;top: 0;left: 0;width: 100vw;height: 420rpx;background: linear-gradient(180deg, #C6EBFD 0%, #F9F9FB 100%);padding-top: calc(var(--status-bar-height) + 88rpx + 36rpx);text-align: center;}.myIndex .avatar-button {z-index: 1;position: relative;width: 120rpx;height: 120rpx;border-radius: 100rpx;padding: 0;margin: 0 16rpx 0 0;}.myIndex .content-top .img {z-index: 10;position: relative;box-sizing: border-box;width: 120rpx;height: 120rpx;border-radius: 100rpx;border: 6rpx solid #fff;object-fit: cover;}
</style>