使用的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>
相关推荐
Huazzi.2 分钟前
免费好用的静态网页托管平台全面对比介绍
前端·网络·github·web
吃土少女古拉拉9 分钟前
前端和后端
前端·学习笔记
夫琅禾费米线15 分钟前
leetcode2650. 设计可取消函数 generator和Promise
开发语言·javascript·leetcode·ecmascript
寒雒1 小时前
【Python】实战：实现GUI登录界面
开发语言·前端·python
独上归州1 小时前
Vue与React的Suspense组件对比
前端·vue.js·react.js·suspense
战族狼魂1 小时前
html+js实现图片的放大缩小等比缩放翻转，自动播放切换，顺逆时针旋转
javascript·css·html
Komorebi⁼1 小时前
Vue核心特性解析（内含实践项目：设置购物车）
前端·javascript·vue.js·html·html5
明月清风徐徐1 小时前
Vue实训---0-完成Vue开发环境的搭建
前端·javascript·vue.js
SameX1 小时前
HarmonyOS Next 企业数据备份与恢复策略
前端·harmonyos
SameX1 小时前
HarmonyOS Next 企业数据传输安全策略
前端·harmonyos
热门推荐
01ICLR24大模型提示(1/11) | BadChain：大型语言模型的后门思维链提示02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04【音视频 | opus】opus编解码库(opus-1.4)详细介绍以及使用——附带解码示例代码05Coze扣子平台完整体验和实践（附国内和国际版对比）06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇08玄机平台应急响应—webshell查杀09RAG 实践- Ollama+RagFlow 部署本地知识库10Docker 夺命连环 15 问