前言
伴随着互联网的快速发展，移动端应用领域也发生了翻天覆地的变化，随之而来的是各式各样的APP应用程序、轻应用、小程序等项目产品，人们的移动生活也变得更加丰富多彩！本文旨在帮助快速构建uniapp登录页面，仅提供参考价值。喜欢帮忙一键三联，谢谢！
正文
效果如下：
一、index.vue
1.布局代码：
采用小程序原生，结合u-view，文章来源：https://www.toymoban.com/news/detail-763328.html
<template>
<div class="contentMain">
<div class="loginPage">
<div style="width: 100%; text-align: center;">
<!-- <image src="../../static/images/lrxly.jpg" mode="widthFix"
style="width: 100px; height: 100px;"> </image> -->
<image src="../../static/images/erRong.png" mode="widthFix"
style="width: 100px; height: 100px;"> </image>
</div>
<div class="logingap">
<view class="section">
<view class="section__title" style="font-size: 16px;">
<u-icon name="account-fill" size="28" color="#2979ff" style="margin-right: 10rpx;"></u-icon> 账号
</view>
<u-input type="text" placeholder="请输入账号" border="none"
style="font-size: 16px; width: calc(100% - 150rpx - 24rpx - 24rpx);" v-model="dataForm.username"
height="100" :placeholder-style="{ lineHeight: '100rpx', color: '#c0c4cc' }" />
</view>
<div class="section">
<view class="section__title" style="font-size: 16px;">
<u-icon name="lock-fill" size="28" color="#2979ff" style="margin-right: 10rpx;"></u-icon> 密码
</view>
<u-input type="password" placeholder="请输入密码" border="none"
style="font-size: 16px; width: calc(100% - 150rpx - 24rpx - 24rpx);" v-model="dataForm.password"
height="100" :placeholder-style="{ lineHeight: '100rpx', color: '#c0c4cc' }" />
</div>
</div> <button @click="handleSubmit" style="margin-top: 20px;"
:class="dataForm.username != '' && dataForm.password != '' ? 'btnfillStyle' : ''"
class="btnStyle">确定</button>
<!-- #ifdef MP-WEIXIN -->
<div class="content">
<p style="font-size: 16px; font-weight: bolder; margin-bottom: 5px;">尔嵘</p>
<p> <i></i> 申请获取以下权限 </p>
<p> <i></i> 获得你的公开信息(昵称，头像等) </p>
<P> <i></i> 登录即可对设备进行管理，查看实时数据，报警数据，历史数据等完整功能 </P>
</div>
<!-- #endif -->
</div>
</div>
</template>2.JS骨架代码
<script>
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('尔嵘');
}
};
</script>
3.样式文件引入
<style src="../../global/global.css"></style>
<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
总结
本登录页面全部代码仅仅用于参考，为简单的密码登录，因项目无需获取用户信息和权限，不涉及小程序的授权登录！文章来源地址https://www.toymoban.com/news/detail-763328.html
到了这里，关于uniapp小程序中的登录完整代码（兼容小程序和app）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
