关于微信小程序获取头像和昵称

Posted 2023-04-09 munchmills

不知道为什么微信一直对开发者获取：微信头像+微信昵称。一直抱以限制态度，关于接口调用方法，也是一直在修改！

open-type=“getUserInfo” 在2021年4月13日停用

wx.getUserInfo 在2021年4月28日停用

wx.getUserProfile 在2022年11月8日停用

但是如果你在接口停用前发布的，还可以正常使用！

到目前为止，2023年初了，要开始使用微信新接口来获取微信头像和昵称方式，我们开始：

微信小程序wxml端：

<!--获取头像-->
<button open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar"></button> 
<!--获取昵称-->
<input type="nickname" class="weui-input" placeholder="请输入昵称"/>

微信小程序JS端：

onChooseAvatar(e) 
    console.log(e.detail.avatarUrl)
  

但是到目前位置，端口还有存在问题：

1：点击chooseAvatar按钮报错。

当点击获取头像，不选择头像，点取消时候，会出现 chooseAvatar:fail cancel 事件

但是微信官方没有给出这个说明，和这个方法的参考操作.

2: open-type="chooseAvatar" 通过这个方法获取的 e.detail.avatarUrl这个头像是一个临时图片，不能在外部使用：

例如：http://tmp/FmDQRKhbce0Ie239b08f13955f6b1b97ab8c53a649f5.jpeg

临时头像，在微信小程序，关闭后重启后会释放。

到目前为止，如果要存客户头像在自己非云开发后台，使用建议还是获取客户上传图片为头像是最好的，昵称获取没有问题。

如果有更好办法，请开发者留言！

关于微信小程序新版头像昵称API 接口处理

根据微信官方文档的说法，2022年10月之后，原本的获取昵称和头像的api，也就是wx.getUserProfile和wx.getUserInfo将停止支持，在那之后发布和更新的小程序必须停止使用这两个api。

相关公告链接：小程序用户头像昵称获取规则调整公告

 

微信推荐的方法是：「头像昵称填写能力」支持获取用户头像昵称：如业务需获取用户头像昵称，可以使用「头像昵称填写能力」（基础库 2.21.2 版本开始支持，覆盖iOS与安卓微信 8.0.16 以上版本）。

官方实例：

<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 = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'

Page(
  data: 
    avatarUrl: defaultAvatarUrl,
  ,
  onChooseAvatar(e) 
    const  avatarUrl  = e.detail 
    this.setData(
      avatarUrl,
    )
  
)

但遇到个问题获取头像的路径是临时文件路径 后台读取不了。

解决方法：把图片的临时路径发送给自己的服务器

PS：我这个是uni-app开发

<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
	<image class="pics" :src="avatarUrl" mode="aspectFill" ></image>
</button> 

onChooseAvatar(e) 
				var _this = this
			    const  avatarUrl  = e.detail
				uni.uploadFile(
					url: baseUrl + "/api/images", //仅为示例，非真实的接口地址
					filePath: avatarUrl,
					name: 'files',
					fileName: 'files',
					success: (uploadFileRes) => 
						var data = JSON.parse(uploadFileRes.data)
						if (data.code == 200) 
							_this.avatarUrl = data.data.img_path
						 else 
							uni.showModal(
								title: '提示',
								content: data.msg,
								showCancel: false,
								success: function(res) 
									if (res.confirm) 
										console.log('用户点击确定');
									
								
							);
						
					
				);
			

PS：原生开发

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

  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);//发送失败回调，可以在这里了解失败原因
      
    )

具体效果：

当然这样的用户体验是不好的，希望微信小程序团队能够处理好这些情况，不要什么都一刀切。恶心到的最终是用户