云开发 | 微信小程序云开发如何实现登录界面？看这篇就够

这是我的登录界面：

我的云数据库表如下：

实现登录界面的详细步骤和注意点如下：

步骤：

1 . 创建界面结构： 使用 WXML 定义登录界面的结构，包括一个标题、两个单选框（学生和老师）、两个输入框（账号和密码）以及一个登录按钮。

2 . 绑定事件处理函数： 使用 bindchange 绑定单选框组的变化事件到 radioChange 函数，以更新用户身份。 使用 bindinput 绑定输入框的输入事件到 inputAccount 和 inputPassword 函数，以获取用户输入的账号和密码。 使用 bindtap 绑定登录按钮的点击事件到 login 函数，以处理登录逻辑。

3 . 初始化页面数据： 在页面的 data 对象中定义 account、password 和 role 三个数据属性，用于存储用户输入的账号、密码和选择的身份。

4 . 编写事件处理函数： radioChange：更新 data 中的 role。 inputAccount：更新 data 中的 account。 inputPassword：更新 data 中的 password。

5 . 实现登录逻辑： 在 login 函数中，通过 wx.cloud.database 获取云数据库中的用户信息。 遍历用户信息，检查输入的账号和密码是否匹配。 根据验证结果，显示相应的提示信息，并在登录成功时跳转到首页。

登录界面 login.wxml 代码如下：

<view class="box">
  <view class="container">
    <view style="font-size: 60rpx; margin:30rpx;">登录</view>
    <radio-group bindchange="radioChange">
      <label style="margin-right: 180rpx;">
        <radio value="学生" checked />学生
      </label>
      <label>
        <radio value="老师" />老师
      </label>
    </radio-group>
    <view class="account">
      <view class="title">账号:</view>
      <view class="num"><input name="account" bindinput="inputAccount" placeholder="  请输入学号/教工号" /></view>
    </view>
    <view class="account">
      <view class="title">密码:</view>
      <view class="num">
        <input name="password" bindinput="inputPassword" placeholder="  请输入密码" password />
      </view>
    </view>
    <button bindtap="login" type="primary">登录</button>
  </view>
</view>

login.wxss 样式代码如下： 

.box {
  padding: 20px;
  height: 100vh;
  background-color: hsl(33, 75%, 88%);
  /* 淡橘色背景 */
}

.container {
  height: 650rpx;
  background-color: #fff;
  border-radius: 5%;
  margin-top: 50%;
  display: flex;
  flex-direction: column;

}

.account {
  display: flex;
  flex-direction: row;
  /* border:1px solid black; */
  margin: 10px 5px;
  height: 100rpx;
  width: 600rpx;
}

.title {
  justify-content: center;
  align-items: center;
  font-size: 42rpx;
  margin-top: 20rpx;
}

.num>input {
  border: 1px solid #d6d4d4;
  margin-top: 22rpx;
  width: 450rpx;
  height: 90rpx;
  position: relative;
  left: 24rpx;
  top: -20rpx
}
button {
  margin-top: 20px;

}

login.js代码如下：

let app = getApp();
// getApp() 是一个全局函数，用于获取小程序实例，这样我们就可以访问定义在 app.js 文件中的 App 对象。

// 获取云数据库的引用，这里指定了云环境的ID
const db = wx.cloud.database({
  "env":"icloud1-3gr0ra5d089fb0ec" // 云环境ID
});

Page({
  data: { 
    account: "",    // 用于存储用户输入的账号
    password: "",   // 用于存储用户输入的密码
    role: ""        // 用于存储用户选择的身份（如学生、教师等）
  },
  
  // 单选框改变事件处理函数，用于更新用户选择的身份
  radioChange: function (e) {
    this.setData({
      role: e.detail.value // 更新data中的role为用户选择的值
    });
  },
  
  // 账号输入框事件处理函数，用于更新用户输入的账号
  inputAccount: function (e) {
    this.setData({
      account: e.detail.value // 更新data中的account为用户输入的账号
    });
  },
  
  // 密码输入框事件处理函数，用于更新用户输入的密码
  inputPassword: function (e) {
    this.setData({
      password: e.detail.value // 更新data中的password为用户输入的密码
    });
  },
  
  // 登录函数，用于处理登录逻辑
  login: function() {
    // 从云数据库的test集合中获取所有用户信息
    db.collection('test').get({
      success: (res) => {
        let user = res.data; // 获取到的用户数据数组
        console.log(user) // 在控制台打印用户数据
        let accountFound = false; // 标志变量，用于标记是否找到对应的账号

        // 遍历用户数据数组
        for (let i = 0; i < user.length; i++) {
          // 检查当前遍历到的账号是否与用户输入的账号匹配
          if (this.data.account === user[i].account) {
            // 注意：访问data中的数据 要用this.data.
            accountFound = true; // 设置标志变量为true，表示找到了账号
            // 检查密码是否正确
            if (this.data.password === user[i].password) {
              console.log('登录成功！'); // 在控制台输出登录成功的消息
              wx.showToast({ // 显示登录成功的提示
                title: '登录成功！！',
                icon: 'success',
                duration: 2500
              });
              wx.switchTab({ // 跳转到首页
                url: '/pages/index/index', // 指定跳转的页面路径
              });
              break; // 密码正确，终止循环
            } else {
              wx.showToast({ // 密码错误，显示提示
                title: '密码错误！！',
                icon: 'none',
                duration: 2500
              });
              break; // 密码错误，终止循环
            }
          }
        }

        // 如果循环结束后accountFound仍为false，表示没有找到对应的账号
        if (!accountFound) {
          wx.showToast({ // 显示无此用户名的提示
            title: '无此用户名！！',
            icon: 'none',
            duration: 2500
          });
        }
      },
      fail: function (err) { // 获取数据失败的处理函数
        console.error(err); // 在控制台输出错误信息
        wx.showToast({ // 显示登录失败的提示
          title: '登录失败，请稍后再试',
          icon: 'none',
          duration: 2500
        });
      }
    });
  }
});

测试如下：

 这是一个示例哟~根据需要自行调整编写逻辑代码~冲冲冲