微信小程序云开发——实现 线上注册，登录的逻辑，并保存账号到云数据库（ 三 ）：登录

---

要有遥不可及的梦想，也要有脚踏实地的本事。----------- Grapefruit.Banuit Gang(香柚帮)

---

 继上一章节柚子完成了注册的逻辑代码，这一章节讲解登录逻辑代码：

下面是柚子写的登录页面，仅供参考：

wxml:

<view class="container">
  <image src="https://7069-pintu-game-52d2a-1301643624.tcb.qcloud.la/pintu_icon/login_bg.jpg"></image>
</view>
<view class="login_box">
  <view class="section">
    <input placeholder="请输入用户名 / 手机号" value='{{mobile}}' placeholder-class="color" bindblur='mobile' />
    <image src="https://7069-pintu-game-52d2a-1301643624.tcb.qcloud.la/pintu_icon/username.png"></image>
  </view>
  <view class="section">
    <input password='true' placeholder="请输入密码" value='{{pass}}' placeholder-class="color" bindblur='pass' />
    <image src="https://7069-pintu-game-52d2a-1301643624.tcb.qcloud.la/pintu_icon/pass.png"></image>
  </view>
  <checkbox-group bindchange="checkboxChange">
    <label class="checkbox" wx:for="{{items}}" wx:key='this'>
      <checkbox value="{{item.name}}" checked="{{item.checked}}" />{{item.value}}
    </label>
  </checkbox-group>
  <button class="login" type="primary" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">登录</button>
  <button class="register" type="warn" bindtap="register">没有账号，先注册</button>
</view>

wxss:

/* pages/login/login.wxss */
.container {
  position: absolute;
  width: 100%;
  height: 100%;
}
.container image {
  width: 100%;
  height: 100%;
}
.login_box{
  width: 90%;
  position: absolute;
  top: 15%;
  left: 5%;
}
.section{
  width: 100%;
  border-bottom: 4rpx solid #FFF;
  margin-top: 40rpx;
  position: relative;
}
.section input{
  height: 100rpx;
  color: #FFF;
  box-sizing: border-box;
  padding-left: 80rpx;
  font-size: 36rpx;
}
.section image{
  width: 60rpx;
  height: 60rpx;
  position: absolute;
  top: 20rpx;
  left: 10rpx;
}
.color{
  color: #FFF;
}
checkbox-group{
  display: flex;
  justify-content:flex-end;
  margin-top: 30rpx;
  color: #FFF;
  box-sizing: border-box;
  padding-right: 20rpx;
}
.login{
  margin-top: 260rpx;
}
.register{
  margin-top: 50rpx;
}

app.wxss

/**app.wxss**/
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
} 

大致样子是这样的：

然后是js逻辑代码：

const db = wx.cloud.database()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    items: [{
      name: '1',
      checked: false,
      value: '记住密码'
    }],//记住密码的复选框
    isrememberpass: '',//是否记住密码
    mobile: '',//用户名或者手机号
    pass: ''//密码
  },
  // 授权登录,这里我是先让用户授权才登录的，不需要的也可以直接放个登录按钮，不授权登录
  bindGetUserInfo: function(e) {
    if (e.detail.userInfo) {
      //用户按了允许授权按钮
      wx.showLoading({
        title: '正在登录...',
      })
      if (this.data.mobile == '') {
        wx.showToast({
          title: '用户名或手机号不能为空',
          icon: 'none',
          duration: 2000
        })
      } else if (this.data.pass == '') {
        wx.showToast({
          title: '密码不能为空',
          icon: 'none',
          duration: 2000
        })
      } else {
        var that = this
        // 登录接口
        var parame = {}
        // 此处要先判断你输入的是用户名还是手机号，用户名就要用户名的字段去查，手机号就要使用手机号的字段去查
        if (!(/^1[3456789]\d{9}$/.test(this.data.mobile))) {//验证手机号码是否正确的正则表达式
          // 不是手机号，说明是输入的用户名
          parame = {
            username: this.data.mobile
          }
        } else {
          // 输入的手机号
          parame = {
            mobile: this.data.mobile
          }
        }
        db.collection('login_info').where(parame)//查询语句
          .get({
            success: function(res) {
              wx:wx.hideLoading();
              if (res.data == '') {//为空说明没有查到数据
                wx.showToast({
                  title: '用户不存在',
                  icon: 'none',
                  duration: 3000
                })
              } else {//不为空说明查询到数据了
                if (res.data[0].pass1 == that.data.pass) {//查询到数据后再判断用户输入的密码是否正确
                  wx.showToast({
                    title: '登录成功',
                    icon: 'none',
                    duration: 3000
                  })
                  if (that.data.isrememberpass != '') { //判断用户是否勾选了记住密码
                    // 勾选了则存储到本地缓存
                    wx.setStorage({
                      key: 'pass',
                      data: that.data.pass,
                    })
                  } else { //不记住密码，删除缓存
                    wx.removeStorage({
                      key: 'pass',
                      success: function(res) {},
                    })
                  }
                  wx.setStorage({ //存储用户名
                    key: 'username',
                    data: that.data.mobile,
                  })
                  wx.setStorage({//存储用户的信息id，作为userId
                    key: 'userId',
                    data: res.data[0]._id,
                  })
                  // 这里还可以写一些登录成功后的操作，比如登录成功后跳转到首页之类的
                }else{
                  wx.showToast({
                    title: '密码错误',
                    icon: 'none',
                    duration: 3000
                  })
                }
              }
            }
          })
      }
    } else {
      //用户按了拒绝按钮
      wx.showModal({
        title: '警告',
        content: '您点击了拒绝授权，将无法进行账号登录，请授权之后再登录!!!',
        showCancel: false,
        confirmText: '返回授权',
        success: function(res) {}
      })
    }
  },
  // 用户名失焦
  mobile(e) {
    this.setData({
      mobile: e.detail.value
    })
  },
  // 密码失焦
  pass(e) {
    this.setData({
      pass: e.detail.value
    })
  },
  // 记住密码复选框
  checkboxChange: function(e) {
    this.setData({
      isrememberpass: e.detail.value
    })
  },
  // 点击注册按钮，跳转到注册页面
  register() {
    wx.navigateTo({
      url: "/pages/auto/register/index"
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {//这一段是登录界面初始进入页面时，判断如果没有缓存密码，就说明没有记住密码，只需要显示用户名就行了，如果缓存了密码，说明是记住密码的，要从缓存中获取用户名和密码都显示出来
    if (wx.getStorageSync('pass') != '') {
      var check = 'items.[0].checked'
      this.setData({
        mobile: wx.getStorageSync('username'),
        pass: wx.getStorageSync('pass'),
        [check]: true,
        isrememberpass: ["1"]
      })
    } else {
      this.setData({
        mobile: wx.getStorageSync('username'),
      })
    }
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  }
})

 里面注释写的很详细，看不懂的可以留言咨询，希望能帮助到你。后续可能会还有更新，重置密码。