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