uni-app 小程序用户信息之头像昵称填写

小程序获取用户头像昵称，微信又叒做妖，废除之前的接口，改成了头像昵称填写

通知：微信小程序端基础库2.27.1及以上版本，wx.getUserProfile 接口被收回，详见《小程序用户头像昵称获取规则调整公告》

1.回收uni.getUserInfo接口可获取用户授权（返回的全部是匿名数据）

4月28日24时后发布的新版本小程序，开发者调用wx.getUserInfo或将不再弹出弹窗，直接返回匿名的用户个人信息，获取加密后的openID、unionID数据的能力不做调整。

2.回收getUserProfile 来授权返回微信用户信息 （返回的全部是匿名数据）

3.使用：头像昵称填写能力

截取评论展示功能介绍：描述非常生动形象

4.Demo展示

css样式有采用：ColorUI-UniApp 请自行导入

案例地址：gitee.com/jielov/uni-…

<!--
* @author: Jay
* @description: 微信小程序  头像昵称填写
* @createTime: 2022-11-23 10:51:34
 -->
<template>
	<view>
		<!-- 获取头像 -->
		<view class="bg-gray padding-top-sm">
			<button class="avatar-button" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				<image :class="avatarUrl ==''?'avatar-img':'' " :src="avatarUrl"></image>
			</button>
		</view>
		<!-- 输入用户名 -->
		<view class="nickname-code">
			<view class="nickname-title">
				用户名:
			</view>
			<input type="nickname" class="weui-input" placeholder="请输入用户名" v-model="nickname" />
		</view>
		<!-- 手机号登录 -->
		<view class="padding-lr padding-top flex flex-direction">
			<button class="cu-btn bg-green round lg text-white" open-type="getPhoneNumber"
				@getphonenumber="getUserPhone" :disabled="explainName == '' ? false : true">微信手机号登录</button>
		</view>
		<view class="text-red text-df padding-lr-xl padding-tb-xs text-center">
			{{explainName}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 头像
				avatarUrl: "",
				// 用户名
				nickname: "",
				// 登录 code
				logCode: "",
				// 微信手机号登录
				disabled: true,
			}
		},
		computed: {
			explainName() {
				let name = ""
				if (this.avatarUrl == '') {
					name = "请授权用户头像"
					return name;
				}
				if (this.nickname == '') {
					name = "请输入用户名"
					return name;
				}
				return name;
			}
		},
		onLoad() {
			this.userCode()
		},
		methods: {
			// 获取code
			userCode() {
				let that = this
				uni.login({
					provider: 'weixin',
					success(res) {
						console.log("登录code", res);
						that.logCode = res.code
					}
				})
			},
			//获取用户头像
			onChooseAvatar(e) {
				// console.log(e.detail);
				this.avatarUrl = e.detail.avatarUrl
			},
			//获取用户手机号
			getUserPhone(e) {
				if (e.detail.errMsg == 'getPhoneNumber:ok') {
					//出来手机号数据
					console.log("手机号数据", e)
					/*
						在这一步把 手机号 头像 昵称 code 一次性全部丢给后端
					*/
				} else {
					this.$operate.toast({
						title: '授权失败无法登录！'
					})
				}
			},
		}
	}
</script>
<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	// 用户头像
	.avatar-button {
		width: 120rpx;
		padding: 0;
		border-radius: 50%;
		margin: 30rpx auto 0 auto;

		image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			display: block;
			border: 4rpx solid #d8bf9f;
		}
	}

	.avatar-img {
		z-index: 3;
		position: relative;

		&:before {
			content: '头像授权';
			position: absolute;
			top: 0;
			left: 0;
			width: 120rpx;
			height: 120rpx;
			// line-height: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #ffffff;
			font-size: 25rpx;
			background-color: rgba(130, 128, 127, 0.5);
			z-index: 4;
		}
	}

	//用户昵称
	.nickname-code {
		display: flex;
		align-items: center;
		padding: 60rpx 20rpx 20rpx 20rpx;
		margin-top: -40rpx;
		background-color: #ffffff;
		border-radius: 50rpx 50rpx 0 0;

		.nickname-title {
			font-size: 30rpx;
			color: #333;
			margin-right: 15rpx;
		}

		.weui-input {
			flex: 1;
			color: #333;
			font-size: 30rpx;
		}
	}
</style>