⼩程序简洁登录页⾯的实现（附源码）⽬录
1.上图
2.⽤户不存在
3.上代码
1.上图
2.⽤户不存在
3.上代码
3.1login.wxml
<view class="v1" >
<!-- v2⽗容器⼦view使⽤绝对布局 -->
<view class="v2">
<view class="dltext" >登录</view>    <!-- ⼿机号 -->
<view class="phoneCs">
<!-- <image src="/images/zhang.png" class="ph"></image> -->
<input placeholder="请输⼊账号" type="number" bindinput="content" />
</view>
<!-- 密码 -->
<view class=passwordCs">
<!-- <image src="/images/mi.png" class="ps"></image> -->
<input placeholder="请输⼊密码" type="password" bindinput="password" />
</view>
<!-- 登录按钮 -->
<view class="denglu">
<button class="btn-dl" type="primary" bindtap="goadmin">登录</button>
</view>
</view>
</view>
3.2login.css
/* pages/login/login.wxss *//* 最⼤的⽗元素 */
.v1{
display: block;
position:absolute;
width: 100%;
background-color: rgb(250, 248, 248);
}
/* ⽩⾊区域 */
.v1 .v2{
position: relative;
margin-top: 150rpx;
left: 100rpx;
width: 545rpx;
height: 600rpx;
background-color: rgb(250, 248, 248);
写文章的小程序border-radius: 50rpx;
}
/* ⽩⾊区域内的登录⽂本 */
.v1 .v2 .dltext{
margin-top: 50rpx;
position: absolute;
margin-left:50rpx;
width: 150rpx;
height: 100rpx;
font-size: 60rpx;
line-height: 100rpx;
letter-spacing: 2rpx;
}
/* ⼿机图⽚+输⼊框+下划线的⽗容器view */
.v1 .v2 .phoneCs{
margin-top: 200rpx;
margin-left: 25rpx;
position: absolute;
display: flex;
width:480rpx ;
height: 90rpx ;
background-color: white;
}
/
* ⼿机图标 */
.v1 .v2 .phoneCs .ph{
margin-top: 5rpx;
margin-left: 30rpx;
width: 55rpx;
height: 55rpx;
}
/* ⼿机号输⼊框 */
.v1 .v2 .phoneCs input{
width: 400rpx;
font-size: 30rpx ;
margin-top: 25rpx;
margin-left: 30rpx;
}
/* 密码图标+输⼊框+⼩眼睛图标+下划线⽗容器view */ .v1 .v2 .passwordCs{
margin-top: 350rpx;
margin-left: 25rpx;
position: absolute;
display: flex;
width:480rpx ;
height: 90rpx ;
background-color: white;
}
/* 密码图标 */
.v1 .v2 .passwordCs .ps{
margin-top: 5rpx;
margin-left: 30rpx;
width: 55rpx;
height: 55rpx;
}
/* 眼睛图标*/
.v1 .v2 .passwordCs .eye{
margin-top: 5rpx;
margin-left: 65rpx;
width: 55rpx;
height: 55rpx;
}
/* 密码输⼊框 */
.v1 .v2 .passwordCs input{
width: 400rpx;
font-size: 30rpx ;
margin-top: 25rpx;
margin-left: 30rpx;
}
/
* 登录按钮容器view */
.v1 .v2 .denglu{
width: 480rpx;
height: 80rpx;
position: absolute;
margin-top:515rpx;
margin-left:25rpx;
}
/* 登录按钮 */
.v1 .v2 .denglu button{
padding: 0rpx;
line-height: 70rpx;
font-size: 30rpx;
width: 100%;
border-radius: 5rpx;
}
3.3login.js
//index.js
//获取应⽤实例
const app = getApp()
let username=''
let password=''
Page({
data: {
username: '',
password: '',
clientHeight:''
},
onLoad(){
var that=this
success: function (res) {
console.log(res.windowHeight)
that.setData({
clientHeight:res.windowHeight
});
}
})
},
//协议
goxieyi(){
wx.navigateTo({
url: '/pages/oppoint/oppoint',
})
},
//获取输⼊款内容
content(e){
username=e.detail.value
},
password(e){
password=e.detail.value
},
//登录事件
goadmin(){
let flag = false  //表⽰账户是否存在,false为初始值
if(username=='')
{
wx.showToast({
icon:'none',
title: '账号不能为空',
})
}else if(password==''){
wx.showToast({
icon:'none',
title: '密码不能为空',
})
}else{
wx.cloud.database().collection('adminShop')
.get({
success:(res)=>{
console.log(res.data)
let admin=res.data
for (let i = 0; i < admin.length; i++) {  //遍历数据库对象集合            if (username === admin[i].username) { //账户已存在
flag=true;
if (password !== admin[i].password) {  //判断密码正确与否                wx.showToast({  //显⽰密码错误信息
title: '密码错误！！',
icon: 'error',
duration: 2500
});
break;
} else {
wx.showToast({  //显⽰登录成功信息
title: '登陆成功！！',
icon: 'success',
duration: 2500
flag=true;
wx.setStorageSync('admin', password)
wx.navigateTo({
url: '/pages/admin/admin',
})
break;
}
}
};
if(flag==false)//遍历完数据后发现没有该账户
{
wx.showToast({
title: '该⽤户不存在',
icon: 'error',
duration: 2500
})
}
}
})
}
},
})
到此这篇关于⼩程序简洁登录页⾯(附源码)的⽂章就介绍到这了，更多相关⼩程序简洁登录页⾯内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。