使用的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>
相关推荐
naice29 分钟前
我对github的图片很不爽了，于是用AI写了一个图片预览插件
前端·javascript·git
天蓝色的鱼鱼34 分钟前
Element UI 2.X 主题定制完整指南：解决官方工具失效的实战方案
前端·vue.js
RoyLin39 分钟前
TypeScript设计模式：门面模式
前端·后端·typescript
小奋斗42 分钟前
千量数据级别的数据统计分析渲染
前端·javascript
小文刀6961 小时前
CSS-响应式布局
前端
三小河1 小时前
overflow:auto 滚动的问题，以及flex 布局中如何设置
前端·javascript
薛定谔的算法1 小时前
phoneGPT：构建专业领域的检索增强型智能问答系统
前端·数据库·后端
Hilaku1 小时前
Token已过期，我是如何实现无感刷新Token的？
前端·javascript·面试
小文刀6961 小时前
2025-35st-w-日常开发总结
前端
我是日安1 小时前
从零到一打造 Vue3 响应式系统 Day 8 - Effect：深入剖析嵌套 effect
前端·vue.js
热门推荐
01UV 工具安装与国内镜像源配置指南02GitHub 镜像站点03Claude Code 平替：OpenAI发布 Codex CLI ，GPT-5 国内直接使用0446个Nano-banana 精选提示词，持续更新中05UV安装并设置国内源06保姆级教程：手把手教你用Dify实现完美多轮对话（附Chatflow和提示词）07解决 WSL Ubuntu 中 /etc/resolv.conf 自动重置问题08A股预测还能更准？开源大模型Kronos带你跑通预测+回测全流程09Spec-Kit 使用指南10KGG转MP3工具|非KGM文件|解密音频