微信小程序获取用户信息(getUserProfile接口回收后)——通过头像昵称填写获取用户头像和昵称

背景:最近在用uniapp写微信小程序授权登录的时候,发现项目在微信开发者工具中调试是正常的,但是在真机运行时,返回的用户数据中昵称变成了微信用户,头像变成了默认的灰底头像。接着去百度了一下发现出现这个问题的原因是getUserProfile接口被回收了,微信小程序基础库在2.27.1及以上版本的不再支持getUserProfile接口获取用户头像昵称了,改用头像昵称填写的方式去获取用户头像和昵称信息。详情可见官网

小程序用户头像昵称获取规则调整公告

头像昵称填写

 所以就把项目中的微信登录部分改成了2.27.1以下的版本还是用getUserProfile接口,2.27.1及以上的版本用头像昵称填写能力。下面是通过头像昵称填写能力获取用户头像和昵称的简单实现(uniapp)。

wx-login-popup.vue文件

<template>
	<view class="container" v-if="isVisible">
		<!-- 标题 -->
		<view class="title">
			<text>获取昵称头像</text>
			<text>未选择头像则为默认头像</text>
		</view>

		<!-- 选择头像 -->
		<view class="choose-avatar-row">
			<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<image class="avatar" :src="avatarUrl"></image>
			</button>
			<text>点击选择头像</text>
		</view>

		<!-- 选择昵称 -->
		<view class="choose-nickname-row">
			<text>昵称</text>
			<input v-model="nickName" @input="inputName" type="nickname" placeholder="请输入昵称" />
		</view>

		<!-- 按钮 -->
		<view class="login-row">
			<button @click="close">关闭</button>
			<button @click="submit" :class="{'inactive' : disabled}" :disabled="disabled">登录</button>
		</view>
	</view>
</template>

<script>
	export default {
		name: "wx-login-popup",
		data() {
			return {
				avatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0', // 默认头像
				nickName: '',
				// 控制登录按钮是否可用
				disabled: false

			};
		},
		props: {
			isVisible: {
				type: Boolean,
				default: false
			}
		},
		watch: {
			// 只要昵称填写了就可以提交登录
			nickName(newVal) {
				if (newVal) {
					this.disabled = false
				}
			}
		},
		methods: {
			// 选择头像事件
			async onChooseAvatar(e) {
				const {
					avatarUrl
				} = e.detail
				// do something
				// 我这边是把文件上传到云服务器
				this.avatarUrl = await this.uploadFiles(avatarUrl, 'avatar')
			},
			// 上传头像图片到云服务器
			async uploadFiles(filePath, cloudPath) {
				const res = await uniCloud.uploadFile({
					cloudPath: cloudPath,
					filePath: filePath
				})
				// 上传成功后将图片路径返回出去
				return res.fileID
			},
			// 昵称输入事件
			inputName(e) {
				const {
					value
				} = e.detail
				// do something
			},
			// 关闭按钮点击事件
			close() {
				this.$emit('update:isVisible', false)
			},
			// 登录按钮点击事件
			submit() {
				const userInfo = {
					avatarUrl: this.avatarUrl,
					nickName: this.nickName
				}
				this.$emit('submit', userInfo)
			}
		}
	}
</script>

<style lang="scss">
	view {
		box-sizing: border-box;
	}

	.container {
		width: 100%;
		height: 45%;
		position: absolute;
		left: 0;
		bottom: 0;
		padding: 0 20px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		background-color: #fff;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;

		.title {
			width: 100%;
			height: 30%;
			font-size: 20px;
			font-weight: bold;
			padding-top: 20px;

			text:nth-child(2) {
				display: block;
				font-size: 14px;
				font-weight: normal;
				margin-top: 5px;
			}
		}

		.choose-avatar-row,
		.choose-nickname-row {
			width: 100%;
			height: 20%;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 10px 2px;
			font-size: 14px;
			border-top: 1px solid #ccc;
			border-bottom: 1px solid #ccc;

			.avatar-wrapper {
				width: 40px;
				height: 40px;
				margin: 0;
				padding: 0;
				margin-right: 10px;

				.avatar {
					width: 100%;
					height: 100%;
				}
			}
		}

		.choose-nickname-row {
			border-top: none;

			text {
				width: 45px;
				margin-right: 10px;
			}
		}

		.login-row {
			width: 100%;
			height: 30%;
			padding-top: 20px;
			display: flex;

			button {
				font-size: 14px;
				width: 30%;
				height: 40px;
				display: flex;
				align-items: center;
				justify-content: center;
				border-color: transparent;
				color: #07c160;
			}

			.inactive {
				color: #ccc;
			}
		}
	}
</style>

使用:

login.vue页面(记得导入组件,我这里用的是uniapp,有easycom所以没有手动导入)

<!-- 微信登录之填写头像昵称信息 -->
<wx-login-popup :isVisible.sync="isLoginPopupVisible" @submit="submit"></wx-login-popup>

需要传递控制弹框显示与隐藏的值,接收该组件的登录事件

<script>

export default {
		data() {
			return {
				isLoginPopupVisible: false,
			}
		},
		methods: {
			// 接收填写信息组件的登录事件
			submit(userInfo) {
                // 登录逻辑...
			}
		}
	}

</script>

效果如下:

 

 

 

其中还要注意一点,获取昵称在微信开发者工具中运行时是空值,但是在真机中测试是正常能获取到微信昵称的,可能跟我没有做内容安全检测有关,如果友友们有兴趣可以去官网了解一下~

另外:弹出框样式借鉴的是这个博主的帖子

https://blog.csdn.net/qq_45737678/article/details/127898614?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522166921385016782388079221%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=166921385016782388079221&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-1-127898614-null-null.142^v66^control,201^v3^control_1,213^v2^t3_esquery_v2&utm_term=%E5%A4%B4%E5%83%8F%E6%98%B5%E7%A7%B0%E5%A1%AB%E5%86%99%E8%83%BD%E5%8A%9B&spm=1018.2226.3001.4187

  • 4
    点赞
  • 55
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
微信小程序是一种轻量级应用程序,可以在微信中直接运行。它提供了许多开发接口,使开发者可以使用微信的各种功能和服务。其中一个常用的功能是获取用户昵称头像。 在过去,开发者可以使用wx.getUserInfo接口获取用户昵称头像。然而,由于用户隐私保护的要求日益提高,微信团队对用户信息获取进行了限制。作为替代方案,微信团队推出了wx.getUserProfile接口。 wx.getUserProfile接口可以在用户同意授权的情况下获取用户昵称头像。开发者需要在button组件中设置open-type为getUserProfile,然后在button的bindgetuserinfo事件中获取用户信息获取用户信息后,可以通过e.detail.userInfo.nickName和e.detail.userInfo.avatarUrl分别获取用户昵称头像地址。 需要注意的是,wx.getUserProfile接口需要用户授权才能获取用户信息。在用户点击button后,会弹出授权界面,用户可以选择是否授权提供信息。如果用户授权,则可以获取用户昵称头像。如果用户拒绝授权,则无法获取用户信息。 总结来说,微信小程序最新获取用户昵称头像的方式是使用wx.getUserProfile接口。开发者需要在button组件中设置open-type为getUserProfile,并在相应的事件中获取用户信息。授权后,可以通过e.detail.userInfo.nickName和e.detail.userInfo.avatarUrl获取用户昵称头像地址。同时,需要注意用户授权的情况,用户可以选择是否授权提供信息。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值