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

前言

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

正文

效果如下：

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

一、index.vue

1.布局代码：

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

账号密码

尔嵘

申请获取以下权限

获得你的公开信息(昵称，头像等)

登录即可对设备进行管理，查看实时数据，报警数据，历史数据等完整功能

2.JS骨架代码

	export default {
		data() {
			return {
				dataForm: {
					username: '',
					password: '',
				}
			};
		},

		methods: {

			//表单校验
			validateForm() {
				let _this = this;
				if (!_this.dataForm.username) {
					_this.$showToast('账户不能为空', 'none');
					return false;
				}
				if (!_this.dataForm.password) {
					_this.$showToast('密码不能为空', 'none');
					return false;
				}
				return true;
			},

			//确定
			handleSubmit() {
				let _this = this;
				if (_this.validateForm()) {
					_this.$showLoading();
					_this.$ajaxPost('/login_ex', _this.$global.jsonType, _this
						.dataForm,
						function({
							data: res
						}) {
							_this.$hideLoading();
							if (res.code == 0) {
								_this.$global.token = res.data.token;
								_this.$showToast(res.msg, 'success');
								//缓存信息
								uni.setStorageSync("isLogoutSmartGf", '0');
								uni.setStorageSync('usernameElectric', _this.dataForm.username);
								uni.setStorageSync('passwordElectric', _this.dataForm.password);
								uni.setStorageSync('tokenGf', _this.$global.token);
								uni.setStorageSync('__DC_STAT_UUID', '112233');
								_this.$ajaxGet('/sys/user/info', _this.$global.ContentType, {}, function({
									data: res
								}) {
									_this.$global.userInfo = res.data;
									setTimeout(function() {
										_this.$switchTab('/pages/tabBar/index/index');
									}, 200);
								}, (error1) => {
									console.log(error1);
									_this.$showToast(error1.errMsg, "none");
									return false;
								});
							} else {
								_this.$showToast(res.msg, 'none');
								return false;
							}
						}, (error) => {
							console.log(error);
							_this.$hideLoading();
							_this.$showToast(error.errMsg, "none");
							return false;
						});
				}
			}
		},

		onShow() {
			let _this = this;
			if (uni.getStorageSync('usernameElectric') && uni.getStorageSync('passwordElectric')) {
				_this.dataForm.username = uni.getStorageSync('usernameElectric');
				_this.dataForm.password = uni.getStorageSync('passwordElectric');
				if (uni.getStorageSync("isLogoutSmartGf")) {
					if (uni.getStorageSync("isLogoutSmartGf") == '0') {
						_this.$showLoading();
						_this.$ajaxPost('/login_ex', _this.$global.jsonType, _this.dataForm, function({
							data: res
						}) {
							_this.$hideLoading();
							if (res.code == 0) {
								_this.$global.token = res.data.token;
								uni.setStorageSync('tokenGf', _this.$global.token);
								_this.$ajaxGet('/sys/user/info', _this.$global.ContentType, {}, function({
									data: res
								}) {
									_this.$global.userInfo = res.data;
									setTimeout(function() {
										_this.$switchTab('/pages/tabBar/index/index');
									}, 200);
								}, (error1) => {
									console.log(error1);
									_this.$showToast(error1.errMsg, "none");
									return false
								});
							} else {
								_this.$showModal('', false, res.msg);
								return false;
							}
						}, (error) => {
							console.log(error);
							_this.$hideLoading();
							_this.$showToast(error.errMsg, "none");
							return false
						});
					}
				}
			}
			_this.$setTitle('尔嵘');
		}
	};

3.样式文件引入

二、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;
}