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

<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>

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【踩坑日志】SpringBoot读取nacos配置信息并提取信息中的IP地址（配置属性解析异常+排错记录）

【踩坑日志】SpringBoot读取nacos配置信息并提取信息中的IP地址（配置属性解析异常+排错记录）

缘起 &#xff1a;项目需读取nacos中动态的TDengine数据库连接信息并提取IP&#xff0c;一个并不复杂的操作&#xff0c;但作为一个nacos知识浅薄的菜鸡&#xff0c;我愣是捯饬了几个小时……惭愧惭愧…… 异常代码 Data Component public class TaosLink { // Value("…
阅读更多...
Docker--harbor私有仓库

Docker--harbor私有仓库

目录 一、什么是Harbor&#xff1f; 二、Harbor的特性 三、Harbor的构成 四、部署 五、维护管理Harbor 一、什么是Harbor&#xff1f; Harbor 是 VMware 公司开源的企业级 Docker Registry 项目&#xff0c;其目标是帮助用户迅速搭建一个企业级的 Docker Registry 服务。 …
阅读更多...
【昇思技术公开课笔记-大模型】Transformer理论知识

【昇思技术公开课笔记-大模型】Transformer理论知识

什么是Transformer Transformer是一种神经网络结构&#xff0c;由Vaswani等人在2017年的论文“Attention Is All You Need”中提出&#xff0c;用于处理机器翻译、语言建模和文本生成等自然语言处理任务。 Transformer与传统NLP特征提取类模型的区别主要在以下两点&#xff1…
阅读更多...
WebGL开发智慧城市应用

WebGL开发智慧城市应用

在使用WebGL实现智慧城市应用时&#xff0c;需要考虑一系列的问题&#xff0c;以确保系统的性能、安全性和用户体验。以下是在开发WebGL智慧城市应用时需要注意的问题&#xff0c;希望对大家有所帮助。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;…
阅读更多...
【iOS】——基于Vision Kit框架实现图片文字识别

【iOS】——基于Vision Kit框架实现图片文字识别

文章目录 前言一、文本识别的分类二、实现步骤1.导入Vision Kit框架2.创建请求处理器3.在请求处理器中设置文字识别功能4.将图片添加到请求处理器中5.发起文字识别请求6.处理识别结果 三、运行结果测试1.纯英文环境2.中英文混合环境 前言 根据苹果的官方文档&#xff0c;Visio…
阅读更多...
MySQL面试题 | 15.精选MySQL面试题

MySQL面试题 | 15.精选MySQL面试题

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…
阅读更多...
YOLOv7全网独家首发：DCNv4更快收敛、更高速度、更高性能，效果秒杀DCNv3、DCNv2等 ，助力检测实现暴力涨点

YOLOv7全网独家首发：DCNv4更快收敛、更高速度、更高性能，效果秒杀DCNv3、DCNv2等 ，助力检测实现暴力涨点

💡💡💡本文独家改进：DCNv4更快收敛、更高速度、更高性能，完美和YOLOv7结合，助力涨点 DCNv4优势：(1) 去除空间聚合中的softmax归一化，以增强其动态性和表达能力；(2) 优化存储器访问以最小化冗余操作以加速。这些改进显著加快了收敛速度，并大幅提高了处理速度，DCN…
阅读更多...
Mybatis 动态SQL条件查询①

Mybatis 动态SQL条件查询①

需求 : 根据用户的输入情况进行条件查询 新建了一个 userInfo2Mapper 接口,然后写下如下代码,声明 selectByCondition 这个方法 package com.example.mybatisdemo.mapper; import com.example.mybatisdemo.model.UserInfo; import org.apache.ibatis.annotations.*; import j…
阅读更多...
LeetCode、2462. 雇佣 K 位工人的总代价【中等，最小堆+双指针】

LeetCode、2462. 雇佣 K 位工人的总代价【中等，最小堆+双指针】

文章目录 前言LeetCode、2462. 雇佣 K 位工人的总代价【中等&#xff0c;最小堆双指针】题目及类型思路及代码实现 资料获取 前言 博主介绍&#xff1a;✌目前全网粉丝2W&#xff0c;csdn博客专家、Java领域优质创作者&#xff0c;博客之星、阿里云平台优质作者、专注于Java后…
阅读更多...
【安全篇 / FortiGuard】(7.4) ❀ 02. 独立VDOM下的FortiGuard服务升级 ❀ FortiGate 防火墙

【安全篇 / FortiGuard】(7.4) ❀ 02. 独立VDOM下的FortiGuard服务升级 ❀ FortiGate 防火墙

【简介】由于业务的需要&#xff0c;创建两个独立VDOM&#xff0c;每个VDOM有各自的宽带&#xff0c;但是FortiGuard服务却无法升级&#xff0c;有什么办法解决吗&#xff1f; VDOM概念 首先我们看看什么是VDOM。 ① VDOM将你的FortiGate划分为多个逻辑设备&#xff0c;并将一个…
阅读更多...
用 Python 制作可视化 GUI 界面，一键实现自动分类管理文件！

用 Python 制作可视化 GUI 界面，一键实现自动分类管理文件！

经常杂乱无章的文件夹会让我们找不到所想要的文件&#xff0c;因此小编特意制作了一个可视化GUI界面&#xff0c;通过输入路径一键点击实现文件分门别类的归档。 不同的文件后缀归类为不同的类别 我们先罗列一下大致有几类文件&#xff0c;根据文件的后缀来设定&#xff0c;大…
阅读更多...
Babylonjs inspector工具开启embedMode模式后不显示

Babylonjs inspector工具开启embedMode模式后不显示

项目地址见&#xff1a;https://github.com/tipace/simple-babylonjs 简单的babylonjs example 本身问题挺简单的&#xff0c;仅做一个记录。开始以为是babylon的问题&#xff0c;最后发现是css问题。 因为是做demo&#xff0c;把canas设置为占满全屏&#xff0c;习惯性的写…
阅读更多...
Linux--磁盘与文件系统

Linux--磁盘与文件系统

目录 1.什么是文件系统 2.磁盘 2.1什么时磁盘 2.2磁盘的物理存储结构 2.3磁盘的逻辑抽象结构 3.磁盘文件系统&#xff08;EXT2&#xff09; inode Table(i结点表) Data Block inode Bitmap(inode位图) Block Bitmap(块位图) 在Linux如何删除文件 Group Descriptor Ta…
阅读更多...
uniapp web-view组件双向通信

uniapp web-view组件双向通信

前言 本文主要介绍在uniapp中页面与webview组件内页面的双向通信问题。 准备 uniapp项目 调用webview组件 <web-view src"/hybrid/html/index.html"></web-view> Web项目 项目目录 在uniapp项目根目录下新建hybrid/html目录&#xff0c;web项目文件…
阅读更多...
「sdkman」「nvm」Linux:基于sdkman安装多版本Java；安装maven；基于nvm安装多版本nodejs；安装yarn

「sdkman」「nvm」Linux:基于sdkman安装多版本Java；安装maven；基于nvm安装多版本nodejs；安装yarn

1. 基于sdkman 安装多版本Java Linux环境下管理多版本java可以使用sdkman,官网: https://sdkman.io/ 需要注意sdkman 依赖 zip和unzip 命令,记得提前下载再下载sdkman 安装命令 按官网走很简单: curl -s “https://get.sdkman.io” | bash source “$HOME/.sdkman/bin/sdkm…
阅读更多...
【Linux】27、arm 交叉编译

【Linux】27、arm 交叉编译

arm 下的 gcc 工具&#xff1a;arm-linux-gnueabihf-gcc 交叉编译介绍&#xff1a;https://aijishu.com/a/1060000000023713 一、redis arm 编译 1.1 准备交叉编译工具 在 https://redis.io/download/ 下载源码&#xff1a;redis-6.2.14.tar.gz 下载交叉编译工具&#xff…
阅读更多...
明渠流量监测站的优势

明渠流量监测站的优势

明渠流量监测站的优势相对于传统监测站来说较为明显。首先&#xff0c;明渠流量监测站可以适应各种形态的水流条件&#xff0c;包括矩形、梯形和涵洞等不同类型的明渠。其次&#xff0c;其采用了先进的在线监测技术&#xff0c;如超声波明渠流量计、多普勒明渠流量计和多声道明…
阅读更多...
云原生网关哪家强---Sealos 网关血泪史

云原生网关哪家强---Sealos 网关血泪史

云原生网关哪家强---Sealos 网关血泪史 Sealos 公有云&#xff08;https://cloud.sealos.io&#xff09;几乎打爆了市面上所有主流的开源网关&#xff0c;本文可以给大家很好的避坑&#xff0c;在网关选型方面做一些参考。 Sealos Cloud 的复杂场景 Sealos 公有云上线以来&a…
阅读更多...
【Java】HttpServlet类中前后端交互三种方式（query string、form表单、JSON字符串）

【Java】HttpServlet类中前后端交互三种方式（query string、form表单、JSON字符串）

在前后端的交互中&#xff0c;前端通过以下三种方式来与后端进行交互&#x1f31f; ✅query string ✅form表单 ✅JSON字符串 下面我们将书写这三种方式的后端代码并进行讲解 1、Query String QueryString即在url中写入键值对&#xff0c;一般用doGet方法进行交互 代码如下 …
阅读更多...
即时按需原子 CSS 引擎：比 Tailwind JIT 快 5 倍！ | 开源日报 No.149

即时按需原子 CSS 引擎：比 Tailwind JIT 快 5 倍！ | 开源日报 No.149

unocss/unocss Stars: 14.6k License: MIT 该项目是一个即时的按需原子 CSS 引擎&#xff0c;受到 Windi CSS、Tailwind CSS 和 Twind 的启发&#xff0c;解决了定制化、速度和体积的问题。 以下是该项目的特点和核心优势&#xff1a; 完全可定制&#xff1a;通过预设提供所…
阅读更多...
最新文章

Copyright @ 2022~2023