技术标签: uni-app
大家好,今天和大家分享一下如何在uni-app中实现简单的登录注册功能。
首先你需要掌握一下知识点:
1.网络请求 uni.request
2.页面跳转,页面传参 uni.navigateTo
3.本地缓存 uni.setStorageSync, uni.getStorageSync
我们要使用到登录和注册接口,所以要知道如何进行网络请求。
因为还需要进行注册,所以要进行跳转页面,跳转到注册页面所以要使用到页面跳转。
本地缓存就是当你登录之后要把你当前这个账号的用户信息进行存储,存储到本地,所以要使用本地存储。
下面我们就来看看具体的实现流程吧!
这是登录页面的基本布局,有两个输入框,一个是账户,一个是密码,下面是一个登录按钮,按钮下面是a链接,点击注册账号就会跳转到注册页面进行账号注册。
下面是注册页面的基本布局,有三个输入框,分别是账号,密码和邮箱,如果接口的请求参数不是邮箱的话可以换成其他的,输入框下面是注册按钮,点击注册按钮注册成功的话进行提示,提示后返回登录页面。
代码如下(示例):
uni.request({
url: '',
method: 'POST',
data: {
Username:this.account,
Password:this.password,
Email:this.email
},
success: res => {
},
fail: () => {
},
});
代码如下(示例):
uni.showToast({
title:"注册成功",
duration:2000,
success() {
}
});
代码如下(示例):
setTimeout(function () {
uni.navigateTo({
url: '../login/index',
});
}, 1000);
这里我们使用了定时器,原因是当你注册成功的时候开始执行成功回调内的代码,如果不加定时器的话,会出现注册成功提示还没有出现就进行了页面跳转,所以我们这个加了一个定时器,让跳转时间在特定的时间后执行,这样在跳转页面没有执行的这段时间内提示就可以显示了。
代码如下(示例):
methods: {
btnReg(){
uni.request({
url: '',
method: 'POST',
data: {
UserName:this.account,
Password:this.password,
Email:this.email
},
success: res => {
uni.showToast({
title:"注册成功",
duration:2000,
success() {
setTimeout(function () {
uni.navigateTo({
url: '../login/index',
});
}, 1000);
}
});
},
fail: () => {
},
});
}
}
代码如下(示例):
uni.request({
url: '',
method: 'GET',
data: {
username : this.account,
password : this.password
},
success: res => {
},
fail: () => {
},
});
代码如下(示例):
uni.setStorage({
key: 'username',
data: this.account,
success:function(){
console.log("存储成功!");
}
})
我之前写过一篇关于本地存储的文章,想要了解的可以去看一下,根据自己的需要来选择使用同步还是异步。
代码如下(示例):
methods: {
uni.request({
url: '',
method: 'GET',
data: {
username : this.account,
password : this.password
},
success: res => {
console.log(res);
if(res.code== 0){
uni.showToast({
icon: 'none',
title: '密码或用户名错误',
});
} else {
uni.showToast({
icon: 'none',
title: '登录成功',
});
uni.setStorage({
key: 'username',
data: this.account,
success:function(){
console.log("存储成功!");
}
})
uni.reLaunch({
url:'../index/index',
})
}
},
fail: () => {
},
});
}
里面有一个判断,这个判断是看看是否登录成功,登录失败就提示登录失败的信息,如果登录成功的话就提示登录成功并跳转到首页。
以上就是本章的全部内容,希望能够帮助到您。
文章浏览阅读4.2k次,点赞6次,收藏18次。Photon 是一个实时多人游戏开发框架,它是快速、精益和灵活的。 Photon服务器功能强大,能够满足一般的中小型网络游戏的需求,而且开发效率高,所以就称为了大多数开发者的首选。由于网上关于Photon联网的介绍内容比较少,现在小義就跟大家分享一下关于Photon的内容。_unity photon photoer
文章浏览阅读2.1k次。使用 requsets 发送 http请求不发送任何测试数据我们使用requests 提供给我们的一个测试接口地址用来测试post请求数据:# requests 提供的接口地址request_url = 'http://httpbin.org/post'# 返回的请求response = requests.post(url=request_url)print(response.tex..._python使用request发送opt接口请求
文章浏览阅读938次,点赞10次,收藏8次。本设计主要实现集人性化、高效率、便捷等优点于一身的教务管理系统,完成首页、公共管理(轮播图、公告栏)用户管理(管理员、学生用户、教师用户)系统内容(教务资讯、教务资讯分类)系统模块(选课评分、选课中心、选课信息、课程分类、上课信息、课程评价、教师评价、课程表、期末评分)等功能模块。系统通过浏览器与服务器进行通信,实现数据的交互与变更。只需通过一台电脑,动动手指就可以操作系统,实现数据通信管理。整个系统的设计过程都充分考虑了数据的安全、稳定及可靠等问题,而且操作过程简单。_基于ssm系统管理源码
文章浏览阅读7.1k次,点赞6次,收藏5次。在实际的应用中,策划提到了一个要求,图片和文本一起居中,在unity中文本简单的居中很容易实现,但是文字加图片确实让我不知所措,在经过大神的指导后,做出了以下的解决方案。将图片和文字放在一个节点下,在节点上加上组件Content Size Fitter和组件Horizontal Layout Group,这两个组件,原理就是让文字的文本框随着字数增加而增加长度,父节点的宽度是根据所有子节点的宽..._unity 组合居中
文章浏览阅读767次。本文档旨在帮助那些掌握机器学习基础知识的人从Google机器学习的最佳实践中获益。它提供了机器学习的风格,类似于Google C ++风格指南和其他流行的实用编程指南。如果您参加了机器学习课程,或者在机器学习模型上构建或工作,那么您就具备了阅读本文档的必要背景知识。 术语在我们关于有效机器学习的讨论中,将反复提出以下术语:实例:您想要做出预测的事情。例如,实例可能是您要将其分类为“..._谷歌应用系列机器学习实现最佳效果需要多少次唯一身份用户转化事件
文章浏览阅读693次,点赞14次,收藏18次。(4)排队时延:分组在经过网络传输时,要经过许多路由器,分组在进入路由器的时候要现在输入排列队列中等待处理,在路由器确定了转发接口后,还要在输出队列中排队等待转发,这就产生了排队时延。使用信道复用技术的主要目的是为了在有限的信道资源下,实现多个用户之间的通信,提高信道利用率,减少通信系统中的资源消耗和成本开销。构成原始报文的一个个分组,在各结点交换机上进行存储转发,相比报文交换,减少了转发时延,还可以避免过长的报文长时间占用链路,同时也有利于进行差错控制。各结点交换机在发送分组的同时,还缓存接收到的分组。_硕士研究生复试题 计算机网络
文章浏览阅读3.8k次。在windows环境中安装Opencv主要包含5个步骤,分别是安装Opencv SDK,配置包含路径,配置库目录,配置连接器和设置环境变量。1.1安装opencv下载和安装opencv SDK,直接在官网上下载opencv,这里我以4.1.0为例,下载完成后会得到opoencv-4.1.0-vc14_vc15.exe文件,便可以开始安装过程,所谓得安装就是将解压的一个过程,双击我们得到的opoencv-4.1.0-vc14_vc15.exe可执行文件,然后选择安装目录(解压目录)解压结束后我_vs2017 opencv sharp
文章浏览阅读6.5k次,点赞3次,收藏12次。Wakeupday设置为0,表示每天都执行;2“定时关机”是启动程序名字(可以任意设置)3设置设置自启目标程序,程序或脚本为。2.1重启计算机,连续点击。_wake up day
文章浏览阅读2.8k次,点赞3次,收藏16次。Pthread并行编程总结1. pthread_createpthread_create的效果一个简单的线程例子2. 线程数据共享3. Pthread “Hello world”3.1 一些准备3.2 pthread_join函数3.3 “Hello World”4. Pthread 其他基础 API4.1 pthread_exit( )4.2 pthread_..._pthread_create并行
文章浏览阅读1.2w次,点赞4次,收藏17次。方法一:PPT法打开PPT——插入目标图片——自行调整布局——点击“格式”——再点击”组合“。OK,你需要的拼接图片已完成。可选择保存为不同的图片格式,如.tif等。方法二:PS法用Ps打开图片,选择工具栏“矩形选框”——点击选择上方样式为“固定比例”——设宽、高为任意数值保证长宽比相同;分别框选每张图上你拼图的目标区域/内容;点击“图像“——”裁剪”;点击“图像“——”图像大小”——单位设置为厘米——“约束比例”——去掉“重定图像像素”的勾选——设置图片的宽度为4厘米;_手机拍出的sci图片300多kb放大到4英寸260dpi
文章浏览阅读1.2k次。
文章浏览阅读603次。支持所有的 View(AbsListView、RecyclerView、WebView....View) 和多层嵌套的视图结构支持自定义并且已经集成了很多炫酷的 Header 和 Footer (图).支持和ListView的同步滚动 和 RecyclerView、AppBarLayout、CoordinatorLayout 的嵌套滚动 NestedScrolling.支持在Android Stu_smartrefreshlayout 禁止上拉加载