前景:国庆节快到了,很多小伙伴会使用微信小程序来制作国庆头像框,而小程序获取用户头像信息的 wx.getUserProfile 和 wx.getUserInfo 接口都已经于2022年废弃了,需要使用到新的方法来获取用户头像。
从基础库 2.21.2 开始支持 当小程序需要让用户完善个人资料时,可以通过微信提供的头像昵称填写能力快速完善。 根据相关法律法规,为确保信息安全,由用户上传的图片、昵称等信息微信侧将进行安全检测,组件从基础库2.24.4版本起,已接入内容安全服务端接口(mediaCheckAsync、msgSecCheck),以减少内容安全风险对开发者的影响。需要将 button 组件 open-type 的值设置为 chooseAvatar,当用户选择需要使用的头像之后,可以通过 bindchooseavatar 事件回调获取到头像信息的临时路径。
2、微信小程序获取用户头像新的接口替换方法
2.1、wxml代码:通过放置按钮,并加上open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar"属性:
<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar"> <image class="avatar" src="{{avatarUrl}}"></image> </button>
2.2、js代码:回调获取用户授权或者相册选择的图片,并赋值给image图片标签
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0' Page({ data: { avatarUrl: defaultAvatarUrl, }, onChooseAvatar(e) { const { avatarUrl } = e.detail this.setData({ avatarUrl, }) } })
3、图片模糊问题解决方案:很多小伙伴会发现获取的头像是模糊的,愿意是微信小程序接口返回的是默认头像是尺寸是132*132px的尺寸,也就是最小尺寸,以前的授权接口可以把后面参数改为0,达到获取高清图片
http://wx.qlogo.cn/mmopen/eTBFF2uBxbBTAW8ZrbmMJGuOq7nGZfGicWORE2vcZfsMwXscofgeEwevlSl8LFct2ZKibzxjqNjw94r2wI2xiaibY3TKxVRPC/132
改为:
http://wx.qlogo.cn/mmopen/eTBFF2uBxbBTAW8ZrbmMJGuOq7nGZfGicWORE2vcZfsMwXscofgeEwevlSl8LFct2ZKibzxjqNjw94r2wI2xiaibY3TKxVRPC/0
现在新的接口直接返回的就是临时地址,我们怎样来达到返回高清图片呢?
方案思路:我们可以把图片保存服务器上,然后服务端对图片进行无损放大,放大的同时图片也不会模糊,服务端通过第三方接口来解决图片模糊问题。
注:有其他解决图片模糊的问题,欢迎下方留言探讨。
4、项目体验:
文章评论(0)