微信小程序如何获取用户头像昵称

    微信小程序登录用户头像昵称已经不支持支持获取,因为用户的scope.userInfo权限已经回收,可以使用昵称头像填写进行完善用户信息，按照官方推荐会显示用户在微信的头像和昵称，本文介绍一下实现方案.最终实现效果:修改头像会默认显示微信头像,修改昵称时会默认显示用户的昵称.


    实现代码:

<template>
	<view class="content">
		<image class="user_img" :src="userImg"></image>
		<view class="text-area">
			<button type="default" open-type="chooseAvatar" @chooseavatar="getUserImg">更改用户微信头像</button>
		</view>
		<view class="nick_class">
			<text class="title">昵称:</text>
			<input type="nickname" class="weui-input" placeholder="请输入昵称"/>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userImg:"../../static/logo.png"
			}
		},
		onLoad() {

		},
		methods: {
			wxLogin(){
				wx.login({
				  success (res) {
				    if (res.code) {
				      //发起网络请求
				     console.log("登录成功返回信息"+JSON.stringify(res))
				    } else {
				      console.log('登录失败！' + res.errMsg)
				    }
				  }
				})
			},
			decryptPhoneNumber(res){
				console.log(res)
			},
			getUserInfo(){
				wx.getUserInfo({
				  success: function(res) {
				  console.log("授权返回的用户信息:"+JSON.stringify(res))
				  }
				})
			},
			getUserImg(res){
				console.log("获取用户头像:"+JSON.stringify(res.detail.avatarUrl)),
				uni.uploadFile({
					url: 'http://127.0.0.1:8080/aliyun/uploadImg', //仅为示例，非真实的接口地址
					filePath: res.detail.avatarUrl,
					name: 'multipartFile',
					formData: {
						'user': 'test'
					},
					success: (uploadFileRes) => {
						console.log("上传返回信息:"+JSON.stringify(uploadFileRes.data))
						let responseInfo=JSON.parse(uploadFileRes.data)
						if(responseInfo.code == 200){
							this.userImg=responseInfo.data,
							console.log("图片上传地址:"+this.userImg)
						}else{
							uni.showToast({
								title:"图片上传失败,请重试!",
								duration:3000
							})
						}
						
					}
				});
				// 上传图片
				// uni.chooseImage({
				// 	success: (chooseImageRes) => {
				// 		const tempFilePaths = chooseImageRes.tempFilePaths;
				// 		console.log("微信选择头像信息:"+tempFilePaths)
						
				// 	}
				// });
			},
			// 获取用户微信运动步数
			getRunData(){
				wx.getWeRunData({
				  success (res) {
					  console.log("获取运动信息:"+JSON.stringify(res))
				    // 拿 encryptedData 到开发者后台解密开放数据
				    const encryptedData = res.encryptedData
				    // 或拿 cloudID 通过云调用直接获取开放数据
				    // const cloudID = res.cloudID
				  }
				})
				
			}
			
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
	}

	.user_img {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	.nick_class{
		display: flex;
		flex-direction: row;
	}
</style>

    补充:上面更换头像时需要点击按钮,但是有的场景中需要直接点击图片进行更换图片,但是open-type="chooseAvatar"只能放到button按钮上,这里将一下实现方案,简单的办法就是用button包裹住image,需要处理的问题是如何将按钮背景置为透明,可以使用plain属性,另外需要去除边框,设置border-color:white即可.相关内容如下:

<button  open-type="chooseAvatar" plain="true" style="border-color:white;">
		<image :src="fromdata.userImg"  click="chooseImg()"></image>
</button>

    帮朋友推荐一个好玩的小程序,有兴趣可以看一下:

    参考内容:
用户信息接口调整说明,官方头像昵称填写规范