微信小程序云开发实现登录功能

使用云开发数据库实现登录功能，多的不说了直接看代码

登录功能代码段
WXML代码

<view class="waikuang">
  <view class="neikuang">
    <view class="shurukuang">
      <text>账号</text>
      <input type="text" value="" placeholder="账号" bindinput="GetZhanghao"/>
    </view>
    <view class="shurukuang">
      <text>密码</text>
      <input type="text" value="" password="true" placeholder="密码" bindinput="GetMima"/>
    </view>
  </view>
  <view class="anniu" bindtap="GoDenglu">
    <text>登录</text>
  </view>
</view>

WXSS代码

page {
  width: 100%;
  height: 100%;
  direction: ltr;
}
.waikuang {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.neikuang {
  width: 90%;
  display: flex;
  flex-direction: column;
  background-color: white;
}
.shurukuang {
  width: 100%;
  height: 84rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.shurukuang text {
  width: 20%;
  font-size: 32rpx;
  margin-left: 3%;
}
.shurukuang input {
  width: 74%;
  font-size: 32rpx;
  border: 2rpx solid rgb(207, 206, 206);
}

.anniu {
  width: 90%;
  height: 64rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(86, 76, 218);
  color: white;
  font-size: 32rpx;
  font-weight: 700;
  border-radius: 32rpx;
  margin-top: 45rpx;
}

主要部分就在JS代码部分，先获取输入的值，再判断数据是否正确或者是否注册过。

const db = wx.cloud.database()
Page({
  data: {
    zhanghao: '',
    mima: '',
  },
  GetZhanghao: function(e) {
    this.setData({
      zhanghao: e.detail.value
    })
  },
  GetMima: function(e) {
    this.setData({
      mima: e.detail.value
    })
  },

  // 登录按钮
  // 1，判断输入框是否为空
  // 2，用输入的帐号来查询数据，判断账号是否注册过
  // 3，查询成功获取数据，比较输入的密码和注册时输入的密码是否一致
  // 4，密码一致进入系统，密码不一致提示密码有误的提示框
  GoDenglu: function(e) {
    if(this.data.zhanghao == '') {
      wx.showToast({
        title: '请输入账号！',
        icon: 'none'
      })
      return
    }
    if(this.data.mima == '') {
      wx.showToast({
        title: '请输入密码！',
        icon: 'none'
      })
      return
    }
    // 开始使用云开发数据库
    db.collection('user').where({
      zhanghao: this.data.zhanghao
    }).get().then(res => {
      if(res.data.length != 0) {
        if(res.data[0].mima == this.data.mima) {
          wx.navigateTo({
            url: '/pages/index/index',
          })
        }else {
          wx.showToast({
            title: '密码有误！',
            icon: 'none'
          })
        }
      }else {
        wx.showToast({
          title: '账号未注册！',
          icon: 'none'
        })
      }
    })
  }
})