怎么用css实现微信小程序简洁登录页面

本篇内容介绍了“怎么用CSS实现微信小程序简洁登录页面”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

1.上图

2.用户不存在

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>

2login.css

.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;}.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;}.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;}.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;}

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            })          }        }      })    }  },})

“怎么用css实现微信小程序简洁登录页面”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！