【uni-app】使用uni-app实现简单的登录注册功能

原创

萝卜头不吃萝卜头

修改于 2023-09-27 18:09:45

1.8K0

修改于 2023-09-27 18:09:45

文章被收录于专栏：前端开发uni-app前端开发uni-app

前言

大家好，今天和大家分享一下如何在uni-app中实现简单的登录注册功能。

首先你需要掌握一下知识点：

1.网络请求 uni.request

2.页面跳转，页面传参 uni.navigateTo

3.本地缓存 uni.setStorageSync, uni.getStorageSync

我们要使用到登录和注册接口，所以要知道如何进行网络请求。

因为还需要进行注册，所以要进行跳转页面，跳转到注册页面所以要使用到页面跳转。

本地缓存就是当你登录之后要把你当前这个账号的用户信息进行存储，存储到本地，所以要使用本地存储。

下面我们就来看看具体的实现流程吧！

一、页面布局

这是登录页面的基本布局，有两个输入框，一个是账户，一个是密码，下面是一个登录按钮，按钮下面是a链接，点击注册账号就会跳转到注册页面进行账号注册。

下面是注册页面的基本布局，有三个输入框，分别是账号，密码和邮箱，如果接口的请求参数不是邮箱的话可以换成其他的，输入框下面是注册按钮，点击注册按钮注册成功的话进行提示，提示后返回登录页面。

二、注册页面

1.注册接口使用

代码如下（示例）：

uni.request({
	url: '',
	method: 'POST',
	data: {
	Username:this.account,
	Password:this.password,
	Email:this.email
	},
	success: res => {
	
	},
	fail: () => {
	
	},
});

2.注册成功提示

代码如下（示例）：

uni.showToast({
	title:"注册成功",
	duration:2000,
	success() {
							
	}
});

3.注册成功页面跳转

代码如下（示例）：

setTimeout(function () {
	uni.navigateTo({
	 url: '../login/index',
	});
}, 1000);

这里我们使用了定时器，原因是当你注册成功的时候开始执行成功回调内的代码，如果不加定时器的话，会出现注册成功提示还没有出现就进行了页面跳转，所以我们这个加了一个定时器，让跳转时间在特定的时间后执行，这样在跳转页面没有执行的这段时间内提示就可以显示了。

4.完整代码

代码如下（示例）：

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: () => {
					
			},
		});
	}
}

三、登录页面

1.登录接口使用

代码如下（示例）：

uni.request({
	url: '',
	method: 'GET',
	data: {
		username : this.account,
		password : this.password
	},
	success: res => {
					
	},
	fail: () => {
						
	},
	});

2.本地存储使用

代码如下（示例）：

uni.setStorage({
	key: 'username',
	data: this.account,
	success:function(){
		console.log("存储成功！");
	}
})

我之前写过一篇关于本地存储的文章，想要了解的可以去看一下，根据自己的需要来选择使用同步还是异步。

3.完整代码

代码如下（示例）：

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: () => {
						
		},
	});
}

里面有一个判断，这个判断是看看是否登录成功，登录失败就提示登录失败的信息，如果登录成功的话就提示登录成功并跳转到首页。