uniapp小程序中的登录完整代码（兼容小程序和app）

前言

        伴随着互联网的快速发展，移动端应用领域也发生了翻天覆地的变化，随之而来的是各式各样的APP应用程序、轻应用、小程序等项目产品，人们的移动生活也变得更加丰富多彩！本文旨在帮助快速构建uniapp登录页面，仅提供参考价值。喜欢帮忙一键三联，谢谢！

正文

效果如下：

一、index.vue

1.布局代码：

采用小程序原生，结合u-view，

2.JS骨架代码

3.样式文件引入

<style src="./login.css">style>

二、main.js

import Vue from 'vue'
import App from './index'
 
 
const app = new Vue(App)
app.$mount()

三、login.css

.contentMain {
	height: 100%;
	background: #fff;
	overflow: hidden;
}
 
.loginPage {
	margin-top: 60px;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
}
 
.logingap {
	width: 100%;
	margin-top: 20px;
}
 
.section {
	height: 100rpx;
	line-height: 100rpx;
	border-bottom: 2rpx solid #eee;
	position: relative;
	font-size: 30rpx;
	color: #333;
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	align-items: center;
	/* padding-left: 24rpx; */
	padding: 0 24rpx;
}
 
.section__title {
	width: 150rpx!important;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
 
.content {
	width: 80%;
	text-align: center;
	font-size: 14px;
	margin-top: 20px;
	padding: 10px;
	border: 1px solid #eee;
	text-align: left;
	border-radius: 8px;
	color: rgba(0, 0, 0, 0.7);
	font-size: 12px;
}
 
.content i {
	width: 8rpx;
	height: 8rpx;
	background: #999;
	margin-right: 16rpx;
	position: relative;
	top: -6rpx;
	border-radius: 50%;
	display: inline-block;
}

四、main.json

总结

        本登录页面全部代码仅仅用于参考，为简单的密码登录，因项目无需获取用户信息和权限，不涉及小程序的授权登录！