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

news2024/12/26 16:30:36 
<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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1395298.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

pygame里实现导弹追踪效果,同时对python的指针机制有一点点思考

pygame里实现导弹追踪效果,同时对python的指针机制有一点点思考

最近,儿子一直缠着让我把之前给他编写的游戏重做一下,要加一些功能.但是因为之前写代码的时候刚学会python,当时的想法就是能跑就行,现在回头看来,代码的可维护性几乎为零.所以没办法只能冲头再来,重构了几乎所有代码.在编写的时候遇到了一个有意思的问题,儿子让我给游戏添加一…
阅读更多...
Pyside6入门教学——编写一个UI界面并显示

Pyside6入门教学——编写一个UI界面并显示

1、安装Pyside6 输入下列命令安装Pyside6。 pip install Pyside6 2、设计UI 打开Qt设计工具&#xff08;在安装Pyside6包的目录下&#xff09;。 【注】我这用的是anaconda虚拟环境&#xff0c;所以我的路径是D:\App\Anaconda3\envs\snake\Lib\site-packages\PySide6。设计…
阅读更多...
【Python学习】Python学习19- 异常处理

【Python学习】Python学习19- 异常处理

目录 【Python学习】Python学习19- 异常处理 前言python标准异常异常处理带异常类型语法不带异常类型语法使用except而带多种异常类型try-finally 语句触发异常 参考 文章所属专区 Python学习 前言 本章节主要说明Python的异常处理。 python标准异常 BaseException 所有异常…
阅读更多...
GNU Radio简介及流程图搭建

GNU Radio简介及流程图搭建

文章目录 前言一、GNU Radio 是什么&#xff1f;二、GNU Radio 安装三、搭建第一个流程图1、创建 GRC 文件2、添加块3、运行流程图 前言 欢迎来到无线通信的世界&#xff0c;初步接触 GNU Radio&#xff0c;对其学习进行一个记录。 一、GNU Radio 是什么&#xff1f; GNU Rad…
阅读更多...
【C语言编程之旅 4】刷题篇-关键字

【C语言编程之旅 4】刷题篇-关键字

第一题 解析 C语言关键字&#xff1a;C语言定义的&#xff0c;具有特定含义、专门用于特殊用途的C语言标识符&#xff0c;也称为保留字 A&#xff1a;错误&#xff0c;关键字是语言自身定义的 B&#xff1a;正确 C&#xff1a;错误&#xff0c;关键字具有特殊含义&#xff…
阅读更多...
docker部署项目，/var/lib/docker/overlay2目录满了如何清理？

docker部署项目，/var/lib/docker/overlay2目录满了如何清理？

docker部署项目&#xff0c;/var/lib/docker/overlay2目录满了如何清理&#xff1f; 一、问题二、解决1、查看 /var/lib/docker 目录&#xff08;1&#xff09;、containers 目录&#xff08;2&#xff09;、volumes 目录&#xff08;3&#xff09;、overlay2 目录 2、清理&…
阅读更多...
Java开发分析 JProfiler 14 中文

Java开发分析 JProfiler 14 中文

JProfiler 14是一款强大的Java分析工具&#xff0c;专为帮助Java开发者优化应用性能而设计。它提供了实时监控、内存分析、线程分析、CPU分析等多种功能&#xff0c;帮助开发者快速定位和解决性能问题。JProfiler 14具有直观的用户界面&#xff0c;使用户能够轻松上手。此外&am…
阅读更多...
苹果Find My可查找添加32件物品，伦茨科技ST17H6x芯片加速产品赋能

苹果Find My可查找添加32件物品，伦茨科技ST17H6x芯片加速产品赋能

苹果最近更新的支持文档证实&#xff0c;从 iOS 16 开始&#xff0c;"Find My"可查找添加物品从16件增加到32件&#xff0c;AirTag 和“查找”网络中的物品利用“查找”网络的强大功能来发挥作用&#xff0c;这个网络由数亿台加密的匿名 Apple 设备构成。“查找”网络…
阅读更多...
Kafka-多线程消费及分区设置

Kafka-多线程消费及分区设置

目录 一、Kafka是什么&#xff1f;消息系统&#xff1a;Publish/subscribe&#xff08;发布/订阅者&#xff09;模式相关术语 二、初步使用1.yml文件配置2.生产者类3.消费者类4.发送消息 三、减少分区数量1.停止业务服务进程2.停止kafka服务进程3.重新启动kafka服务4.重新启动业…
阅读更多...
PPT大神带你飞！！！

PPT大神带你飞！！！

1、OneKeyTools 官网&#xff1a;http://oktools.xyz/ OneKeyTools是一款免费开源的PowerPoint第三方平面设计辅助插件&#xff0c;功能涵盖了形状、调色、三维、图片处理、辅助功能等等方面。 插件功能&#xff1a; 插件从面世逐步受到广大PPT设计师和爱好者的追捧&#x…
阅读更多...
感谢大家的支持，继续耕耘

感谢大家的支持，继续耕耘

有什么大家感兴趣的领域&#xff0c;欢迎留言
阅读更多...
SSH数据流量监控

SSH数据流量监控

简介 检查网络连接的数据传输情况有以下一些实际意义&#xff1a; 安全监控&#xff1a;检查数据传输情况可以帮助你识别异常活动或潜在的安全威胁。如果发现大量不寻常的数据传输活动&#xff0c;可能表示有未经授权的访问或恶意行为。通过监控数据传输&#xff0c;可以及时发…
阅读更多...
软件测评中心▏正式验收测试和非正式验收的优缺点简析

软件测评中心▏正式验收测试和非正式验收的优缺点简析

软件正式验收测试需要非常严格的管理&#xff0c;是对系统测试的延续&#xff0c;这种验收测试的测试用例应是系统测试的子集。非正式验收测试不像正式验收测试那么严格&#xff0c;不需要执行指定的测试用例&#xff0c;可以由测试人员自主决定&#xff0c;但制定测试用例时必…
阅读更多...
node.js(express.js)+mysql实现登录功能

node.js(express.js)+mysql实现登录功能

文章目录 前言实现步骤 实现步骤一、检测登录表单的数据是否合法&#xff08;3&#xff09;新建schema/user.js&#xff08;4&#xff09;在routes/use.js中引入schema/user.js中的方法reg_login_schema&#xff0c;代码如下&#xff1a; 二、根据用户名查询用户的数据三、判断…
阅读更多...
浅析Redis①：命令处理核心源码分析(上)

浅析Redis①：命令处理核心源码分析(上)

写在前面 Redis作为我们日常工作中最常使用的缓存数据库&#xff0c;其重要性不言而喻&#xff0c;作为普调开发者&#xff0c;我们在日常开发中使用Redis&#xff0c;主要聚焦于Redis的基层数据结构的命令使用&#xff0c;很少会有人对Redis的内部实现机制进行了解&#xff0c…
阅读更多...
C++:类与结构体的对比

C++:类与结构体的对比

2024年1月18日 内容来自The Cherno:C系列 -------------------------------------------------------------------------------------------------------------------------------- C中关于class与struct&#xff0c;几乎没有区别&#xff0c;只有一个关于“可见度”的区别…
阅读更多...
Go 爬虫之 colly 从入门到不放弃指南

Go 爬虫之 colly 从入门到不放弃指南

文章目录 概要介绍如何学习官方文档如何安装快速开始如何配置调试分布式代理层面执行层面存储层面存储多收集器配置优化持久化存储启用异步加快任务执行禁止或限制 KeepAlive 连接扩展总结如果想用 GO 实现爬虫能力，该如何做呢？抽时间研究了 Go 的一款爬虫框架 colly。 概要…
阅读更多...
【前后端的那些事】15min快速实现图片上传，预览功能(ElementPlus+Springboot)

【前后端的那些事】15min快速实现图片上传，预览功能(ElementPlus+Springboot)

文章目录 Element Plus SpringBoot实现图片上传&#xff0c;预览&#xff0c;删除效果展示 1. 后端代码1.1 controller1.2 service 2. 前端代码2.1 路由创建2.2 api接口2.2 文件创建 3. 前端上传组件封装 前言&#xff1a;最近写项目&#xff0c;发现了一些很有意思的功能&…
阅读更多...
SD-WAN组网设计原则：灵活、安全、高效

SD-WAN组网设计原则：灵活、安全、高效

在实现按需、灵活和安全的SD-WAN组网方案中&#xff0c;我们必须遵循一系列关键的设计原则&#xff0c;以确保网络的可靠性和效率。通过以下几点设计原则&#xff0c;SD-WAN能够满足企业对灵活性、安全性和高效性的迫切需求。 灵活的Overlay网络互联 SD-WAN通过IP地址在站点之间…
阅读更多...
Netty-Netty源码分析流程图

Netty-Netty源码分析流程图

netty服务端流程图
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023