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

朴灿烈づ我的快乐病毒、 2023-07-21 05:29 31阅读 0赞

--------------------

**要有遥不可及的梦想，也要有脚踏实地的本事。----------- 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;
    }

大致样子是这样的：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDUyMjc0_size_16_color_FFFFFF_t_70][]

然后是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() {
    
      }
    })

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDUyMjc0_size_16_color_FFFFFF_t_70]: /images/20230528/695fa11b71b14b9e9463fefb5908200b.png