根据微信官方文档的说法,10月之后,原本的获取昵称和头像的api,也就是wx.getUserProfile和wx.getUserInfo将停止支持,在那之后发布和更新的小程序必须停止使用这两个api。
这两个api获得的用户头像均为一个url,指向网络上的一个头像图片。前端获取该链接后可通过wx.request传到后端,服务器访问该链接并将图片下载保存。
微信官方推荐的替代做法:头像昵称填写 | 微信开放文档 ()
代码(来自上述的链接):
<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar"><image class="avatar" src="{{avatarUrl}}"></image></button> <input type="nickname" class="weui-input" placeholder="请输入昵称"/>
const defaultAvatarUrl = '/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'Page({data: {avatarUrl: defaultAvatarUrl,},onChooseAvatar(e) {const { avatarUrl } = e.detail this.setData({avatarUrl,})}})
必须让用户点击开发者设置的button标签,然后手动选择自己的微信头像,或者在相册中选择一张图片,button应该填的的属性见上图。
测试后发现,这种方法得到的avatarUrl是微信本地临时文件的路径,可以让小程序显示使用,但是不能在远程访问,也就是不能通过发送url给服务器的方式让服务器下载图片,必须把图片本身发送给服务器。所以我们可以使用wx.uploadFile,将刚刚保存在本地的头像发送至服务器
onChooseAvatar(e) {var avatarUrl = e.detail this.setData({avatarUrl,//让图片预览处显示刚刚选择的图片});wx.uploadFile({filePath: avatarUrl,name: 'avatarImg',url: uploadUrl,//服务器端接收图片的路径success:function(res){console.log(res);//发送成功回调},fail:function(res){console.log(res);//发送失败回调,可以在这里了解失败原因}})},
注意:wx.uploadFile所允许的域名白名单需要在小程序后台配置,与wx.request是分开的。配置之后记得清除本地缓存才会生效。