使用的uview 微信高版本 头像昵称填写能力

又是取名的一天2024-01-20 1:37
复制代码 
<template>
	<view>
		<button class="cu-btn block bg-blue margin-tb-sm lg" @tap="wxGetUserInfo">一键登录</button>
		<view>
			<!-- 提示窗示例 -->
			<u-popup :show="show" background-color="#fff">
				<view class="infoBox">
					<view class="title">邀请您补全个人信息</view>
					<br>
					<br>
					<br>
					<form catchsubmit="getUserName">
						<view style="width: 100%;">
							<view class="popup-info">
								<view class="popup-info-left">头像</view>
								<view class="popup-info-right">
									<button class="avatar-wrapper" open-type="chooseAvatar"
										@chooseavatar="onChooseAvatar" slot="right">
										<img class="avater" :src="avatarUrl" alt="用户头像"></button>
								</view>
							</view>
							<br>
							<br>
							<view class="popup-info">
								<view class="popup-info-left">昵称</view>
								<view class="popup-info-right">
									<input type="nickname" class="nickName-input" @blur="userNameInput"
										placeholder="请输入昵称" />

								</view>
							</view>
						</view>
						<view class="buttonSum">
							<view class="button">
								<button @click="dialogClose">取消</button>
							</view>
							<view class="button" style="border-left: 1px solid #e2e1e1;color: #0081ff;">
								<button @click="submitSure" style="color: #0081ff;" form-type="submit">确定</button>
							</view>
						</view>
					</form>

				</view>

			</u-popup>
		</view>
		<view class="text-center margin-top-sm" @tap="back">暂不登录</view>
	</view>
	</view>
</template>

<script>
	import avatarUrl from "@/static/logo.png"
	export default {
		data() {
			return {
				avatarUrl: avatarUrl,
				nickName: '',
				token: '',
				imgList: [],
				show: false,
			}
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1,
				})
			},
			wxGetUserInfo(e) {
				// 1、授权必须要在用户点击事件之后进行
				// 2、uni老的方法getUserInfo已经拿不到用户信息了
				// uni.getUserProfile高版本的也停用了，2.21以下的版本还可以用
				// #ifdef MP-WEIXIN
				uni.getUserProfile({
					desc: 'get_name', // 这个参数是必须的
					success: user => {
						console.log('用户信息', user)
						uni.setStorageSync("user_info", user.userInfo)
						//由于低版本需要使用getUserProfile方法，高版本使用头像昵称填写功能，所以先使用getUserProfile，如果得到的nickName是微信用户，则说明获取失败，再使用头像昵称填写功能获取
						if (user.userInfo.nickName == '微信用户') {
							this.show = true
						} else {
							uni.navigateBack({
								delta: 1
							})
						}
					}
				})
				// #endif
				// #ifdef MP-ALIPAY
				// uni.getUserInfo({
				// 	desc: 'get_name', // 这个参数是必须的
				// 	success: user => {
				// 		console.log(user)
				// 		uni.setStorageSync("user_info", user.userInfo)
				// 		// 虚假的openid
				// 		getApp().globalData.openId = user.ariverRpcTraceId;
				// 		uni.navigateBack({
				// 			delta: 1
				// 		})
				// 	}
				// })
				// #endif
			},
			// 点击头像
			async onChooseAvatar(e) {
				// 获取到的图片是临时图片，只能在本地访问，不能在浏览器访问，所以要把这个图片转成base64或者上传七牛服务器换成网络地址，再存储起来
				this.avatarUrl = e.detail.avatarUrl;
				console.log(e.detail.avatarUrl, 'e.detail.avatarUrl'),
					// 临时图片转为base64
					uni.getImageInfo({
						src: this.avatarUrl,
						success: function(res) {
							// 获取到图片的临时地址
							var tempFilePath = res.path;
							// 将图片转为base64格式
							uni.getFileSystemManager().readFile({
								filePath: tempFilePath,
								encoding: 'base64',
								success: function(res) {
									var base64Img = 'data:image/png;base64,' + res.data;
									let userInfo = uni.getStorageSync("user_info")
									userInfo.avatarUrl = base64Img
									uni.setStorageSync("user_info", userInfo)
								}
							});
						}
					});
			},
			// 点击昵称
			userNameInput(e) {
				console.log(e.detail);
				this.nickName = e.detail.value
				let userInfo = uni.getStorageSync("user_info")
				userInfo.nickName = e.detail.value
				uni.setStorageSync("user_info", userInfo)
				console.log('点昵称', this.nickName, e.detail.value, uni.getStorageSync("user_info"));
			},
			getUserName(e) {
				console.log('提交getUserName', e);
			},
			submitSure(e) {
				console.log('确定submitSure', e);
			},
			dialogClose(e) {
				console.log('dialogClose取消', e);
				this.show = false
			}
		},
		onLoad() {
			// this.show = true
		},
	}
</script>

<style lang="scss" scoped>
	.cu-btn {
		margin-top: 20px;
		margin-left: 20px;
		margin-right: 20px;
	}

	.infoBox {
		width: 80vw;
		height: 180px;
		position: relative;


		.title {
			font-size: 18px;
			text-align: center;
			margin-top: 15px;
			margin-bottom: 15px;
			font-weight: 500;
		}

		.popup-info {
			width: 100%;
			height: 40px;
			display: flex;
			justify-content: space-around;
			line-height: 40px;

			.popup-info-left {
				text-align: center;
				width: 50%;
			}

			.popup-info-right {
				width: 50%;
				display: flex;
				align-items: center;
				justify-content: center;

				button::after {
					border: none;
				}


				.nickName-input {
					display: inline-block;
					width: 100%;
					top: -5px;
				}

				.avatar-wrapper {
					border: none !important;
					width: 40px;
					height: 40px;
					padding: 0 !important;
					background: none;

					.avater {
						width: 40px;
						height: 40px;
					}
				}
			}
		}

		.buttonSum {
			width: 100%;
			display: flex;
			justify-content: space-around;
			position: absolute;
			bottom: 0;

			.button {
				width: 50%;
				border-top: 1px solid #e2e1e1;
			}

			button {
				width: 50%;
				background-color: #ffffff;
				font-size: 16px;
				outline: none;
			}

			button::after {
				border: none;
				border-radius: 0;
			}
		}
	}

	.u-popup__wrapper {
		border-radius: 10px;
	}
</style>


</style>

效果

参考的这个

微信小程序头像昵称填写能力-CSDN博客

因为之前用的getUserProfile，有一天发现它获取到的头像是灰色，昵称是微信用户，一看官网说是不用了，低版本的还能用，高版本的要用头像昵称填写来实现。

如下是我的小程序登录页面代码：

逻辑：当小程序判断到没有登陆时把用户弹到登录页面，引导用户登录，用户点击一键登录后弹出弹框引导用户填写昵称和头像，将信息存储起来，方便在其他地方使用。

注意：

1、头像获取到的是临时地址，需要处理，才能在浏览器展示，我采用的是将其转化为base64的方式，具体请看：onChooseAvatar

2、昵称获取需要使用button的form-type="submit"属性，触发form提交来收集昵称

复制代码 
<template>
 
		<button class="cu-btn block bg-blue margin-tb-sm lg" @tap="wxGetUserInfo">一键登录</button>
		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" background-color="#fff">
				<view class="infoBox">
					<view class="title">邀请您补全个人信息</view>
					<br>
					<br>
					<br>
					<form catchsubmit="getUserName">
						<view style="width: 100%;">
							<view class="popup-info">
								<view class="popup-info-left">头像</view>
								<view class="popup-info-right">
									<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" slot="right">
										<img class="avater" :src="avatarUrl" alt="用户头像"></button>
								</view>
							</view>
							<br>
							<br>
							<view class="popup-info">
								<view class="popup-info-left">昵称</view>
 
								<view class="popup-info-right">
									<input type="nickname" class="nickName-input" @blur="userNameInput" placeholder="请输入昵称" />
 
								</view>
							</view>
						</view>
						<view class="buttonSum">
							<view class="button">
								<button @click="dialogClose">取消</button>
							</view>
							<view class="button" style="border-left: 1px solid #e2e1e1;color: #0081ff;">
								<button @click="submitSure" style="color: #0081ff;" form-type="submit">确定</button>
							</view>
						</view>
					</form>
 
				</view>
 
			</uni-popup>
		</view>
		<view class="text-center margin-top-sm" @tap="back">暂不登录</view>
	</view>
</template>
 
<script src="path/to/canvas/library.js"></script>
<script>
	import qiniuUploader from '../../util/qiniuUploader.js'
	import {
		RequestConstant
	} from '../../util/constant.js'
	export default {
		data() {
			return {
				avatarUrl: '../../static/icon-avatar.png',
				nickName: '',
				token: '',
				imgList: []
			}
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1,
				})
			},
			wxGetUserInfo(e) {
				// 1、授权必须要在用户点击事件之后进行
				// 2、uni老的方法getUserInfo已经拿不到用户信息了
				// uni.getUserProfile高版本的也停用了，2.21以下的版本还可以用
				// #ifdef MP-WEIXIN
				uni.getUserProfile({
					desc: 'get_name', // 这个参数是必须的
					success: user => {
						console.log('用户信息', user)
						uni.setStorageSync("user_info", user.userInfo)
						//由于低版本需要使用getUserProfile方法，高版本使用头像昵称填写功能，所以先使用getUserProfile，如果得到的nickName是微信用户，则说明获取失败，再使用头像昵称填写功能获取
						if (user.userInfo.nickName == '微信用户') {
							this.$refs.alertDialog.open()
						} else {
							uni.navigateBack({
								delta: 1
							})
						}
					}
				})
				// #endif
				// #ifdef MP-ALIPAY
				uni.getUserInfo({
					desc: 'get_name', // 这个参数是必须的
					success: user => {
						console.log(user)
						uni.setStorageSync("user_info", user.userInfo)
						// 虚假的openid
						getApp().globalData.openId = user.ariverRpcTraceId;
						uni.navigateBack({
							delta: 1
						})
					}
				})
				// #endif
			},
			// 打开弹框
			dialogToggle() {
				this.$refs.alertDialog.open()
			},
			// 点击头像
			async onChooseAvatar(e) {
				// 获取到的图片是临时图片，只能在本地访问，不能在浏览器访问，所以要把这个图片转成base64或者上传七牛服务器换成网络地址，再存储起来
				this.avatarUrl = e.detail.avatarUrl;
				console.log(e.detail.avatarUrl,'e.detail.avatarUrl'),
				// 临时图片转为base64
				uni.getImageInfo({
					src: this.avatarUrl,
					success: function(res) {
						// 获取到图片的临时地址
						var tempFilePath = res.path;
						// 将图片转为base64格式
						uni.getFileSystemManager().readFile({
							filePath: tempFilePath,
							encoding: 'base64',
							success: function(res) {
								var base64Img = 'data:image/png;base64,' + res.data;
								let userInfo = uni.getStorageSync("user_info")
								userInfo.avatarUrl = base64Img
								uni.setStorageSync("user_info", userInfo)
							}
						});
					}
				});
			},
			// 点击昵称
			userNameInput(e) {
				console.log(e.detail);
				this.nickName = e.detail.value
				let userInfo = uni.getStorageSync("user_info")
				userInfo.nickName = e.detail.value
				uni.setStorageSync("user_info", userInfo)
				console.log('点昵称', this.nickName, e.detail.value, uni.getStorageSync("user_info"));
			},
			getUserName(e) {
				console.log('提交getUserName', e);
			},
			submitSure(e) {
				console.log('确定submitSure', e);
				uni.navigateBack({
					delta: 1
				})
			},
			dialogClose(e) {
				console.log('dialogClose取消', e);
				this.$refs.alertDialog.close()
			}
		},
		onLoad() {},
	}
</script>
 
<style lang="less" scoped>
	.cu-btn {
		margin-top: 20px;
		margin-left: 20px;
		margin-right: 20px;
	}
 
	.infoBox {
		width: 80vw;
		height: 180px;
		position: relative;
 
 
		.title {
			font-size: 18px;
			text-align: center;
			margin-top: 15px;
			margin-bottom: 15px;
			font-weight: 500;
		}
 
		.popup-info {
			width: 100%;
			height: 40px;
			display: flex;
			justify-content: space-around;
			line-height: 40px;
 
			.popup-info-left {
				text-align: center;
				width: 50%;
			}
 
			.popup-info-right {
				width: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
 
				button::after {
					border: none;
				}
 
 
				.nickName-input {
					display: inline-block;
					width: 100%;
					top: -5px;
				}
 
				.avatar-wrapper {
					border: none !important;
					width: 40px;
					height: 40px;
					padding: 0 !important;
					background: none;
 
					.avater {
						width: 40px;
						height: 40px;
					}
				}
			}
		}
 
		.buttonSum {
			width: 100%;
			display: flex;
			justify-content: space-around;
			position: absolute;
			bottom: 0;
 
			.button {
				width: 50%;
				border-top: 1px solid #e2e1e1;
			}
 
			button {
				width: 50%;
				background-color: #ffffff;
				font-size: 16px;
				outline: none;
			}
 
			button::after {
				border: none;
				border-radius: 0;
			}
		}
	}
 
	.uni-popup__wrapper {
		border-radius: 10px;
	}
</style>
 
 
</style>
相关推荐
文心快码BaiduComate2 分钟前
WAVE SUMMIT深度学习开发者大会2025举行 文心大模型X1.1发布
前端·后端·程序员
babytiger2 分钟前
python 通过selenium调用chrome浏览器
前端·chrome
passer9819 分钟前
基于webpack的场景解决
前端·webpack
华科云商xiao徐16 分钟前
Java并发编程常见“坑”与填坑指南
javascript·数据库·爬虫
奶昔不会射手22 分钟前
css3之grid布局
前端·css·css3
举个栗子dhy26 分钟前
解决在父元素上同时使用 onMouseEnter和 onMouseLeave时导致下拉菜单无法正常展开或者提前收起问题
前端·javascript·react.js
Coding_Doggy32 分钟前
苍穹外卖前端Day1 | vue基础、Axios、路由vue-router、状态管理vuex、TypeScript
前端
前端与小赵32 分钟前
vue3和vue2生命周期的区别
前端·javascript·vue.js
热门推荐
01UV安装并设置国内源02A股预测还能更准？开源大模型Kronos带你跑通预测+回测全流程032025 年高教社杯全国大学生数学建模竞赛C 题 NIPT 的时点选择与胎儿的异常判定 完整成品思路模型代码分享，全网首发高质量！！！042025年数学建模国赛C题超详细解题思路05不再让Windows更新！&Edge游戏助手卸载及关闭自动更新06UV 工具安装与国内镜像源配置指南07KGG转MP3工具|非KGM文件|解密音频08突破百度网盘的下载限速，两种方法教会你【超详细】09Linux下V2Ray安装配置指南10教你如何认证 Gemini 教育优惠的二次验证，薅个 1年的 Gemini Pro 会员