关键词：
1、基本介绍
微信小程序获取头像昵称的能力，最近又进行了一次调整，如果没有记错这是今年第三次调整了，每次调整每个开发者心中我相信都跟我一样，万马奔腾。。。今天写个demo体验下实际效果如何。
详细信息请见小程序用户头像昵称获取规则调整公告
大概意思呢就是我们为了保护用户隐私，提升用户体验，用户在使用小程序的时候可以选择不使用真实的微信头像昵称，可以从自己本地选择一张图片作为头像，昵称是用户可以手动输入。
为确保信息安全，由用户上传的图片、昵称等信息微信侧将进行安全检测，组件从基础库2.24.4版本起，接入内容安全服务端接口，mediaCheckAsync、msgSecCheck），以减少内容安全风险对开发者的影响。
可以说微信团队可真是贴心。
2、头像选择
需要将 button 组件 open-type 的值设置为 chooseAvatar，当用户选择需要使用的头像之后，可以通过 bindchooseavatar 事件回调获取到头像信息的临时路径。
从基础库2.24.4版本起，若用户上传的图片未通过安全监测，不触发bindchooseavatar 事件。
具体使用效果如下
代码如下：
<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
<image class="avatar" :src="avatarUrl" mode="aspectFill"></image>
</button>
tips:
有一点需要注意的是：我们在这里通过onChooseAvatar拿到的图片路径是本地的一个临时路径，想把用户的头像给保存起来，我们需要把图片转成base64存储，或者做个图片上传。。。
3、昵称填写
需要将 input 组件 type 的值设置为 nickname，当用户在此 input 进行输入时，键盘上方会展示微信昵称。
从基础库2.24.4版本起，在onBlur 事件触发时，微信将异步对用户输入的内容进行安全监测，若未通过安全监测，微信将清空用户输入的内容，建议开发者通过 form 中form-type 为submit 的button 组件收集用户输入的内容。
具体使用代码和效果如下
<input v-model="nickname" @input="inp" type="nickname" class="weui-input" placeholder="请输入昵称" />
tips：
这里有一点需要注意的是：我这里是通过uniapp来写的，输入框的值是通过v-model来进行绑定的，在微信开发者工具中，在输入框手动输入昵称是可以通过v-model拿到值的，但是点击下方的弹层使用微信昵称时，一直拿不到值，整的我有点怀疑人生，后来发现是开发者工具的问题，使用真机就好了~~~
本篇文章到此结束，如果对你有帮助，请留下你的评论和点赞，谢谢~~
微信小程序登录获取不到头像和昵称解决办法！(代码片段)
微信小程序登录获取不到头像和昵称主要原因是：小程序wx.getUserProfile接口被收回！大家可以按照文档操作↓PS：针对小程序wx.getUserProfile接口将被收回后做出的授权调整小程序文档中提出的调整说明对于此次变化... 查看详情
最新uniapp微信小程序获取头像open-type=“chooseavatar“@chooseavatar方法(代码片段)
...户头像将统一返回默认灰色头像，昵称将统一返回“微信用户”。生效期前发布的小程序版本不受影响，但如果要进行版本更新则需要进行适配。自生效期起，插件通过wx.getUserInfo接口获取用户昵称头像将被收回：... 查看详情
小程序头像和昵称填写能力用底部弹框界面实现(代码片段)
最近，微信小程序又更新了文档，关于获取头像和昵称需要进行适配。https://developers.weixin.qq.com/community/develop/doc/00022c683e8a80b29bed2142b56c01 其中，基础库在xxx以上的都不能弹框授权获取了，官方给的是在页面中获取&... 查看详情
微信小程序最新用户头像昵称获取规则调整应对措施（2022）(代码片段)
...新增一个页面用于用户自定义头像和昵称。二、应对措施微信新增了头像填充能力：头像昵称填写2.1更新头像就是设置button的open-type为chooseAvatar，当用户点击时，就会触发“修改头像”事件。button按钮<buttonclass=&... 查看详情
微信小程序开放能力(代码片段)
open-data代码：<open-datatype="groupName"></open-data><view>昵称：<open-datatype="userNickName"></open-data></view><view>头像&#x 查看详情
微信小程序开放能力(代码片段)
open-data代码：<open-datatype="groupName"></open-data><view>昵称：<open-datatype="userNickName"></open-data></view><view>头像&#x 查看详情
微信小程序获取用户昵称头像和昵称（附源码）(代码片段)
...rXzWnpAsk5UsfKesGw提取码：8bwm小程序登录小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识，快速建立小程序内的用户体系。说明调用wx.login()获取临时登录凭证code，并回传到开发者服务器。调... 查看详情
关于微信小程序获取头像和昵称
不知道为什么微信一直对开发者获取：微信头像+微信昵称。一直抱以限制态度，关于接口调用方法，也是一直在修改！open-type=“getUserInfo”在2021年4月13日停用wx.getUserInfo在2021年4月28日停用wx.getUserProfile在2022... 查看详情
微信小程序开放能力(代码片段)
open-data代码：<open-datatype="groupName"></open-data><view>昵称：<open-datatype="userNickName"></open-data></view><view>头像：<open-datatype="userAvatarUrl"style="display:block;width:100... 查看详情
微信小程序开发用户头像昵称获取规则调整2022
....com/community/develop/doc/00022c683e8a80b29bed2142b56c01若只是想实现微信身份登录，可以通过 wx.login 接口直接获取用户的 openId 与unionId信息 查看详情
微信小程序开发用户头像昵称获取规则调整2022
....com/community/develop/doc/00022c683e8a80b29bed2142b56c01若只是想实现微信身份登录，可以通过 wx.login 接口直接获取用户的 openId 与unionId信息 查看详情
微信小程序授权获取用户信息之wx.getuserinfo切换到wx.getuserprofile的使用(已弃用)(代码片段)
...已弃用wx.getUserProfile()官方也已弃用，详情可参考我的微信小程序授权获取头像昵称的最新形式——头像昵称填写这篇文章。感兴趣的小伙伴儿也可往下看。背景最近在做一个小程序的项目，需要微信授权获取用户信息... 查看详情
uniapp微信小程序授权登录getuserinfo获取不到用户的昵称和头像
...A但如今，却只能得到一个缺省的灰色头像，和nickname=“微信用户”，两个数据，其它的年龄以及地区等什么都没有，更别提授权弹出框了查看官网如下图才知道API更新了：https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx... 查看详情
微信小程序上传头像(代码片段)
效果代码editInfo.js//pages/editInfo/editInfo.jsPage(/***页面的初始数据*/data:dataList:[],/***获得图片本地路径*/chooseWxImage:function()constthat=this;wx.chooseImage(//最多可以选择的图片张数count:1,//所选的图片的尺寸sizeType:[' 查看详情
微慕小程序开源版v4.6版更新说明
...微慕小程序开源版V4.6版更新说明本次更新主要针对近期微信对于小程序用户头像昵称获取规则调整，核心调整是小程序wx.getUserProfile与插件wx.getUserInfo接口无法获取微信用的用户昵称和头像了，至此这两个接口目前只能获... 查看详情
微慕小程序开源版v4.6版更新说明
...微慕小程序开源版V4.6版更新说明本次更新主要针对近期微信对于小程序用户头像昵称获取规则调整，核心调整是小程序wx.getUserProfile与插件wx.getUserInfo接口无法获取微信用的用户昵称和头像了，至此这两个接口目前只能获... 查看详情
小程序新版uniapp登录流程以及获取头像和昵称(代码片段)
...登录无法拿到头像和昵称！这篇文章讲解如何获取到微信用户昵称和头像成品效果步骤一，点击登录，获取token步骤二，登录按钮隐藏，展示上传按钮步骤三，点击上传按钮步骤四上传按钮隐藏，展示... 查看详情
微信小程序云开发入门到发布上线(代码片段)
...简单的写过起步教程云开发文档熟悉vue/es6小程序注册【微信公众平台】获取appid【微信公众平台-开发-开发设置】新建小程序云开发项目新建项目选择一个空目录，填入AppID（使用云开发能力必须填写AppID）勾选创建“小程序云开... 查看详情