uniapp 返回页面刷新/小程序获取用户信息之后登录和退出登录

uniapp 拉起授权(拒绝后重新开启权限) 引入 uniapp 的权限模块:首先,你需要在项目中引入 uniapp 的权限模块。希望这些步骤能够帮助你拉起权限,并且在用户拒绝后能够重新开启权限。检查权限:在拉起权限之前,你可以先检查一下当前权限的状态。重新开启权限:如果权限被拒绝了,可以尝试重新开启权限。方法可以打开设置界面,让用户手动开启权限。方法获取当前权限的状态。 阅读详情

一、返回页面刷新

1.进页面获取数据 onload
当返回页面时,比如从a页面到b页面,b页面返回a页面时,不会再执行onload,要用onshow。

二、小程序登录和退出登录

1.先在首页onload里判断是否有登录存的数据

onLoad() {
			//是否登录
			let loginShow = uni.getStorageSync('uerInfo');
			console.log(loginShow)
			if (!loginShow) {
				this.loginshow = true;//是否显示登录弹窗的控制隐藏,如果loginshow为空,就是没有登录,就显示是否去登录弹窗
			} else {
			}
		},

2.如果没登录,在点击弹窗去的去登录后,用uniapp的button open-type=“getUserInfo” 属性获取用户信息,如头像姓名等,(必须是button,否则没有获取授权的弹窗)
html:

<button @click="test" open-type="getUserInfo" type="primary"
						style="height: 60upx;line-height: 60upx;font-size: 32upx;">授权登录</button>

js

			test() {
				let that = this;
				let dataVuex = {};//用来放循序存储的数据
				uni.login({ //uniapp login方法,可以看文档
					provider: 'qq',
					success: (loginRes) => {
						//console.log(loginRes);通过login获取到code,把code传给后台,
						uni.request({
							url: 'https://api.qqxy.os.yunyoulf.com/api/getCode?code=' +loginRes.code, 
							data: {
							},
							header: {
								'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
							},
							success: (res) => {
							//后台返回个人openid(重要),先用dataVuex存起来
								dataVuex.openid = res.data.openid;
								dataVuex.session_key = res.data.ssession_key;
								再用button 的uni.getUserInfo方法,获取用户信息,名字头像等
								uni.getUserInfo({
									provider: 'qq',
									success: (infoRes) => {
									//获取之后保存起来
										dataVuex.name = infoRes.userInfo
											.nickName;
											dataVuex.avUrl=infoRes.userInfo
											.avatarUrl
											console.log(dataVuex,11111)
											//方法一存储,用的vuex里的方法,里面有setStorage存储
										this.$store.commit("login", dataVuex);
										//方法二,直接在这里用setStorage存储,不经过vuex,任选一种
										uni.setStorage({ //将用户信息保存在本地  
											key: 'uerInfo',
											data: dataVuex
										})
										//组装谈书 获取的openid和用户信息
										const {
											avatarUrl,
											city,
											nickName,
											country,
											gender,
											province
										} = infoRes.userInfo;
										let param = {
											avatarurl: avatarUrl,
											city,
											nickname: nickName,
											country,
											gender,
											province,
											openid: dataVuex.openid
										};
										//把组装好的参数一起传给后台,后台添加用户
										//uniapp封装的方法,这里直接调用,下一篇讲封装
										this.$api.addUser(param).then(
											resinfor => {
											console.log(“登录成功”)
												this.loginshow = false;//关闭弹窗
											}).catch(res => {
											//失败进行的操作
							console.log(“登录失败”)

										})
									},
									fail: (res) => {
										console.log(res, "err")
									}

								});
							}
						});

					}
				});
			},

看着长,其实不复杂,讲一下大概思路;
先用uni.login获取code
再把code传给后台,后台返回一个openid先存起来,再用uni.getUserInfo获取用户信息头像名称等,拿到之后,把openid和用户信息存起来,传给后台,后台创建用户,成功之后就登录成功了。另外要用setStorage把用户常用信息,比如头像和名称,还有openid存起来,用来判断用户是否登录。

3.退出登录
当用户点击退出登录时,直接把setStorage存的值清空就行了。下次进入页面判断setStorage是否有值,没有值再弹出去登录,参考第一点。

实战拆解打车小程序:从架构设计到性能优化全解析 小程序开发已成为连接线上与线下服务的重要技术载体,其核心在于构建高效、稳定的实时交互系统。从技术原理上看,这通常涉及WebSocket长连接实现双向通信、关系型与内存数据库的混合使用以支撑高并发读写,以及基于地理位置服务的智能调度算法。这些技术的工程价值在于能够为用户提供无缝的O2O体验,例如在出行、外卖等场景中实现订单的实时匹配与状态同步。本文以出行领域为例,深入探讨如何实现一个具备完整交易闭环的小程序应用。针对开发中常见的性能瓶颈,如“vendor.js调用栈溢出”和“Canvas卡顿”问题,本文将提供 阅读详情

相关推荐

【微信授权登录】uniapp开发小程序,实现微信授权登录功能 & 退出登录

uniapp开发小程序,实现获取微信授权登录功能 & 退出登录

weixin_48596030的博客 1万+

uniapp 退出登录,重新登录数据缓存,页面未刷新

开发中遇到退出登录,重新登录的时候数据还是之前登录的信息,是因为我用了,uni.navigateTo() 导致之前的页面没有关闭,并且重新登录发现主页面也没有刷新,因为页面没有关闭,直接读的 缓存 解决 退出使用#uni.reLaunch() 关闭所有页面,打开到应用内的某个页面 uni.navigateTo() uni.reLaunch() ...

m0_50307759的博客 3507

基于SpringBoot+uniapp的云浮特产农产品交易小程序开发实践

在电商系统架构中,技术选型与业务模型设计是决定项目成败的关键。以农产品交易平台为例,后端服务需处理复杂的订单状态流转与权限控制,前端则需兼顾多端复用与原生组件适配。SpringBoot凭借成熟的生态和稳定的版本迭代,成为构建后端API服务的可靠选择;uniapp通过一套代码编译多端,有效降低小程序与App的重复开发成本。Vue管理后台为运营提供商品审核、订单管理和数据统计的支撑。这些技术共同解决了农产品非标准化、库存单位多样、物流时效敏感等实际业务难点。从通用架构设计到具体实现细节,本文以云浮特色农产品交易

weixin_33805992的博客 485

uni-app微信小程序用户拒绝授权后,重新调起授权页

【代码】uni-app微信小程序用户拒绝授权后,重新调起授权页。

qq_38768171的博客 1070

基于uniapp的奶茶店点餐微信小程序源码项目拆解

跨端开发框架uniapp凭借一套代码编译到微信小程序、H5、App等多端的能力,成为中小商家搭建轻量业务系统的热门选择。其核心原理是通过编译层将Vue语法转换为各端原生语法,在保持开发效率的同时兼顾运行性能。在实际工程中,点餐类小程序涉及商品SKU数据结构设计、购物车状态管理、订单流转与微信支付接入等关键技术点,这些模块的合理设计直接决定用户体验与后续扩展性。从场景上看,奶茶店、快餐店等线下门店通过自建小程序可降低平台抽成并提升点餐效率,源码复用的价值尤为突出。本文以一份基于uniapp的奶茶店点餐微信小程

weixin_30899023的博客 226

Spring Boot+Uniapp商城开发实战:多端适配与上架全流程解析

多端应用开发中,Uniapp以其一套代码覆盖App、小程序、H5的特性,成为电商项目快速落地的热门选择。而流媒体播放作为商品展示与直播场景的关键能力,常涉及HLS与RTSP协议的适配问题——比如vue播放m3u8需要依赖hls.js,uniapp实现rtsp视频播放则需借助流媒体网关转码。同时,移动端交互细节如uniapp安卓手势返回导致的闪退、keep-alive切换后列表滚动位置丢失、自定义分享好友及H5预览PDF等,都是高频踩坑点。这些技术难点的背后,是组件层级原理、页面生命周期管理与状态同步机制的综

weixin_27015733的博客 370

在uniapp中实现返回之后刷新页面(不用onShow方法)

在uniapp中实现返回之后刷新页面(不用onShow方法)

2301_76742166的博客 3102

芋道商城Uniapp多端开发实战:Vue跨端与m3u8视频播放

在移动互联网时代,多端覆盖已成为电商系统的基本要求。Uniapp作为一套代码编译到微信小程序、H5、App的跨端框架,凭借其基于Vue的语法体系,大幅降低了多端开发与维护成本。与此同时,视频展示在商品详情页中愈发关键,m3u8流媒体协议凭借其分片加载与自适应码率特性,成为电商视频播放的优选方案。从技术原理来看,Uniapp通过编译层封装实现跨端能力,而m3u8则依赖HLS协议将视频切片传输,两者结合可构建流畅的多端视频体验。在实际工程中,开发者需要处理原生组件层级、路由参数传递、支付回调验签等细节。本文以芋

weixin_29204205的博客 353

解决uniapp项目开发从某一页面返回到tabbar页面时,页面不刷新,无法重新获取跟新后的数据,无法重新渲染页面问题。

解决uniapp项目开发从某一页面返回到tabbar页面时,页面不刷新,无法重新获取跟新后的数据,无法重新渲染页面问题。

m0_55315930的博客 1万+

基于Spring Boot和MySQL的“最多跑一次”政务微信小程序毕设全解析

在政务数字化转型的浪潮中,微信小程序因其轻量便捷的特性,成为实现“最多跑一次”改革的重要载体。其背后涉及的前后端分离架构、RESTful API设计、数据库建模等基础技术,是开发者理解业务系统的关键。Spring Boot作为主流后端框架,凭借自动配置与生态优势,显著降低了服务端开发门槛;而MySQL以稳定的事务支持,保障了预约时段扣减等核心流程的数据一致性。这类技术组合广泛应用于公共服务预约、事项审核等场景。本文以一套完整的政务预约小程序毕设为例,拆解从用户登录、材料上传到后台审核的完整链路,并针对并发扣

weixin_28746457的博客 270

基于ThinkPHP6.0与uniapp的仿微信聊天源码核心设计与实践

即时通讯(IM)是社交类应用的核心能力,其技术实现涉及长连接、消息收发、离线补拉、多端同步等关键环节。本文从IM系统的基本概念与通信原理出发,介绍WebSocket在实时消息推送中的作用,以及如何通过数据库设计保障消息可靠性与会话列表性能。在此基础上,解析一套基于ThinkPHP 6.0与uniapp构建的仿微信聊天项目源码,涵盖好友关系链、朋友圈社区、消息确认机制、离线消息补拉等完整功能链路。无论是想快速搭建聊天类应用,还是进行毕业设计或商业项目二次开发,这套源码都提供了可落地的工程参考。文章还分享了部署

weixin_31856057的博客 322

小程序:300知识点/速查手册/微信原生小程序入门→中级→高级 + UniApp 跨端全栈

本文是一份小程序开发速查手册,涵盖从入门到高级的200个核心知识点。内容分为11大模块:基础架构、模板语法、样式规范、配置文件、生命周期、组件化开发、路由通信、原生API、分包工程化、性能优化及实战案例。重点解析小程序双线程架构、WXML/WXSS特性、组件化方案、setData机制、分包策略等核心技术,并提供性能优化技巧、安全规范和常见坑点解决方案。手册采用知识点编号形式,便于快速定位,适合开发者系统学习或日常查阅,帮助掌握小程序全栈开发能力。

snow的博客 527

Unity VR 零基础开发之 Pico4 MR

2、弹出弹窗后,点击Android选项,然后再点击Switch Platform按钮切换成安卓平台。3、切换完成后Android选项后面会显示unity图标。

十画的博客 5112

UniApp路由守卫与权限管理:封装代理实现页面访问控制

在Web前端开发中,路由守卫是实现页面级权限控制和导航拦截的核心机制,它通过钩子函数在路由跳转前后执行校验逻辑,确保应用的安全性和用户体验。其技术价值在于将权限判断逻辑集中管理,避免代码重复,提升可维护性。这一原理在Vue Router等框架中广泛应用,尤其适用于电商、后台管理系统等多角色业务场景。然而,在跨平台开发框架UniApp中,由于底层基于小程序原生导航,并未提供开箱即用的全局路由守卫API,这给实现**页面访问控制**和**权限引导**带来了挑战。本文通过封装与代理的设计思路,在UniApp中模拟

weixin_30628077的博客 328

2025最新OSM中国矢量数据保姆级下载指南(附百度网盘链接)

本文提供2025年OSM中国矢量数据的保姆级下载与使用指南。详细介绍了通过Geofabrik镜像站、QGIS插件及第三方平台获取数据的多种途径,重点解析了Shapefile格式数据的结构、WGS84坐标系特性,并指导进行格式转换与基础GIS应用,帮助用户高效合规地获取并利用这份开放地理数据资源。

weixin_29228781的博客 884

ABAP - Function ALV 11 - 单元格下拉框

【代码】ABAP - Function ALV 11 - 单元格下拉框。

HeathlX的博客 1816

【RuoYi-SpringBoot3-UniApp】:一套代码,多端运行的移动端开发方案

基于 RuoYi-App 的移动端解决方案,提供完整的移动端开发框架,包含登录认证、个人中心、工作台等常用功能模块

AI时代超级个体,专注AI应用落地,开发经验分享 1016

无人机——电机篇(一)

1. 电机的定义 电机俗称“马达”,是无人机的动力来源,无人机通过改变电机的转速来改变无人机的飞行状态。即改变每个电机的速度,使得无人机能够盘旋空中,上升或下降,或向各个方向移动。2. 电机的分类 电机分为:“无刷电机”和“有刷电机” - 无刷电机:是采用半导体开关器件来实现电子换向,具有可靠性高、低干扰、低噪声低、寿命长等优点。一般应用在稍大型的飞行器,载重大,可以有更广泛的用途。 - 有刷电机:是内含电刷装置的将电能转换成机械能(电动机)或将机械能转换成电能(发电机)的旋转电机。有刷电机是所有电机的基

weixin_46066938的博客 1万+

uni-app微信小程序保持登录状态(vuex和本地存储)

uni-app全局变量实现方式:见文档。 方式多种多样,在这里我只对vuex和uni.setStorageSync进行说明。 方式一 :vuex 1.在项目的根目录下创建文件‘store’,并在‘store’中新建index.js(名称随意起)如下: 说明:可以在state中定义你需要的值,需要注意的是‘hasLogin’如果你需要强制用户登录,只需要在需要判断的地方获取hasLogin的值来做不同处理即可! 2把.Vuex挂载到main.js上,如下图: 挂载以后你可以通过this.$store.st

q457201373的博客 1万+

MIKE21 MIKE软件 教程 0.1 软件介绍与教学目录

MIKE 21是一个专业的工程软件包,用于模拟河流、湖泊、河口、海湾、海岸及海洋的水流、波浪、泥沙及环境问题。在MIKE Zero集成平台中,主要有MIKE11,MIKE21,MIKE3三类软件,分别对应一维,二维,三维的水动力模型模拟。同时还包括MIKE HYDRO,MIKE FLOOD等其他功能,各软件的具体介绍请参考DHI公司的官方文档,在此不作赘述。学习过程中,对于任何操作界面的疑问,建议大家仔细阅读帮助文档(在有疑问的界面按F1调出),同时官方也提供了对应的线上和线下教学服务(免费+收费)。

Hello Word 2万+

华为OD机试真题 新系统 2026-05-13 Python&JS语言 实现【查找能被整除的最大整数】

给定一个字符串和一个正整数,字符串由大小写字母和数字组成,要求从字符串中找出最大且能被给定正整数整除的数。

MISAYAONE的博客 227

解决微信小程序报错Illegal Buffer

解密手机原理:微信小程序是通过wx.login生成code,然后传给后端,后端在通过code拿到用户信息,再通过sessionKey和用户信息来解密得出手机号的 报错原因:用户退出登录后登录,因为wx.login一直在 刷新code,在小程序给的nodejs解密中,报错原因是因为该解密的sessionKey没过期而不认新的sessionKey,所以会报Illegal Buffer 解决办法:把用户信息存数据库,然后给openid加密,充当登录态token,再把token返回小程序,小程序将其储存于 本地

weixin_42052539的博客 5316

EMB电子机械制动系统和EHB电子液压制动系统控制功能的对比

EMB电子机械制动系统相比EHB液压制动系统具有显著优势:响应速度更快(<100ms)、控制精度更高(±2N·m)、能实现单轮独立控制,支持0.1%级制动力调节。在ABS、ESC等安全功能上表现更优,制动平顺性和NVH性能更好,同时提升能量回收效率15%-20%。特别适合智能驾驶需求,可使AEB等系统响应时间缩短50ms,紧急制动距离减少1米以上。EMB系统完美契合高阶自动驾驶对快速响应和精准控制的要求。

m0_59012156的博客 888

通过咸虾米项目的开发经历,了解Uniapp项目整体开发过程(微信小程序名称:月色东升壁纸)

本文记录了作者从Java后端开发者转型全栈开发的完整历程。一年前因前端知识欠缺而放弃的小程序项目,通过系统学习HTML/CSS/JavaScript、Vue框架后,选用Uniapp实现多端适配开发。文章详细分享了学习路径(B站咸虾米教程)、设计工具(即时设计)的使用技巧、微信小程序注册流程,以及如何基于若依框架自建SpringBoot后端服务。作者不仅重写了所有接口,还完成了数据库设计、前后端联调,并实践了小程序上线全流程(包括ICP备案)。整个过程涵盖了原型设计、开发环境配置、接口对接、项目部署等全栈开发

qq_42449963的博客 462

android 蓝牙通讯demo

android 下蓝牙通讯demo,实现了发现蓝牙,使能蓝牙,通过蓝牙发送消息。

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

全平台登录实现指南:账号密码、验证码、微信支付宝、OAuth与扫码登录

本篇详细讲解前后端登录系统的完整实现方案,涵盖账号密码登录、图形验证码、短信验证码、微信登录、支付宝登录、第三方 OAuth 授权登录、自有扫码登录等常见业务场景。从登录流程、接口设计、数据库表结构、Token 鉴权、账号绑定、安全风控到 Vue3 + Spring Boot 代码实现,帮助开发者快速搭建一套安全、可扩展、适合真实项目的统一登录体系。

zzwokstyle的博客 298

C# WinForm 基于DirectShow.dll编写的程序,可边预览边保存视频,音频和图片

基于微软的DirectShow.dll的二次开发1.自动识别连接的摄像头跟麦克风且可以对其进行选择(默认选中第一个)2.可录制wmv和avi两种格式的视频并且都带有音频,avi可以录制的分辨率和帧数进行选择,wmv默认进行了淸晰度优化如不喜欢可去除代码中有相关提示3.可在预览点开之后进行拍照,也可边录制视频边拍照4.添加了视频和音频的压缩功能(酌情使用)这次二次开发发现C#对DirectShow的相关信息太少,这次做完也不敢藏私共享出来,还望大家指正

上一篇: git使用方法
下一篇: uniapp封装方法
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值