uni-app 本地数据缓存建立用户注册登录状态退出实例

作者 : 枫瑞博客 本文共3481个字,预计阅读时间需要9分钟 发布时间: 2019-05-28 共5.46K人阅读

uni-app 本地数据缓存建立用户注册登录退出状态实例

本文章是通过缓存建立一个注册一个用户保存在本地缓存key中,在通过本地key对比用户和密码正确着跳转登入界面。登入界面有一个if判断,如本地用户没有登入着显示默认头像,用户登入着获取用户ID和头像等,退出用户清空本地缓存。这是简单的概述下思路。初步介绍uni.setStorage用法,后期在更新通过API让用户登入。

1.获取模板

a.uni-app插件市场有很多模板,我们直接下载不去自己写(偷懒Ing!)

Simple-login包含登录注册页面模版下载地址:https://ext.dcloud.net.cn/plugin?id=96

我们先看下目录结构和效果图

 

2.注册表单

下载好后导入到Hbuilder x中,register.vue界面中我们去建立一个表单 ,在按钮位置添加form-type=”submit”

<view class=" registerbtn has-radius has-mgtb-20">
				<button form-type="submit">注 册</button>
</view>

切在最外层添加一个submit触发一个名为tijiao的事件

<form @删除我submit="tijiao">
				<view class="has-mglr-10 ">
					<view class=" has-mgtb-10 ">
						<input name="username"  type="text" maxlength="11" placeholder="请输入手机号" class="is-input1 " />
					</view>

					<view class=" has-radius has-mgtb-10">
						<input name="password" placeholder="请输入登录密码" :password="true" class="is-input1" />

					</view>
					<view class=" registerbtn has-radius has-mgtb-20">
						<button form-type="submit">注 册</button>
					</view>
				</view>
			</form>

在methods方法中添加tijiao事件函数和本地缓存 uni.setStorageSync(‘key名字’,‘key内容’),在次位置下断点

methods: {
			tijiao (e) {
				uni.setStorageSync("userpass",userdata);
        debugger;
        }
}

运行到微信小程序或者模拟器(H5不能用切记)随意输入字母点击注册,在断点中查看是否有数据

uni-app 本地数据缓存建立用户注册登录状态退出实例

有数据那我们就意味着成功拉!如果大家要在控制台打印出来

var userdata = e.detail.value;
console.log(e.detail.value);

其实打不打印都差不多哈!当我们点击后需要一个提示告诉用户注册成功,直接在tiajiao方法中添加一个弹窗就好,枫瑞为了方便在弹窗点击确定后跳转到登录界面

uni.showModal({
					title: '友情提示',
					content: '注册成功!是请往登入界面',
					success: function (res) {
						//点击确定后跳转界面
						if (res.confirm) {
							uni.switchTab({
								url: 'login'
							})
						} 
					}
				});

3.登陆界面

登录界面会比注册难一点点,因为要获取用户输入的内容,然后和我们本地key对比,获取input框输入内容使用v-model,好像插件就写好了

	<input v-model="login.password" placeholder="请输入登录密码" class="is-input1"  @input="BindInput" data-val="password"/>

key是一个对象,我们首先在return中声明一下

return {
				login: {
					loading: false,
					phone:"",
					password:"",
					bendi:{}
					
				},

			};

随后我们得在这个界面获取到我们得本地uni-app数据缓存,写onLoad里面,为了验证我们先打印看下有没有数据

onLoad() {
			this.login.bendi = uni.getStorageSync("userpass");
			console.log(this.login.bendi)
		},

在插件中的登陆有一个tap事件 我们就直接用这个了

<button :loading="login.loading" @tap="defaultHandlerLogin"> {{ login.loading ? "登录中...":"登 录"}} </button>

methods中添加函数,第一步我们的先确定key是不是存在的(上面onLoad其实可以看出有的,但是安全嘛在验证一次)

this.login.loading = true;

第二步 对比key的用户名密码这里用if去对比,对比成功跳转个人中心。整体代码如下

defaultHandlerLogin:function(){
				this.login.loading = true;
				if (this.login.bendi.username === this.login.phone) {
					if (this.login.bendi.password == this.login.password) {
						console.log("登陆成功")
						uni.showModal({
							title: '友情提示',
							content: '登陆成功',
							success: function (res) {
								uni.switchTab({
									url: 'index'
								})
							}
						});
					}else {
						console.log("密码错误")
						uni.showModal({
							title: '友情提示',
							content: '密码错误',
							success: function (res) {
							}
						});
					}
				}else {
					console.log("密码或账号错误")
					uni.showModal({
						title: '友情提示',
						content: '密码或账号错误',
						success: function (res) {
						}
					});
				}
				setTimeout((e=>{
					this.login.loading = false;
				}),1500);
				console.log(JSON.stringify(this.login)); 
			},

其实if可以缩写,但是为了装逼就不简化了哈哈!如果大家要看本地得key在控制台中storage中就可以看到了

uni-app 本地数据缓存建立用户注册登录状态退出实例

 

4.个人中心

个人中心我写在index页面下,那么首先我们得在pages.json中声明下界面

{
		    "path" : "pages/ucenter/index",
		    "style" : {
				"navigationBarTitleText" : "个人中心",
				"app-plus":{
					"bounce":"none"
				}
			}
		},

和底部导航

{
				"pagePath": "pages/ucenter/index",
				"iconPath": "static/img/footer/footer-home.png",
				"selectedIconPath": "static/img/footer/footer-home-act.png",
				"text": "登入"
			},

首页在插件中是空白页面,老规矩先获取本地key


      var  info = uni.getStorageSync("userpass");
			console.log(info)

成功获取后,我们去写未登录样式,在给他一个判断如果是未登录就显示某个样式,以登录则显示用户头像 用if来判断(登录显示具体看源码)if得值则由return中布尔值来分别显示

return {
				panduan:true,
				info:{}
			};

key值是否为空来赋值true或flase

if(info != null && info != "" && info != undefined){
				this_s.panduan = false;
				this_s.info=info;
				// console.log(info.username)
				console.log("有数据")
			}else{
				// this_s.panduan = false;
				// this_s.info = {};
				console.log("没数据")
			}

5.退出

退出就是清除本地key

uni.removeStorageSync('userpass');

6.总结

uni-app 本地数据缓存建立用户注册登录状态退出实例大体思路,没有使用API导致我们在退出得时候界面不会自动刷新,所有会停留在有用户的状态下

 

 

 

 

 

枫瑞博客网 一个只想努力找富婆不想努力的人
枫瑞博客网 » uni-app 本地数据缓存建立用户注册登录状态退出实例

常见问题FAQ

枫瑞你想努力吗?
不 ,我只想找富婆

13 评论

  1. 主要是倒数第二步,【key值是否为空来赋值true或flase】这一步我出错了,不知道是什么问题

  2. 好的,谢谢

  3. 我找找 应该右保存

  4. 这个还有源码吗?

  5. 账号密码错误

  6. 为什么输入正确的账号密码,还是显示密码或账号错误

  7. 不错不错

  8. 收藏《uni-app 本地数据缓存建立用户注册登录状态退出实例》文章

  9. 谢谢

  10. 教程狠好

  11. 很棒

  12. 很奶思

  13. 不错

  14. 可以的

发表评论