【转】uni-app 本地数据缓存建立用户注册登录退出状态实例
原文转自枫瑞网 原帖地址请访：https://www.frbkw.com/1745/本文章是通过缓存建立一个注册一个用户保存在本地缓存key中，在通过本地key对比用户和密码正确着跳转登入界面。登入界面有一个if判断，如本地用户没有登入着显示默认头像，用户登入着获取用户ID和头像等，退出用户清空本地缓存。这是简单的概述下思路。初步介绍uni.setStorage用法，后期在更新通过API让用户登入。
1.获取模板
a.uni-app插件市场有很多模板，我们直接下载不去自己写（偷懒Ing！）Simple-login包含登录注册页面模版下载地址:https://ext.dcloud.net.cn/plugin?id=962.注册表单下载好后导入到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不能用切记）随意输入字母点击注册，在断点中查看是否有数据有数据那我们就意味着成功拉！如果大家要在控制台打印出来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去对比，对比成功跳转个人中心。整体代码如下efaultHandlerLogin: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中就可以看到了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": "登入"
},首页在插件中是空白页面，老规矩先获取本地keyvarinfo = uni.getStorageSync("userpass");
console.log(info)成功获取后，我们去写未登录样式，在给他一个判断如果是未登录就显示某个样式，以登录则显示用户头像 用if来判断（登录显示具体看源码）if得值则由return中布尔值来分别显示return {
panduan:true,
info:{}
};key值是否为空来赋值true或flaseif(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.退出退出就是清除本地keyuni.removeStorageSync('userpass');6.总结uni-app 本地数据缓存建立用户注册登录状态退出实例大体思路，没有使用API导致我们在退出得时候界面不会自动刷新，所有会停留在有用户的状态下
正在使用uni-app开发项目，看着您的帖子受益匪浅。 感谢分享 谢谢大佬分享！ 楼主，这个还有源码吗？ hbj.xyz 发表于 2020-3-21 14:21
楼主，这个还有源码吗？
我好像删除了 没有保存 fengrui99 发表于 2020-3-22 12:00
我好像删除了 没有保存
好的，没关系，谢谢啦
页:
[1]