Uniapp登录页面获取头像、昵称的最新方法的简单使用

前言

        写小程序写到登录页面的时候,发现官方文档中原来的wx.getUserInfo和wx.getUserProfile不太能用了,学习了相对比较新的方法,这种方法的文档链接如下:

https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/userProfile.html

 下面演示它的简单使用

效果说明

        写两个页面page1和page2,达到的效果是:在pages1中点击“去登录”,跳转到page2中填写头像和昵称(可以获取微信的头像和昵称),点击登录之后,将用户信息保存在storage中,跳转到page1并显示头像和昵称,同时显示退出登录按钮,点击之后退出登录,效果如下:

代码及解释

page2的代码如下:

<template>
	<view class="container">
		<!-- 官网最新登录方法 -->
		<button class="imageButton" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
		  <image class="image" :src="avatarUrl"></image>
		</button> 
		<input class="nameInput" type="nickname" v-model="username" placeholder="请输入昵称" />
		<!-- 确认登陆按钮 -->
		<button class="loginButton" @click="getUser">登录</button>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				avatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
				username:''
			};
		},
		methods:{
			onChooseAvatar(e) {
				//打印以查看详细数据
				// console.log(e.detail)
			    this.avatarUrl= e.detail.avatarUrl;
			},
			getUser(){
				//存储上述输入的信息
				wx.setStorage({
					key:"userinfo",
					data:JSON.stringify({
						userName:this.username,
						photoUrl:this.avatarUrl
					})
				})
				//页面跳转,回到个人中心,把其它页面关闭
				wx.reLaunch({
					url:'/pages/personal/personal'
				})
			}
		}
	}
</script>

<style lang="stylus">
	.container
		text-align: center
		.imageButton
			width: 100rpx
			height: 100rpx
			padding: 0
			.image
				margin: 0
				width: 100%
				height: 100%
		.nameInput
			width: 300rpx
			height: 60rpx
			border: 1rpx solid #000
			margin: 20rpx auto;
		.loginButton
			width: 150rpx
			height: 80rpx
			font-size: 30rpx
</style>

其中,第一个button的open-type可以提示获取微信用户头像,输入框input的type可以提示获取微信用户的昵称,v-model是将输入框中的内容和自定义变量绑定,最后填充到storage中

page1的代码如下

<template>
	<view class="personal">
		<view class="header">
			<!-- 登陆状态 -->
				<template v-if="userInfo.userName">
					<image class="img" :src="userInfo.photoUrl" mode=""></image>
					<text class="login">{{userInfo.userName}}</text>
					<button class="exit" @click="exit">退出登录</button>
				</template>
			<!-- 未登陆状态 -->
				<template v-else>
					<image class="img" src="/static/images/personal/personal.png" mode=""></image>
					<text class="login" @click="toLogin">去登录</text>
				</template>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				userInfo:{}
			};
		},
		mounted() {
			//从本地存储中读取数据
			wx.getStorage({
				key:'userinfo',
				//必须用箭头函数
				success:(res)=>{
					// console.log(res);
					if(res.data)
					{
						this.userInfo=JSON.parse(res.data);
						console.log(res);
					}	
				}
			})
		},
		methods:{
			toLogin(){
				//用relaunch:登陆之后不能再返回到未登陆的状态
				wx.reLaunch({
					url:'/pages/login/login'
				})
			},
			exit(){
				//清空用户信息
				wx.setStorage({
					key:'userinfo',
					data:""
				})
				//导航登录页
				wx.reLaunch({
					url:'/pages/personal/personal' 
				})
			}
		}
	}
</script>

<style lang="stylus">
	.personal
		.header
			height: 300rpx
			line-height: 200rpx
			background-color: #EED785
			display: flex
			.img
				width:100rpx
				height:100rpx
				vertical-align: middle
				margin:50rpx
			.exit
				height: 70rpx
				width:300rpx
				margin: 60rpx
				//让按钮内文字居中 
				line-height: 70rpx

				
			
			
</style>

通过v-if判断是否登陆,从而显示不同的header

在mounted中获取storage数据,设置userInfo予以填充

点击退出登录直接清空storage再刷新page1即可

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

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

相关文章

搜维尔科技:第九届元宇宙数字人大赛,参赛小组报名确认公告!

各位参赛选手大家好&#xff0c;近期已收到新增报名信息如下表&#xff0c;请各位参赛选手确认&#xff0c;如果信息有误或信息不完整请电话联系赛务组工作人员进行更正 随着元宇宙时代的来临&#xff0c;数字人设计成为了创新前沿领域之一。为了提高大学生元宇宙虚拟人角色策划…

1.31学习总结

1.31 1.线段树 2.Bad Hair Day S&#xff08;单调栈&#xff09; 3.01迷宫(BFS连通块问题剪枝)&#xff08;连通性问题的并查集解法&#xff09; 4.健康的荷斯坦奶牛 Healthy Holsteins&#xff08;DFS&#xff09; 线段树与树状数组 线段树和树状数组的功能相似&#xff0c;但…

校园二手交易小程序|基于微信小程序的闲置物品交易平台设计与实现(源码+数据库+文档)

校园二手交易小程序目录 目录 基于微信小程序的闲置物品交易平台设计与实现 一、前言 二、系统功能设计 三、系统实现 1、用户信息管理 2、商品信息管理 3、公告信息管理 4、论坛信息管理 四、数据库设计 1、实体ER图 五、核心代码 六、论文参考 七、最新计算机毕…

RabbitMQ 死信队列应用

1. 概念 死信队列&#xff08;Dead Letter Queue&#xff09;是在消息队列系统中的一种特殊队列&#xff0c;用于存储无法被消费的消息。消息可能会因为多种原因变成“死信”&#xff0c;例如消息过期、消息被拒绝、消息队列长度超过限制等。当消息变成“死信”时&#xff0c;…

(申请积分专用)我的世界(MC)整合包开服教程,Pokehaan Craft 2整合包服务器搭建教程

Minecraft整合包服务器搭建教程&#xff0c;宝可梦/神奇宝贝整合包&#xff08;Pokehaan Craft 2&#xff09;开服教程。 其他整合包也可以参考此教程。要看这个整合包的游戏截图可以翻到文章最底下。 什么是整合包 Minecraft的整合包是一种包含了多个模组&#xff08;mod&a…

面向对象设计的七大设计原则

在我们探讨如何创建健壮且可维护的面向对象系统时&#xff0c;有一些原则可以为我们提供指导。这些原则可以帮助我们理解如何最好地组织我们的类和对象&#xff0c;以实现高效、模块化和可扩展的设计。在本篇文章中&#xff0c;我们将探讨这些原则&#xff0c;以及如何在我们的…

Pyth 预言机: 它们如何影响Hover?

所有链上借贷市场都使用一种称为“oracle&#xff08;预言机&#xff09;”的服务&#xff0c;为dApp提供代币定价。Oracle是一个数据系统&#xff0c;将链下信息&#xff08;例如KuCoin上的BTC/USDT价格&#xff09;传递到链上合约。从那里&#xff0c;应用程序可以支付一小笔…

MAVEN(1)

分模块开发与设计 分模块开发意义 将原始模块按照功能拆分成若干个子模块&#xff0c;方便模块间相互调用&#xff0c;接口共享 步骤示例 这里以之前开发的SpringMVC_ssm中的domain模块为例 第一步、创建Maven模块 父项改为none&#xff0c;文件存储位置需要做出相应调整 …

MySQL基础(三)-学习笔记

一.innodb引擎&#xff1a; 1). 表空间&#xff1a;表空间是InnoDB存储引擎逻辑结构的最高层&#xff0c;启用了参数 innodb_file_per_table(在 8.0版本中默认开启) &#xff0c;则每张表都会有一个表空间&#xff08;xxx.ibd&#xff09;&#xff0c;一个mysql实例可以对应多个…

Revisiting image pyramid structure for high resolution salient object detection

accv2022的技术&#xff0c;在我测评的数据集上确实要明显好于basnet&#xff0c;rembg等一众方法。 1.Introduction 使用LR数据集训练的方法通过调整输入尺寸可以在HR图像上产生不错的结果。本文主要关注仅使用LR数据集进行训练以产生高质量的HR预测。HR的有效感受野ERFs和LR…

QT学习日记 | 信号与槽

目录 前言 一、初始信号与槽 1、信号与槽的本质 2、信号与槽的使用 3、内置信号、内置槽函数与自定义信号、自定义槽函数 &#xff08;1&#xff09;文档查询 &#xff08;2&#xff09;自定义信号与内置槽函数的使用 4、信号与槽函数关联关系 5、带参数的信号与槽函数…

计算机毕业设计 | springboot 多功能商城 购物网站(附源码)

1&#xff0c; 概述 国家大力推进信息化建设的大背景下&#xff0c;城市网络基础设施和信息化应用水平得到了极大的提高和提高。特别是在经济发达的沿海地区&#xff0c;商业和服务业也比较发达&#xff0c;公众接受新事物的能力和消费水平也比较高。开展商贸流通产业的信息化…

Java和JavaScript的区别与联系

引言 Java是一种由Sun Microsystems&#xff08;现在是Oracle公司&#xff09;开发的面向对象编程语言&#xff0c;最初于1995年发布。Java被设计为一种跨平台的语言&#xff0c;可以在多个操作系统上运行&#xff0c;这是其广泛应用的重要原因之一。Java具有丰富的标准库和第三…

常见分类网络的结构

VGG16 图片来自这里 MobilenetV3 small和large版本参数,图片来着这里 Resnet 图片来自这里

AutoDL使用conda运行pytorch、dgl

环境配置要是出现兼容问题还是挺繁琐的。所以这里记录下成功的配置情况。 conda create --name Test python3.9 # 构建一个虚拟环境 conda init bash && source /root/.bashrc # 更新bashrc中的环境变量 conda activate Test # 切换到该虚拟环境 pip install torch…

windows安装oracle之后怎么连接使用

目录 1.打开SQl Developer 2.选择JDK 3.登录 4.创建表空间,用户 安装oracle的详细教程 WINDOWS安装Oracle11.2.0.4-CSDN博客 1.打开SQl Developer 找到 SQl Developer 2.选择JDK 根据你安装的oracle版本,因为我的oracle是安装的32位的,所以这里jdk也要选择32位 选择到ja…

私募证券基金动态-23年12月报

成交量&#xff1a;12月日均7,696.93亿元 2023年12月A股两市日均成交7,696.93亿元&#xff0c;环比下降12.39%、同比下降2.26%。12月整体21个交易日&#xff0c;无单日交易日成交金额过万亿&#xff0c;单日交易日最低成交金额为6,122.84亿元&#xff08;12月25日&#xff09;…

【Linux】进程通信——共享内存+消息队列+信号量

欢迎来到Cefler的博客&#x1f601; &#x1f54c;博客主页&#xff1a;折纸花满衣 &#x1f3e0;个人专栏&#xff1a;题目解析 &#x1f30e;推荐文章&#xff1a;【LeetCode】winter vacation training 目录 &#x1f449;&#x1f3fb;共享内存&#x1f449;&#x1f3fb;关…

测试用例的设计(超详细)

&#x1f345; 视频学习&#xff1a;文末有免费的配套视频可观看 &#x1f345; 关注公众号&#xff1a;互联网杂货铺&#xff0c;回复1 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;薪资嘎嘎涨 1. 测试用例的概念 软件测试人员向被测试系统提供的一…

MySQL窗口函数--lead()函数

lead()函数&#xff1a; 查询当前行向下偏移n行对应的结果 该函数有三个参数&#xff1a;第一个为待查询的参数列名&#xff0c;第二个为向下偏移的位数&#xff0c;第三个参数为超出最下面边界的默认值。 如下代码&#xff1a; 查询向下偏移 2 位的年龄 SELECT user_id,user…