一、背景
自2022年10月25日后，小程序 wx.getUserProfile 接口 被收回，通过 wx.getUserInfo 接口获取用户头像将统一返回默认灰色头像，昵称将统一返回 “微信用户”。如需获取用户头像昵称，可以手动获取，具体步骤👉「头像昵称填写能力」
✍GitHub完整代码地址👉：https://github.com/cheinlu/groundhog-charging-system/blob/master/front-mini-programe/components/info/info.vue
✍Gitee完整代码地址👉：front-mini-programe/components/info/info.vue · cheinlu/土拨鼠充电系统 - Gitee.com
规则说明指引：
小程序用户头像昵称获取规则调整公告 | 微信开放社区
二、头像昵称填写
头像昵称填写指引：头像昵称填写 | 微信开放文档
2.1、默认状态
2.2、头像选择
①头像选择
将button组件 open-type="chooseAvatar"，当用户选择需要使用的头像之后，可以通过 @chooseavatar 事件回调获取到头像信息的临时路径。
2.2.1、头像选择--具体实现：
当选择头像后就会触发在button上的 @chooseavatar 回调获取到头像信息，在这里可以选择头像拿到图片地址（选择方式：微信头像/相册/拍照），然后将选择的图片上传到接口服务器上去👇
2.2.2、头像选择--效果展示：
2.3、昵称填写
②昵称填写
将input组件
type的值设置为nickname，当用户在此input进行输入时，键盘上方会展示微信昵称。通过input的@blur事件来获取到自己输入的昵称
2.3.1、昵称填写--具体实现：
鼠标点击输入框时就会自动获取自己的微信昵称，利用@blur事件来获取到自己输入的昵称
2.3.2、昵称填写--效果展示：
2.4、完整代码：
<template> <view class="my-user-info"> <view class="top-box"> <button class="avatar" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"> <image :src="avatarUrl" class="avatar-img"></image> </button> <input class="nickname" type="nickname" :value="nickname" @blur="bindblur" placeholder="请输入昵称" /> </view> <!-- 内容区域 --> <view class="panel-list"> <view class="panel" @click="logout"> <view class="panel-bottom"> <text>退出登录</text> <uni-icons type="right" size="15"></uni-icons> </view> </view> </view> </view></template><script setup>import { ref } from 'vue'import { requestNickname } from '@/utils/api/user.js'import useUserStore from '@/store/user.js'let useStore = useUserStore()let token = useUserStore().tokenlet nickname = ref('')let avatarUrl = ref('https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0')//退出登录let logout = () => { uni.showModal({ title: '提示', content: '确认退出登录吗', success: function (res) { if (res.confirm) { useStore.userLogout() } } })}//更改头像const onChooseAvatar = async e => { const tempFilePath = e.detail.avatarUrl //上传的图片地址 const maxSizeInBytes = 1024 * 1024 // 限制大小为1MB uni.getFileInfo({ filePath: tempFilePath, success: res => { const fileSize = res.size if (fileSize > maxSizeInBytes) { //如果上传的图片大小超过1MB，进行提示 uni.$showMsg('请上传小于1MB的图片') return } //图片大小符合，替换图片 avatarUrl.value = tempFilePath //将更改的图片上传到服务器 uni.uploadFile({ url: 'http://...', //后端接口url filePath: avatarUrl.value, name: 'file', header: { Authorization: 'Bearer ' + token // 将 token 添加到请求的 header 中 }, success(res) { let fileRes = JSON.parse(res.data) uni.$showMsg(fileRes.message) } }) } })}//获取微信昵称const bindblur = async e => { const newNickname = (nickname.value = e.detail.value) //将更改的昵称上传给接口 let res = await requestNickname({ newNickname }) uni.$showMsg(res.data.message)}</script><style lang="scss">.my-user-info { height: 100vh; background-color: #f4f4f4; .top-box { height: 240rpx; background-color: #0aa671; display: flex; flex-direction: column; align-items: center; .avatar { width: 100rpx; height: 100rpx; border-radius: 50rpx; border: 2rpx solid white; box-shadow: 0 1rpx 5rpx black; padding: 0; .avatar-img { width: 100%; height: 100%; } } .nickname { color: white; margin-top: 20rpx; text-align: center; font-size: 30rpx; font-weight: bold; } }}.panel-list { padding: 0 20rpx; position: relative; top: -40rpx; .panel { background-color: white; border-radius: 15rpx; margin-bottom: 20rpx; .panel-bottom { display: flex; justify-content: space-between; padding: 35rpx; font-size: 25rpx; } }}</style>说明：消息弹窗 uni.$showMsg 是封装的 uni.showToast(OBJECT) 显示消息提示框。代码中提到的 uni.$showMsg 可直接用 uni.showToast(OBJECT) 代替 uni.showToast(OBJECT) | uni-app官网
最后：👏👏😊😊😊👍👍
