背景：最近在用uniapp写微信小程序授权登录的时候，发现项目在微信开发者工具中调试是正常的，但是在真机运行时，返回的用户数据中昵称变成了微信用户，头像变成了默认的灰底头像。接着去百度了一下发现出现这个问题的原因是getUserProfile接口被回收了，微信小程序基础库在2.27.1及以上版本的不再支持getUserProfile接口获取用户头像昵称了，改用头像昵称填写的方式去获取用户头像和昵称信息。详情可见官网
小程序用户头像昵称获取规则调整公告
头像昵称填写
所以就把项目中的微信登录部分改成了2.27.1以下的版本还是用getUserProfile接口，2.27.1及以上的版本用头像昵称填写能力。下面是通过头像昵称填写能力获取用户头像和昵称的简单实现（uniapp）。
wx-login-popup.vue文件
<template><view class="container" v-if="isVisible"><!-- 标题 --><view class="title"><text>获取昵称头像</text><text>未选择头像则为默认头像</text></view><!-- 选择头像 --><view class="choose-avatar-row"><button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar"><image class="avatar" :src="avatarUrl"></image></button><text>点击选择头像</text></view><!-- 选择昵称 --><view class="choose-nickname-row"><text>昵称</text><input v-model="nickName" @input="inputName" type="nickname" placeholder="请输入昵称" /></view><!-- 按钮 --><view class="login-row"><button @click="close">关闭</button><button @click="submit" :class="{'inactive' : disabled}" :disabled="disabled">登录</button></view></view></template><script>export default {name: "wx-login-popup",data() {return {avatarUrl: '/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0', // 默认头像nickName: '',// 控制登录按钮是否可用disabled: false};},props: {isVisible: {type: Boolean,default: false}},watch: {// 只要昵称填写了就可以提交登录nickName(newVal) {if (newVal) {this.disabled = false}}},methods: {// 选择头像事件async onChooseAvatar(e) {const {avatarUrl} = e.detail// do something// 我这边是把文件上传到云服务器this.avatarUrl = await this.uploadFiles(avatarUrl, 'avatar')},// 上传头像图片到云服务器async uploadFiles(filePath, cloudPath) {const res = await uniCloud.uploadFile({cloudPath: cloudPath,filePath: filePath})// 上传成功后将图片路径返回出去return res.fileID},// 昵称输入事件inputName(e) {const {value} = e.detail// do something},// 关闭按钮点击事件close() {this.$emit('update:isVisible', false)},// 登录按钮点击事件submit() {const userInfo = {avatarUrl: this.avatarUrl,nickName: this.nickName}this.$emit('submit', userInfo)}}}</script><style lang="scss">view {box-sizing: border-box;}.container {width: 100%;height: 45%;position: absolute;left: 0;bottom: 0;padding: 0 20px;box-sizing: border-box;display: flex;flex-direction: column;background-color: #fff;border-top-left-radius: 10px;border-top-right-radius: 10px;.title {width: 100%;height: 30%;font-size: 20px;font-weight: bold;padding-top: 20px;text:nth-child(2) {display: block;font-size: 14px;font-weight: normal;margin-top: 5px;}}.choose-avatar-row,.choose-nickname-row {width: 100%;height: 20%;display: flex;justify-content: flex-start;align-items: center;padding: 10px 2px;font-size: 14px;border-top: 1px solid #ccc;border-bottom: 1px solid #ccc;.avatar-wrapper {width: 40px;height: 40px;margin: 0;padding: 0;margin-right: 10px;.avatar {width: 100%;height: 100%;}}}.choose-nickname-row {border-top: none;text {width: 45px;margin-right: 10px;}}.login-row {width: 100%;height: 30%;padding-top: 20px;display: flex;button {font-size: 14px;width: 30%;height: 40px;display: flex;align-items: center;justify-content: center;border-color: transparent;color: #07c160;}.inactive {color: #ccc;}}}</style>
使用：
login.vue页面（记得导入组件，我这里用的是uniapp，有easycom所以没有手动导入）
<!-- 微信登录之填写头像昵称信息 --><wx-login-popup :isVisible.sync="isLoginPopupVisible" @submit="submit"></wx-login-popup>
需要传递控制弹框显示与隐藏的值，接收该组件的登录事件
<script>export default {data() {return {isLoginPopupVisible: false,}},methods: {// 接收填写信息组件的登录事件submit(userInfo) {// 登录逻辑...}}}</script>
效果如下：
其中还要注意一点，获取昵称在微信开发者工具中运行时是空值，但是在真机中测试是正常能获取到微信昵称的，可能跟我没有做内容安全检测有关，如果友友们有兴趣可以去官网了解一下~
另外：弹出框样式借鉴的是这个博主的帖子
/qq_45737678/article/details/127898614?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522166921385016782388079221%2522%252C%2522scm%2522%253A%25220713.130102334..%2522%257D&request_id=166921385016782388079221&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-1-127898614-null-null.142^v66^control,201^v3^control_1,213^v2^t3_esquery_v2&utm_term=%E5%A4%B4%E5%83%8F%E6%98%B5%E7%A7%B0%E5%A1%AB%E5%86%99%E8%83%BD%E5%8A%9B&spm=1018.2226.3001.4187
微信小程序获取用户信息（getUserProfile接口回收后）——通过头像昵称填写获取用户头像和昵称
