uni.getUserProfile获取的微信昵称是微信用户,头像获取的是默认头像

本文档介绍了一个微信小程序中遇到的问题,即通过uni.getUserProfile获取到的用户头像是默认头像,而非微信实际头像。根据微信官方的小程序用户头像昵称获取规则调整公告,开发者需要引导用户自行上传头像和昵称。提供的代码示例展示了如何弹窗提示用户完善信息,包括选择头像和输入昵称,并实现上传头像到服务器的功能。在用户完成信息填写后,保存到后台接口。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

问题:uni.getUserProfile获取的微信昵称是微信用户,头像获取的是默认头像

 原因:小程序用户头像昵称获取规则调整公告 | 微信开放社区

解决效果:

代码:

<wsw-dialog ref="dialogInfo" :maskTapClose="false" :dialogStyle="dialogStyle">
			<view class="info_view">
				<view class="info_title">邀请您补全个人信息</view>
				<view class="info_tips">如果已设置,请忽略</view>
				<view class="info_item">
					<view class="info_text">头像</view>
					<button class="info_btn" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" slot="right">
						<image class="info_img" :src="info.headUrl"></image>
					</button>
				</view>
				<view class="info_item">
					<view class="info_text">昵称</view>
					<input type="nickname" class="weui-input" @blur="userNameInput" placeholder="请输入昵称" />
				</view>
			</view>

			<view
				style="text-align: center; display: flex; height: 50rpx;height: 75rpx;line-height: 75rpx; border-top:2rpx #AFB8C8 solid;background: #E2E4E9;border-radius: 0 0 20rpx 20rpx;">
				<view style="width: 50%;font-size: 30rpx;color: #909090;border-right:2rpx solid #AFB8C8;" @click="cancelInfo()">取消</view>
				<view style="width: 50%;color: #909090;font-size: 30rpx;">
					<view style="height: 75rpx;line-height: 75rpx;color: #CF920B;font-size: 30rpx;background: #E2E4E9;line-height: 75rpx;" @click="closeInfo()">
						确认
					</view>
				</view>
			</view>
		</wsw-dialog>
data() {
    return {
		dialogStyle: 'border-radius: 16rpx;width: 70%;',
		info: {
			iv: '',
			encryptedData: '',
			headUrl: '',
			gender: null,
			userName: '',
			sessionKey: ''
		},
	};
},

        methods: {
			login() {
				let that = this;
				if (!this.info.headUrl) {
					that.$refs.dialogInfo.show();
				}

			},
			//获取昵称输入内容
			userNameInput(e) {
				this.info.userName = e.detail.value
			},
			onChooseAvatar(e) {
				console.log('头像')
				console.log(e)
				this.uploadImg(e.detail.avatarUrl); //tmp的图片临时路径
			},
			// 点击取消
			cancelInfo() {
				this.$refs.dialogInfo.hide();
			},
			// 点击确定
			closeInfo() {
				if (!this.info.headUrl) {
					uni.showToast({
						icon: 'none',
						title: '请上传头像'
					});
					return;
				}
				this.$refs.dialogInfo.hide();
				// 保存头像,昵称接口
				this.$api.doSave(this.info).then(res => {
					if (res.data.success) {
						console.log('保存成功')
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.message,
							duration: 2500
						});
					}
				});
			},
			uploadImg(avatarUrl) {
				wx.uploadFile({
					url: this.$Config.url_config + '/image/upload.ajax', // 后端api接口
					filePath: avatarUrl, // 函数调用后获取的本地文件路劲
					name: 'file',
					success: res => {
						if (res.statusCode == 200) {
							let datas = JSON.parse(res.data);
							if (datas.success) {
								let url = datas.result
								console.log("上传后图片")
								console.log(this.info)
							} else {
								uni.showToast({
									title: datas.massage,
									icon: 'none',
									duration: 2500
								});
							}
						}
					},
					fail: err => {}
				});
			}
		}
.info_view {
		background: #E2E4E9;
		border-radius: 20rpx 20rpx 0 0;
		padding: 40rpx;
	}

	.info_title {
		text-align: center;
	}

	.info_tips {
		color: gray;
		font-size: 24rpx;
		text-align: center;
	}

	.info_item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 20rpx;
		margin-bottom: 30rpx;
	}

	.info_btn {
		border-radius: 100%;
		margin: 0 auto;
		padding: 0;
		width: 50rpx;
		height: 50rpx;
	}
	.weui-input{
		text-align: center;
	}

参照:

 微信小程序获取用户头像昵称手机号最新版

### 解决 `uni.getUserProfile` 调用失败的方法 当遇到 `uni.getUserProfile` 直接进入 fail 函数的情况时,主要原因是该 API 需要由用户的 TAP 手势触发才能正常工作[^1]。因此,在设计交互逻辑时应确保此方法仅在用户主动操作(如按钮点击)下执行。 对于希望先登录再获取用户资料的需求场景,可以考虑如下方案: #### 方案一:分步引导用户完成授权流程 通过两个独立步骤实现完整的身份验证过程——首先利用其他方式获得临时访问权限(例如微信登录),之后请求用户同意公开其个人信息。 ```javascript // 登录并取得 code uni.login({ provider: 'weixin', success(res) { console.log('Login Success:', res); // 显示提示框让用户点击确认分享个人资料 uni.showModal({ title: "授权", content: "是否允许本应用读取您的基本信息?", success(modalRes){ if (modalRes.confirm){ // 用户点击了确定,则调用 getUserProfile 方法 uni.getUserProfile({ desc: '用于完善会员资料', // 声明获取数据后的用途 success(profileRes){ console.log('Get Profile Success:', profileRes.userInfo); }, fail(err){ console.error('Failed to get user profile.', err); } }); }else{ console.warn('User refused to provide personal information.'); } } }) }, fail(err){ console.error('Failed to login.', err); } }); ``` #### 方案二:采用旧版接口作为替代选项 如果确实无法满足上述条件,考虑到官方即将回收 `wx.getUserProfile` 接口的影响[^3],可以选择回退至更早版本的 `wx.getUserInfo` 来收集必要的用户信息。需要注意的是这种方式可能不具备相同的安全性和隐私保护水平,并且不适用于所有类型的项目。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值