一、新建页面
新建页面loadByAccount
二、代码实现
1、loadByAccount.wxml
1 <view>账号</view> 2 <input type="text" placeholder="请输入账号" bindinput="getAccount"></input> 3 <view>密码</view> 4 <input type="text" placeholder="请输入密码" bindinput="getPassword"></input> 5 <view class="btn"> 6 <button type="primary" bindtap="loadByAccount">登录</button> 7 </view> 8 <view class="tosign"> 9 <view bindtap="toSign" >注册</view> 10 </view>
2、loadByAccount.wxss
1 input{ 2 margin: 20rpx; 3 padding-left: 10rpx; 4 height: 80rpx; 5 border: 1rpx solid #c3c3c3; 6 } 7 view{ 8 margin: 20rpx; 9 } 10 .btn{ 11 display: flex; 12 margin-top: 50rpx; 13 } 14 .tosign{ 15 margin-top: 50rpx; 16 text-align: center; 17 }
3、loadByAccount.js
1 //自定义变量,存储用户输入的账号 2 let account = \'\' 3 //自定义变量,存储用户输入的密码 4 let password = \'\' 5 Page({ 6 7 //点击跳转到注册页 8 toSign(){ 9 wx.navigateTo({ 10 url: \'/pages/sign/sign\', 11 }) 12 }, 13 14 //获取用户输入的账号、密码 15 getAccount(e){ 16 console.log("用户输入的账号",e.detail.value); 17 account = e.detail.value 18 }, 19 getPassword(e){ 20 console.log("用户输入的密码",e.detail.value); 21 password = e.detail.value 22 }, 23 24 //登录功能 25 loadByAccount(){ 26 //校验账号 27 if(account.length<4){ 28 wx.showToast({ 29 title: \'账号至少4位\', 30 icon:"none" 31 }) 32 return 33 } 34 //登录功能的实现 35 wx.cloud.database().collection("users") 36 .where({ 37 Account:account 38 }) 39 .get({}) 40 .then(res=>{ 41 console.log("获取账号成功",res); 42 //校验密码长度 43 if(password.length<4){ 44 wx.showToast({ 45 title: \'密码至少4位\', 46 icon:"none" 47 }) 48 return 49 } 50 //校验密码是否等于数据库中的密码 51 if(password==res.data[0].Password){ 52 console.log("登录成功",res); 53 //显示登录成功提示 54 wx.showToast({ 55 title: \'登录成功\', 56 icon:"success", 57 duration:2000, 58 //提示2秒后自动跳转到首页 59 success:function(){ 60 setTimeout(function(){ 61 wx.switchTab({ 62 url: \'/pages/index/index\', 63 }) 64 },2000) 65 } 66 }) 67 }else{ 68 console.log("密码不正确,登录失败"); 69 wx.showToast({ 70 title: \'密码不正确\', 71 icon:"none" 72 }) 73 } 74 }) 75 .catch(err=>{ 76 console.log("获取账号失败",err); 77 wx.showToast({ 78 title: \'账号不存在\', 79 icon:"none" 80 }) 81 }) 82 }, 83 })
三、效果展示