uni-app怎么获取微信小程序的当前用户头像 uni-app最新获取权限方案详解

chooseAvatar 是微信小程序唯一合法头像获取方式，需 button 设置 open-type="chooseAvatar" 并绑定 @chooseavatar 事件，回调中 avatarUrl 为临时路径须立即上传服务器；type="nickname" 输入框需手动监听 blur/input 事件获取值；manifest.json 中 appid 和 SDK 权限配置必须正确，否则按钮无响应。

uni-app 微信小程序中 chooseAvatar 是唯一可用的头像获取方式

微信自 2022 年底起彻底废弃 wx.getUserInfo，2023 年起强制要求使用 open-type="chooseAvatar"。uni-app 中无法再通过一键授权拿到头像 URL，必须由用户主动点击按钮、手动选择头像后才触发回调。这个行为不可绕过，也不支持静默获取。

常见错误现象包括：@getuserinfo 事件不触发、e.detail.userInfo 为空或只有默认头像、控制台报错 getUserProfile is not a function（说明你还在用旧 API）。

• button 必须设置 open-type="chooseAvatar"，不能写成 getUserInfo 或 getUserProfile
• 事件绑定必须是 @chooseavatar（注意不是 @getuserinfo 或 @getuserprofile）
• 回调中拿到的 e.detail.avatarUrl 是临时路径，形如 wxfile://xxx，仅本次会话有效，不可直接存库或长期展示
• 该能力仅在微信小程序平台生效，H5/App 端需降级为本地上传或跳转微信网页授权

为什么 avatarUrl 拿到后很快 404 或 307 重定向

微信返回的 avatarUrl 不是 CDN 地址，而是客户端本地缓存文件的临时协议地址（wxfile://）。它只在当前小程序进程生命周期内可读，重启、切后台、或超过数分钟就失效。直接用于 <image> 标签可能短暂显示，但后续渲染或分享时必然失败。

正确做法是立即上传到你自己的服务器：

• 调用 uni.uploadFile，filePath 填 e.detail.avatarUrl，name 通常为 "file"
• 后端接收后保存并返回永久 URL，前端再将该 URL 存入 userInfo.avatarUrl
• 不要尝试用 uni.downloadFile 转成本地临时路径——没必要，且可能失败
• 若上传失败，应提示用户重选，而不是保留失效链接

type="nickname" 输入框的绑定与监听陷阱

微信原生 input 设置 type="nickname" 后，会在软键盘上方提供“微信昵称”快捷选项，但这个值**不会自动同步到 v-model 绑定的变量中**。这是 uni-app 编译层和微信底层交互的已知兼容问题，不是你代码写错了。

解决方案只能手动监听：

• 给 input 加 @blur="onNicknameBlur" 或 @input="onNicknameInput"
• 在方法里用 this.$nextTick 延迟读取 value，避免 DOM 更新未完成导致取空
• 更稳妥的做法是加一个 watch 监听该字段变化，并在变化后立刻提交到服务端（因为用户可能点完昵称就直接关闭键盘）
• 注意：该输入框不校验长度或格式，需前端自行判断是否为空或超长（微信限制 30 字符）

配置和权限检查容易被忽略的三个点

即使代码全对，仍可能拿不到头像，原因往往出在工程配置或平台限制上：

• manifest.json 中 "mp-weixin" 下的 appid 必须填写真实、已备案、且在微信开放平台关联了当前小程序的 AppID；填错或留空会导致按钮无响应
• HBuilderX 项目需勾选「微信小程序」平台权限，在 manifest.json 的「SDK 配置」→「微信小程序」→ 勾选「用户信息」，否则真机调试时按钮点击无反应
• 真机测试必须用体验版或正式版二维码，开发版在部分安卓机型上 chooseAvatar 会静默失败（无报错），iOS 则相对稳定

最麻烦的是：这些配置错误都不会抛 JS 异常，按钮看起来能点，但回调死活不进。建议每次改完 manifest 后 clean 项目并重新运行。