微信小程序用户头像昵称获取新规适配教程，用户自定义头像昵称

微信小程序的头像昵称新规已经开始逐步实施，一些群友的小程序已经无法登录，借着这次机会和大家好好聊聊小程序的登录问题。

​

这次新规的意思就是，任何接口都无法再获取到用户的头像和昵称进行一键登录了，开始转为用户自己填写头像昵称，这无疑会对用户体验造成负面影响，毕竟一键登录还是很方便的。

好在这次新规其实在今年5月份就发布了，现在10月份才开始实施，留给了开发者足够的跑路时间。

不过我在5月份以后开发的小程序，都开始转为了静默登录，用户自己可以上传头像和用户名这种。

也就是使用wx.login接口实现，其实我们后台基本都是靠openid来区别用户，而获取openid的login接口无需用户确认，用户也感受不到，这就是静默登录。

而获取用户的昵称头像，只不过是给用户看起来正规的感觉，但除此之外，对于一些普通小程序来说，用处不是很大，毕竟不会有开发者靠昵称头像等数据来区分用户。

所以我的思路就是直接使用wx.login，在用户进入小程序的第一时间就进行静默登录， 然后给用户一个默认的昵称和头像，用户可以选择修改/不修改，无论怎样，我们都可以用openid或后台数据表ID来区分用户。

关于login接口，大家可以看官方文档，相信大家程序也都已经写好了这个接口

https://developers.weixin.qq.com/miniprogram/dev/api/open-api/login/wx.login.html

这次我着重要讲的是，用户静默登录后怎么样展示给用户，我的方法是设置一个默认头像：

并给用户一个默认昵称，比如游客、普通用户、SSSSVIP中P，反正随意设置，我设置的是用户+用户ID：

这样，当用户进入小程序后，我们直接就进行静默登录，并将用户名和头像同用户openid一起存到数据库，用户在无需任何操作的情况下，就拥有了自己的账户，比以前点击一键登录还要无感，是不是非常nice！

其实大部分人对于用户名和头像是不太在意的，如果你不是圈子，论坛小程序，只是普通工具，基本到这步也就可以了，当然，最好还是给用户加一个自定义功能，这样也有更好的用户体验，留住一部分强迫症的用户。

下面就开始讲代码了，这次介绍下微信新加的两个接口：

头像昵称填写能力，通过这两个接口，用户在需要自定义头像、昵称的时候，能自行选择是否一键复用微信信息

这样也方便了用户快速填写，一些论坛，圈子小程序更好进行适配，以及像我这样的强迫症开发者，可以不用，但不能没有….

头像快速填写接口的使用就像调用分享能力，需要用到button的open-type属性：

<button open-type="chooseAvatar"  bindchooseavatar="onChooseAvatar">      <text class="cuIcon-camera"></text></button>

用户点击上方按钮即可调起快速填写界面，用户选择完图片后，onChooseAvatar方法将会收到头像回调

onChooseAvatar(e) {    //e.detail.avatarUrl就是用户选择的头像本地路径    console.log(e.detail.avatarUrl)}

之后将获取到的e.detail.avatarUrl上传，替换到用户数据库中的默认头像即可。

下面是快速填写昵称能力：

<input type="nickname" placeholder="请输入昵称" maxlength="14"/>

将input组件的type设置为nickname，这样用户点击输入时，键盘上方就会出现用户的微信昵称供快速填写

之后用户点击确定后，即可用以前的方式获取input的值，传给后台，写到用户的数据库昵称字段中，完成！

而且这两个能力，微信已经自行接入了安全检测接口，也就是用户上传违规头像或昵称时，微信会在前端输入时就提示用户违规，这样也省了我们再次进行违规检测。

注意：以上代码仅作为展示，如直接用到开发环境中需自行修改，本篇教程非新手向。

未经允许不得转载：肥猫博客 » 微信小程序用户头像昵称获取新规适配教程，用户自定义头像昵称