The WeChat applet obtains user information and the nickname is "WeChat user"

In the past two days, the WeChat name of the user obtained by the mini program user login has become "WeChat user". The reason for the problem found on the Internet is that the getUserProfile API has been withdrawn. The ability to fill in the WeChat community avatar nickname can obtain the user avatar and nickname directly on the code ,

if If you have a better solution, please leave a message! ! ! ! ! ! ! !

<template>
	<view>
		<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
			<image class="avatar" :src="avatarUrl"></image>
		</button>
		<view class="petName">
			<view class="petName_name">昵称</view>
			<input type="nickname" v-model="nickname" class="weui-input" placeholder="请输入昵称" />
		</view>
		<view class="ensure" @click="ascertain">确定</view>
	</view>
</template>

<script>
	const defaultAvatarUrl =
		'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
	export default {
    
    
		data() {
    
    
			return {
    
    
				avatarUrl: defaultAvatarUrl,
				nickname:''
			}
		},
		methods: {
    
    
			onChooseAvatar(e) {
    
    
				console.log(e);
				const {
    
    
					avatarUrl
				} = e.detail
				this.avatarUrl=avatarUrl
			},
			ascertain(){
    
    
				uni.navigateBack({
    
    
					delta:1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.avatar-wrapper{
    
    
		height: 300rpx;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.avatar{
    
    
		width: 100rpx;
		height: 100rpx;
	}
	.petName{
    
    
		padding: 0 20rpx;
		height: 100rpx;
		display: flex;
		align-items: center;
		.petName_name{
    
    
			width: 150rpx;
		}
	}
	.ensure{
    
    
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 80rpx;
		background: #07C160;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>