微信小程序简洁登录页面（附源码）
文章目录
- 微信小程序简洁登录页面（附源码）
- 1. 群聊（开源项目以及技术交流）
- 2.看效果
- 3.用户不存在
- 4.上代码
- 4.1login.wxml
- 4.2login.css
- 4.3login.js
- 5.总结
1. 群聊（开源项目以及技术交流）
2.看效果
3.用户不存在
4.上代码
4.1login.wxml
<view class="v1" style="height:{{clientHeight?clientHeight+'px':'auto'}}"> <!-- v2父容器 子view使用绝对布局 --> <view class="v2"> <view class="dltext" style="width: 232rpx; height: 92rpx; display: block; box-sizing: border-box; left: 0rpx; top: -2rpx">登录</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> 4.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; font-family: Helvetica; color: #000000; 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%; height: 100%; border-radius: 5rpx;}4.3login.js
//index.js//获取应用实例const app = getApp() let username='' let password=''Page({ data: { username: '', password: '', clientHeight:'' }, onLoad(){ var that=this wx.getSystemInfo({ 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 }) } } }) } },}) 5.总结
小程序的页面的简洁可以给用户带来很好的体验。
当用户在输入信息后逻辑层通过for循环来遍历数据库的中数据。
好了，今天的分享就到这里了。点个赞吧
