uni-app登录页面实例

成品样图1

 登录页面设计思路

uniapp的登录页设计思路，设计一个用户名输入框，一个密码输入框，一个提交按钮，使用form表单提交。提交后，后台验证用户名和密码，如果正确就返回特定值，uniapp根据结果跳转到另一页面，不正确返回另一个值，并弹出窗口显示密码用户名错误。
代码如下：

<template>
	<view class="content">
		<form @submit="formSubmit">
			<view class="avatorWrapper">
				<view class="avator">
					<!-- <image class="img" src="../../static/logo.png" mode="widthFix"></image> -->
					<image class="img" src="../../static/logo.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="form">
				<view class="inputWrapper">
					<input class="input" name="yonghuming" type="text" value="" placeholder="请输入用户名" @blur="spggBlur" />

				</view>
				<view class="inputWrapper">
					<input class="input" name="mima" type="password" value="" placeholder="请输入密码" @blur="spggBlur1" />
				</view>
			</view>
			<button form-type="submit" class="loginBtn">确认登录</button>
		</form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				yonghuming: "",
				mima: "",
			}
		},
		onLoad() {

		},
		methods: {
			/**发布提交 */
			formSubmit(e) {
				var that = this;
				var yonghuming1 = e.detail.value.yonghuming;
				var mima1 = e.detail.value.mima;

				uni.request({
					url: 'https://换成你自己的域名接口',

					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					method: 'POST',
					data: {
						yonghuming: yonghuming1,
						mima: mima1,
					},
					success: (res) => {
						if (res.data == "5") {

							wx.showToast({
								title: '用户名或密码错误',
								icon: 'none',
								duration: 500
							});

						} else {

							uni.navigateTo({
								url: "/pages/index1/index1",
							})

						}
					}
				})
			}

		}
	}
</script>

<style>
	.content {
		background: skyblue;
		width: 100vw;
		height: calc(100vh - 44px);
		overflow: hidden;//这个要加不然后面的蓝色部分就没有了
		
	}

	.avatorWrapper {
		/* height: 20vh;
		width: 100vw; */
		position: relative;
		width: 1000px;
		height: 1000px;
		border-radius: 50%;
		margin-left:calc(50% - 500px);
		margin-top: -800px; 
		display: flex;
		justify-content: center;
		align-items: flex-end;
		background-color: pink;
		
	}

	.avator {
		width: 200rpx;
		height: 200rpx;
		overflow: hidden;
		margin-bottom: 20rpx;
	}

	.avator .img {
		width: 100%
	}

	.form {
		padding: 0 100rpx;
		margin-top: 80px;
		background-color: yellowgreen;
	}

	.inputWrapper {
		width: 100%;
		height: 80rpx;
		background: white;
		border-radius: 20px;
		box-sizing: border-box;
		padding: 0 20px;
		margin-top: 25px;
		background-color: red;
	}

	.inputWrapper .input {
		width: 100%;
		height: 100%;
		text-align: center;
		font-size: 15px;
	}

	.loginBtn {
		width: 50%;
		height: 80rpx;
		background: #77B307;
		border-radius: 50rpx;
		margin-top: 50px;
		display: flex;
		justify-content: center;
		align-items: center;

	}

</style>

成品样图2

 代码

<template>
	<view>
		<view class="content">
			<form @submit="formSubmit">
				<view class="avatorWrapper">
					<view class="avator">
						<!-- <image class="img" src="../../static/logo.png" mode="widthFix"></image> -->
						<image class="img" src="../../static/logo.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="form">
					<view class="inputWrapper">
						<input class="input" name="yonghuming" type="text" value="" placeholder="请输入用户名"
							@blur="spggBlur" />

					</view>
					<view class="inputWrapper">
						<input class="input" name="mima" type="password" value="" placeholder="请输入密码"
							@blur="spggBlur1" />
					</view>
				</view>
				<button form-type="submit" class="loginBtn" @click="submitLogin">确认登录</button>
			</form>
		</view>

		<!-- 弹出框 -->
		<view class="modal" v-show="showModal">
			<view class="modal-content">
				<text>提交信息成功</text>
				<button class="close" @click="closeModal" style="width: 100px;">关 闭</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				yonghuming: "",
				mima: "",
				showModal: false,
			}
		},
		onLoad() {

		},
		methods: {
			submitLogin() {
				this.showModal = true;
			},
			closeModal() {
				this.showModal = false;
			},
			/**发布提交 */
			formSubmit(e) {
				var that = this;
				var yonghuming1 = e.detail.value.yonghuming;
				var mima1 = e.detail.value.mima;

				uni.request({
					url: 'https://换成你自己的域名接口',

					header: {
						'content-type': 'application/x-www-form-urlencoded'
					},
					method: 'POST',
					data: {
						yonghuming: yonghuming1,
						mima: mima1,
					},
					success: (res) => {
						if (res.data == "5") {

							wx.showToast({
								title: '用户名或密码错误',
								icon: 'none',
								duration: 500
							});

						} else {

							uni.navigateTo({
								url: "/pages/index1/index1",
							})

						}
					}
				})
			}

		}
	}
</script>

<style>
	.content {
		background: skyblue;
		width: 100vw;
		height: calc(100vh - 44px);
		overflow: hidden; //这个要加不然后面的蓝色部分就没有了

	}

	.avatorWrapper {
		/* height: 20vh;
		width: 100vw; */
		position: relative;
		width: 1000px;
		height: 1000px;
		border-radius: 50%;
		margin-left: calc(50% - 500px);
		margin-top: -800px;
		display: flex;
		justify-content: center;
		align-items: flex-end;
		background-color: pink;

	}

	.avator {
		width: 200rpx;
		height: 200rpx;
		overflow: hidden;
		margin-bottom: 20rpx;
	}

	.avator .img {
		width: 100%
	}

	.form {
		padding: 0 100rpx;
		margin-top: 80px;
	}

	.inputWrapper {
		width: 100%;
		height: 80rpx;
		background: white;
		border-radius: 20px;
		box-sizing: border-box;
		padding: 0 20px;
		margin-top: 25px;
	}

	.inputWrapper .input {
		width: 100%;
		height: 100%;
		text-align: center;
		font-size: 15px;
	}

	.loginBtn {
		width: 50%;
		height: 80rpx;
		background: #77B307;
		border-radius: 50rpx;
		margin-top: 50px;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.modal-content {
		width: 200px;
		height: 200px;
		line-height: 100px;
		padding: 20px;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

</style>