使用的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>
相关推荐
J不A秃V头A29 分钟前
Vue3:编写一个插件(进阶)
前端·vue.js
司篂篂1 小时前
axios二次封装
前端·javascript·vue.js
姚*鸿的博客1 小时前
pinia在vue3中的使用
前端·javascript·vue.js
宇文仲竹2 小时前
edge 插件 iframe 读取
前端·edge
Kika写代码2 小时前
【基于轻量型架构的WEB开发】【章节作业】
前端·oracle·架构
哆木2 小时前
部署在线GBA游戏，并通过docker安装启动
游戏·html·gba
天下无贼！3 小时前
2024年最新版Vue3学习笔记
前端·vue.js·笔记·学习·vue
Jiaberrr3 小时前
JS实现树形结构数据中特定节点及其子节点显示属性设置的技巧(可用于树形节点过滤筛选)
前端·javascript·tree·树形·过滤筛选
赵啸林3 小时前
npm发布插件超级简单版
前端·npm·node.js
我码玄黄4 小时前
THREE.js：网页上的3D世界构建者
开发语言·javascript·3d
热门推荐
01RAG 实践- Ollama+RagFlow 部署本地知识库02组基轨迹建模 GBTM的介绍与实现（Stata 或 R）032024年高教社杯数学建模国赛C题超详细解题思路分析04苍穹外卖面试总结05yolov8实战第五天——yolov8+ffmpg实时视频流检测并进行实时推流——（推流，保姆教学）06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07CCF-CSP认证考试 202406-3 文本分词 100分题解08Coze扣子平台完整体验和实践（附国内和国际版对比）09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10软件工程从理论到实践客观题汇总(头歌第一章至第八章)