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

linlinlove2 linlinlove2     2023-03-31     638

关键词:

微信小程序登录获取不到头像和昵称主要原因是:小程序wx.getUserProfile接口被收回!

大家可以按照文档操作↓

PS:

针对小程序wx.getUserProfile接口将被收回后做出的授权调整

小程序文档中提出的调整说明


对于此次变化,现将小程序授权方式做以调整

添加判断当前基础库是否支持头像昵称填写能力
在根目录App.vue中加入判断基础库是否大于2.21.2版本(大于此版本支持头像/昵称填写能力)

// #ifdef MP
	const version = uni.getSystemInfoSync().SDKVersion
	if (Routine.compareVersion(version, '2.21.2') >= 0) 
		that.$Cache.set('MP_VERSION_ISNEW', true)
	 else 
		that.$Cache.set('MP_VERSION_ISNEW', false)
	
// #endif

Copy
2.修改/pages/users/wechat_login.vue文件

(1) 在data中加入基础库判断,决定授权逻辑

mp_is_new: this.$Cache.get('MP_VERSION_ISNEW') || false

Copy
(2)dom中新增逻辑判断

(3) methods中加入方法userLogin

// 小程序 22.11.8日删除getUserProfile 接口获取用户昵称头像
	userLogin() 
		Routine.getCode()
			.then(code => 
				uni.showLoading(
					title: '正在登录中'
				);
			    authLogin(
					code,
					spread_spid: app.globalData.spid,
					spread_code: app.globalData.code
				).then(res => 
					if (res.data.key !== undefined && res.data.key) 
						uni.hideLoading();
						this.authKey = res.data.key;
						this.isPhoneBox = true;
					 else 
						uni.hideLoading();
						let time = res.data.expires_time - this.$Cache.time();
						this.$store.commit('LOGIN', 
							token: res.data.token,
							time: time
						);
						this.getUserInfo()
					
	
				)
			)
			.catch(err => 
				console.log(err)
			);
	,

3.新增用户头像/昵称获取能力

(1)调整pages/users/user_info.vue文件
data中添加

mp_is_new: this.$Cache.get('MP_VERSION_ISNEW') || false

(2)调整dom中

(3)methods中加入方法

onChooseAvatar(e) 
	const  avatarUrl  = e.detail
	this.$util.uploadImgs('upload/image', avatarUrl, (res) => 
		this.userInfo.avatar = res.data.url
	, (err) => 
		console.log(err)
	)
,

这里有一个公共方法uploadImgs需要在/utils/util.js中添加

uploadImgs(uploadUrl, filePath, successCallback, errorCallback) 
	let that = this;
	uni.uploadFile(
		url: HTTP_REQUEST_URL + '/api/' + uploadUrl,
		filePath: filePath,
		fileType: 'image',
		name: 'pics',
		formData: 
			'filename': 'pics'
		,
		header: 
			// #ifdef MP
			"Content-Type": "multipart/form-data",
			// #endif
			[TOKENNAME]: 'Bearer ' + store.state.app.token
		,
		success: (res) => 
			uni.hideLoading();
			if (res.statusCode == 403) 
				that.Tips(
					title: res.data
				);
			 else if (res.statusCode == 413) 
				that.Tips(
					title: '上传图片失败,请重新上传小尺寸图片'
				);
			 else 
				let data = res.data ? JSON.parse(res.data) : ;
				if (data.status == 200) 
					successCallback && successCallback(data)
					 else 
					errorCallback && errorCallback(data);
					that.Tips(
						title: data.msg
					);
				
			
		,
		fail: (err) => 
			uni.hideLoading();
				that.Tips(
				title: '上传图片失败'
			);
		
	)
,

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

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

小程序获取不到用户头像和昵称返回微信用户问题解决,即小程序授权获取用户头像规则调整的最新解决方案

最近好多同学在学习石头哥小程序课程的时候,遇到了下面这样的问题,在小程序授权获取用户头像和昵称时,获取到的是下面这样的。到底是什么原因导致的呢,去小程序官方文档一看,又是官方改规则了。点进去一看,原来... 查看详情

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

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

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

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

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

不知道为什么微信一直对开发者获取:微信头像+微信昵称。一直抱以限制态度,关于接口调用方法,也是一直在修改!open-type=“getUserInfo”在2021年4月13日停用wx.getUserInfo在2021年4月28日停用wx.getUserProfile在2022... 查看详情

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

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

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

参考技术A 最近负责了一个微信小程序项目,在微信小程序的登录和授权上遇到了一些问题。项目结束后把遇到的问题整理了一下,希望能对大家有所帮助~ 关于游客模式,官方的说法是为了给用户提供更好的使用体验... 查看详情

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

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

最新uniapp微信小程序获取头像open-type=“chooseavatar“@chooseavatar方法(代码片段)

...户头像将统一返回默认灰色头像,昵称将统一返回“微信用户”。生效期前发布的小程序版本不受影响,但如果要进行版本更新则需要进行适配。自生效期起,插件通过wx.getUserInfo接口获取用户昵称头像将被收回:... 查看详情

微信小程序封装自定义弹窗

最近在做小程序的登录,需要同时获取用户手机号和头像昵称等信息,但是小程序又不支持单个接口同时获取两种数据,因此想到自定义一个弹窗,通过弹窗按钮触发获取手机号事件。记录一下。具体代码如下:业务代码中: ... 查看详情

微信小程序怎么记录登录用户操作信息?

...称,头像,一块调用自己服务端接口,保存到数据..参考技术A微信小程序一般来讲会里面会有一些小程序允许用户登录,登录的时候呢就会获取用户的相关信息,这样就会直接和微信的相关的平台相对接,就直接获取了用户的啊,登... 查看详情

小程序没有后端可以微信授权登录么

...是此方法如果不经处理的话用户如果拒绝授权或者删除该微信小程序后需要重新调取并获取用户公开信息(头像,昵称等),此方法用户体验较差,不建议使用;2.永久授权在不必要使用用户公开信息(头像,昵称等)时,不调... 查看详情

小程序微信小程序获取头像呢称2013年最新解决方案(已解决)

一、效果 二、wxml代码<!--点击头像获取头像--><viewstyle="margin-bottom:20px;text-align:center;">----点击头像获取logo----</view><viewclass="logo"><buttonstyle="width:100px;height:100px;"class= 查看详情

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

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

为啥别人访问我微信小程序获取不到openid

...小程序appid和密钥。现在的问题是自己访问是可以获取到微信接口回来的openid,session_key等信息,但是别人使用小程序,后台就提示没有找到openid,打断点看了微信接口没有返回对应的用户数据,更加不说数据解密。才开始接触... 查看详情

uniapp如何更新微信小程序登录接口

参考技术A第一步:替换原有的标签为普通标签,例如:获取头像昵称_诙?:在getUserInfo代码中调用wx.getUserProfile接口:getUserProfile(e)//推荐使用wx.getUserProfile获取用户信息,开发者每次通过该接口获取用户信息_⒁馐孪?_峄懊茉?session_key是对... 查看详情

微信小程序开发用户头像昵称获取规则调整2022

....com/community/develop/doc/00022c683e8a80b29bed2142b56c01若只是想实现微信身份登录,可以通过 wx.login 接口直接获取用户的 openId 与unionId信息 查看详情

微信小程序开发用户头像昵称获取规则调整2022

....com/community/develop/doc/00022c683e8a80b29bed2142b56c01若只是想实现微信身份登录,可以通过 wx.login 接口直接获取用户的 openId 与unionId信息 查看详情