2020-11-20

uni-app开发安卓App登录功能页面实现

本代码只实现登录功能，没有注册功能，一般适合组织内部人员使用，向后台获取用户账号和密码，获取匹配成功则登录成功，先说一下大概思路流程：

下面分别是template、script、style板块的代码：
template:

<template>
	<view class="bg">
		<view class="logoBox">
			<!-- logo图标位置 -->
		</view>
		<view class="loginBox">
			<!-- 账号输入 -->
			<view class="wrap">
				<span class="icon-user">
					<image src="../../static/images/user.png" mode=""></image>
				</span>
				<input type="text" v-model="username" placeholder="请输入账号" class="inputBox" />
			</view>
			<!-- 密码输入 -->
			<view class="wrap">
				<span class="icon-pwd">
					<image src="../../static/images/pwd.png" mode=""></image>
				</span>
				<input type="text" v-model="password" password="true" placeholder="请输入密码" class="inputBox" />
			</view>
			<!-- 记住用户账号密码操作 -->
			<view class="rememberMe">
				<checkbox :checked="isChecked" @click="isChecked = !isChecked" /><text>记住我</text>
			</view>
			<!-- <button size="medium" :loading="isLoading" type="primary" @click="login">登录</button> -->
			<view class="btn" @click="login">登录</view>
		</view>
	</view>
</template>

script:

<script>
	export default {
		data() {
			return {
				username: '',
				password: '',
				isChecked: true
			}
		},
		methods: {
			login() {
				const _this = this;
				/* 后台graphQLschema结构 */
				const GraphQL4Login = `query login($params: User){
											login(params: $params)
										}`;
				// console.log(_this.isChecked);
				if (_this.username === '' || _this.password === '') {
					uni.showToast({
						title: '账号或密码不能为空',
						icon: 'none',
						duration: 2000
					});
					return;
				}else{
					/* 请求后台接口数据*/
					uni.request({
						url: '',//填写自己需要对接的接口
						method: 'POST',
						data: JSON.stringify({
							// operationName:'',
							query:GraphQL4Login,
							variables:{
								"params":{
									"username":_this.username,
									"password":_this.password,
								}
							}
						}),
						header:{
							'Cache-Control': 'no-store',
							},
						dataType:'json',
						success:({
							data:{
								data: {
									login,
								}
							}
						})  => {
							/* 接口数据请求成功，判断返回login的布尔值 */
							if( login === true ){/* 返回true说明用户存在 */
								if (_this.isChecked === true) {/* 进而判断用户是否勾选了”记住我“，是就执行本地存储，不是反之 */
									uni.setStorage({
										key: 'userinfo',
										data: {
											'username': _this.username,
											'password': _this.password
										}
									})
								}
								uni.showToast({
									title: '登录成功',
									icon: 'success',
									duration: 2000,
									mask:true
								})
								uni.navigateTo({
									url: '../index/index'
								})
							}else{
								uni.showToast({
									icon: 'none',
									title: '用户不存在或已变更',
									duration: 2000,
									mask:true
								})
							}
						},
						fail(e) {
							// console.log(e);
							uni.showToast({
								title: '用户不存在或已变更',
								icon:'none',
								duration: 2000,
								mask:true
							})
						} 
					})
				}
			}
		},
		/* 页面加载时获取本地缓存，注意这里最好不要使用箭头函数 */
		onLoad: function() {
			const that = this;
			/* 获取本地缓存 */
			uni.getStorage({
				key: 'userinfo',
				success: (res) => {
					console.log(res.data);
					/* 把缓存值回调给input */
					that.username = res.data.username;
					that.password = res.data.password;
					/* 执行登录操作login() */
					that.login();
				}
			})
		}

	}
</script>

style:

<style scoped>
	.bg {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: #FFFFFF;
	}

	.logoBox {
		width: 213rpx;
		height: 176rpx;
		margin-top: 260rpx;
		background: url(../../static/images/logo.png) no-repeat;
		background-size: 100% 100%;
	}

	.loginBox {
		width: 500rpx;
		height: 400rpx;
		margin: auto;
		border-radius: 30rpx;
		padding: 30rpx;
		margin-top: 40rpx;
		/* background-color: #007AFF; */
	}

	.wrap {
		line-height: 74rpx;
		padding: 20rpx 0;
		border-bottom: 1px solid #999999;
	}

	.wrap:nth-of-type(2) {
		margin-top: 100rpx;
	}

	.icon-user,
	.icon-pwd {
		width: 42rpx;
		height: 45rpx;
		float: left;
		margin-right: 30rpx;
		/* background: #FFFFFF; */
	}

	.icon-user>image,
	.icon-pwd>image {
		width: 100%;
		height: 100%;
	}

	.rememberMe {
		text-align: right;
		margin: 20rpx 0 40rpx;
	}

	.rememberMe>text {
		color: #999999;
	}

	.btn {
		width: 420rpx;
		line-height: 100rpx;
		margin: 0 auto;
		border-radius: 210rpx;
		background: #3f74e2;
		color: #FFFFFF;
		text-align: center;
	}
</style>

ok~
注意：页面加载的生命周期onLoad不要使用箭头函数，箭头函数对this的指向严格要求，一开始用了频频获取不到this，this一直指向undefined~