微信小程序雲開發-登錄功能（賬號密碼登錄）

一、新建頁面

新建頁面loadByAccount

 

 二、代碼實現

 1、loadByAccount.wxml

<view>賬號</view>
<input type="text" placeholder="請輸入賬號" bindinput="getAccount"></input>
<view>密碼</view>
<input type="text" placeholder="請輸入密碼" bindinput="getPassword"></input>
<view class="btn">
<button type="primary" bindtap="loadByAccount">登錄</button>
</view>
<view class="tosign">
<view bindtap="toSign" >注冊</view>
</view>

2、loadByAccount.wxss

input{
  margin: 20rpx;
  padding-left: 10rpx;
  height: 80rpx;
  border: 1rpx solid #c3c3c3;
}
view{
  margin: 20rpx;
}
.btn{
  display: flex;
  margin-top: 50rpx;
}
.tosign{
  margin-top: 50rpx;
  text-align: center;
}

3、loadByAccount.js

//自定義變量，存儲用戶輸入的賬號
let account = ''
//自定義變量，存儲用戶輸入的密碼
let password = ''
Page({

  //點擊跳轉到注冊頁
  toSign(){
    wx.navigateTo({
      url: '/pages/sign/sign',
    })
  },

  //獲取用戶輸入的賬號、密碼
  getAccount(e){
    console.log("用戶輸入的賬號",e.detail.value);
    account = e.detail.value
  },
  getPassword(e){
    console.log("用戶輸入的密碼",e.detail.value);
    password = e.detail.value
  },

  //登錄功能
  loadByAccount(){
    //校驗賬號
    if(account.length<4){
      wx.showToast({
        title: '賬號至少4位',
        icon:"none"
      })
      return
    }
    //登錄功能的實現
    wx.cloud.database().collection("users")
    .where({
      Account:account
    })
    .get({})
    .then(res=>{
      console.log("獲取賬號成功",res);
      //校驗密碼長度
      if(password.length<4){
        wx.showToast({
          title: '密碼至少4位',
          icon:"none"
        })
        return
      }
      //校驗密碼是否等於數據庫中的密碼
      if(password==res.data[0].Password){
        console.log("登錄成功",res);
        //顯示登錄成功提示
        wx.showToast({
          title: '登錄成功',
          icon:"success",
          duration:2000,
          //提示2秒后自動跳轉到首頁
          success:function(){
            setTimeout(function(){
              wx.switchTab({
              url: '/pages/index/index',
              }) 
            },2000)
          }
        })
      }else{
        console.log("密碼不正確，登錄失敗");
        wx.showToast({
          title: '密碼不正確',
          icon:"none"
        })
      }
    })
    .catch(err=>{
      console.log("獲取賬號失敗",err);
      wx.showToast({
        title: '賬號不存在',
        icon:"none"
      })
    })
  },
})

 

三、效果展示