关于微信小程序新版头像昵称api接口处理(代码片段)

run明 run明     2023-04-06     211

关键词:

根据微信官方文档的说法,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);//发送失败回调,可以在这里了解失败原因
      
    )

具体效果:

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

 

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

...取:微信头像+微信昵称。一直抱以限制态度,关于接口调用方法,也是一直在修改!open-type=“getUserInfo”在2021年4月13日停用wx.getUserInfo在2021年4月28日停用wx.getUserProfile在2022年11月8日停用但是如果你在接口停... 查看详情

微信小程序登录获取不到头像和昵称解决办法!(代码片段)

微信小程序登录获取不到头像和昵称主要原因是:小程序wx.getUserProfile接口被收回!大家可以按照文档操作↓PS:针对小程序wx.getUserProfile接口将被收回后做出的授权调整小程序文档中提出的调整说明对于此次变化࿰... 查看详情

微信小程序获取用户昵称头像和昵称(附源码)(代码片段)

...rXzWnpAsk5UsfKesGw提取码:8bwm小程序登录小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识,快速建立小程序内的用户体系。说明调用wx.login()获取临时登录凭证code,并回传到开发者服务器。调... 查看详情

微信小程序头像昵称填写能力(代码片段)

1、基本介绍微信小程序获取头像昵称的能力,最近又进行了一次调整,如果没有记错这是今年第三次调整了,每次调整每个开发者心中我相信都跟我一样,万马奔腾。。。今天写个demo体验下实际效果如何。详细... 查看详情

微信小程序最新用户头像昵称获取规则调整应对措施(2022)(代码片段)

...新增一个页面用于用户自定义头像和昵称。二、应对措施微信新增了头像填充能力:头像昵称填写2.1更新头像就是设置button的open-type为chooseAvatar,当用户点击时,就会触发“修改头像”事件。button按钮<buttonclass=&... 查看详情

小程序新版uniapp登录流程以及获取头像和昵称(代码片段)

...登录无法拿到头像和昵称!这篇文章讲解如何获取到微信用户昵称和头像成品效果步骤一,点击登录,获取token步骤二,登录按钮隐藏,展示上传按钮步骤三,点击上传按钮步骤四上传按钮隐藏,展示... 查看详情

微信小程序授权获取用户信息之wx.getuserinfo切换到wx.getuserprofile的使用(已弃用)(代码片段)

...已弃用wx.getUserProfile()官方也已弃用,详情可参考我的微信小程序授权获取头像昵称的最新形式——头像昵称填写这篇文章。感兴趣的小伙伴儿也可往下看。背景最近在做一个小程序的项目,需要微信授权获取用户信息... 查看详情

uniapp微信小程序授权登录getuserinfo获取不到用户的昵称和头像

...A但如今,却只能得到一个缺省的灰色头像,和nickname=“微信用户”,两个数据,其它的年龄以及地区等什么都没有,更别提授权弹出框了查看官网如下图才知道API更新了:https://developers.weixin.qq.com/miniprogram/dev/api/open-api/user-info/wx... 查看详情

2022年微信小程序授权登录的最新实现方案(代码片段)

微信授权登录我们的项目开发有时候用到用户的一些信息,比如头像,昵称等。目前小程序为我们提供好了wx.getUserProfile方法以供获取用户信息,它的使用非常简单。wx.getUserProfile方法获取用户信息不推荐使用wx.getUserI... 查看详情

记录一次微信小程序getuserprofile的踩坑经历(代码片段)

一、新注册的微信用户怎么昵称都变成了微信用户了?最近我们公司的运营小姐姐反馈说小程序新注册的用户的昵称都是微信用户,而且头像也都是一张灰色的头像。以前能拿到的省市区也都没了。并且质问我们是不是... 查看详情

小程序头像和昵称填写能力用底部弹框界面实现(代码片段)

最近,微信小程序又更新了文档,关于获取头像和昵称需要进行适配。https://developers.weixin.qq.com/community/develop/doc/00022c683e8a80b29bed2142b56c01 其中,基础库在xxx以上的都不能弹框授权获取了,官方给的是在页面中获取&... 查看详情

微信小程序获取手机号(代码片段)

由于微信获取手机号安全模式的升级,直接在在微信小程序里面调用微信后台,是获取不到用户手号,获取用户手机号需要后台服务器和微后台交互才能获得。第一步:从基础库2.21.2开始(微信版本8.0.16)... 查看详情

微信小程序支付开发之申请退款(代码片段)

...似,这里不另做记录,如果没有开发过支付,可以查看我关于微信支付的文章重点记录微信小程序申请退款开发过程中遇到一些坑。退款接口比支付接口接口多了一个 双向证书证书介绍:https://pay.weixin.qq.com/wiki/doc/api/jsapi.php... 查看详情

微信小程序开放能力(代码片段)

open-data代码:<open-datatype="groupName"></open-data><view>昵称:<open-datatype="userNickName"></open-data></view><view>头像&#x 查看详情

微信小程序开放能力(代码片段)

open-data代码:<open-datatype="groupName"></open-data><view>昵称:<open-datatype="userNickName"></open-data></view><view>头像&#x 查看详情

微信小程序的登录和授权注意事项

...把遇到的问题整理了一下,希望能对大家有所帮助~ 关于游客模式,官方的说法是为了给用户提供更好的使用体验,不强制用户必须登录后才能进入小程序。如要求必须授权头像昵称等信息才能继续使用小程序,会导致某些... 查看详情

微信小程序上传头像(代码片段)

效果代码editInfo.js//pages/editInfo/editInfo.jsPage(/***页面的初始数据*/data:dataList:[],/***获得图片本地路径*/chooseWxImage:function()constthat=this;wx.chooseImage(//最多可以选择的图片张数count:1,//所选的图片的尺寸sizeType:[' 查看详情

微信小程序登录对接django后端实现jwt方式验证登录(代码片段)

...料和头像,点击修改资料可以修改部分资料。流程1.使用微信小程序登录和获取用户信息Api接口2.把Api获取的用户资料和code发送给django后端3.通过微信接口把code换取成openid4.后端将openid作为用户名和密码5.后端通过JSONwebtoken方式登... 查看详情