关于javascript:微信小程序获取用户头像和昵称能力调整新的代替方案

接口调整布告

前段时间，微信公布《小程序用户头像昵称获取规定调整布告》称实际中发现有局部小程序，在用户刚关上小程序时就要求收集用户的微信昵称头像，或者在领取前等不合理门路上要求受权。

如果用户回绝受权，则无奈应用小程序或相干性能。在曾经获取用户的 openId 与 unionId 信息状况下，用户的微信昵称与头像并不是用户应用小程序的必要条件。为缩小此类不合理的强制受权状况，小程序 wx.getUserProfile 接口将被发出，wx.getUserInfo 接口获取用户昵称头像将被发出。

新的代替计划

为了解决这个问题，小程序官网提供了一个头像昵称填写能力。当小程序须要让用户欠缺个人资料时，能够通过微信提供的头像昵称填写能力疾速欠缺。

当你点击头像的时候能够间接将头像的长期地址获取到，当你点击输入框的时候，能够获取到你的微信昵称，能够将微信昵称间接填入输入框。

index.wxml

<button class="avatar" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">  <image src="{{avatarUrl}}"></image></button> <input type="nickname" class="weui-input" placeholder="请输出昵称"/>

index.js

const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'Page({  data: {    avatarUrl: defaultAvatarUrl,  },  onChooseAvatar(e) {    const { avatarUrl } = e.detail     this.setData({      avatarUrl,    })  }})

index.wxss

.avatar{      width: 80px;      height: 80px;      padding:0;      background: none;}.avatar image{      width: 80px;      height: 80px;      border-radius: 100px;}.weui-input{      width: 90%;      height: 60px;      margin:20px auto;      background: #eee;      border-radius: 5px;      padding-left: 15px;}

通过这种办法就能够杜绝那些强制受权获取头像和昵称的小程序了。不过这么阉割这个性能，还是升高了用户体验。

这里要留神的是：获取到的头像是长期地址，不要存进数据库，长期地址会生效，精确的做法就是通过wx.uploadFile这个接口将长期地址的头像上传到你服务器进行贮存，获取永恒地址。

const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'Page({  data: {    avatarUrl: defaultAvatarUrl,  },  onChooseAvatar(e) {    const { avatarUrl } = e.detail     this.setData({      avatarUrl,    })    //  将头像上传到服务器    wx.uploadFile({      url: 'https://example.weixin.qq.com/upload',      filePath: tempFilePaths[0],      name: 'file',      success (res){        const data = res.data        //do something      }    })  }})

Author:TANKING
WeChat:sansure2016
如需深刻学习，能够分割我！