微信小程序之登录页实例 —— 微信小程序实战系列（5）
在微信小程序的开发中，登录页面是非常重要的一个部分。它不仅需要实现用户输入账号和密码的功能，还需要处理登录逻辑，例如验证账号和密码是否正确，提示错误信息等。在本文中，我们将提供一个完整的登录页实例，供同学们参考。
项目效果图
首先，让我们来看一下这个登录页面的效果图：
 和两个输入框（`input`）。其中，`account` 输入框用于用户输入账号，`password` 输入框用于用户输入密码。登录按钮的 `form-type` 属性设置为 "submit"，表示当用户点击登录按钮时，会触发 `login`事件。
wxss
下面是登录页面的 WXSS 文件：
```css.container {
display: flex;
justify-content: center;
align-items: center;
height:100vh;
}
input[type="text"], input[type="password"] {
width:200px;
height:40px;
padding:10px;
border: none;
border-radius:5px;
box-shadow:0010px rgba(0,0,0,0.1);
}
button[type="submit"] {
width:200px;
height:40px;
background-color: 4CAF50;
color: fff;
border: none;
border-radius:5px;
cursor: pointer;
}
```
在这个 WXSS 文件中，我们定义了一个 `container` 类，用于设置视图的布局和样式。我们还定义了两个输入框类和登录按钮类，用于设置它们的样式。
login.js
下面是登录页面的 JavaScript 文件：
```javascriptPage({
data: {
account: '',
password: ''
},
login(e) {
const { account, password } = e.detail.value;
if (account.trim() === '' || password.trim() === '') {
wx.showToast({
title: '请输入账号和密码',
icon: 'none'
});
return;
}
// 验证账号和密码是否正确 const { account, password } = this.data;
if (account === 'admin' && password === '123456') {
wx.showToast({
title: '登录成功',
icon: 'success'
});
setTimeout(() => {
wx.redirectTo({
url: '../index/index'
});
},1000);
} else {
wx.showToast({
title: '账号或密码错误',
icon: 'none'
});
}
}
});
```
在这个 JavaScript 文件中，我们定义了一个 `login` 函数，用于处理登录逻辑。我们首先检查用户是否输入了账号和密码，如果没有，则提示用户输入。然后，我们验证账号和密码是否正确，如果正确，则显示登录成功的提示信息，并跳转到首页。如果不正确，则显示错误提示信息。
总结
在本文中，我们提供了一个完整的登录页实例，包括 WXML、WXSS 和 JavaScript 文件。我们通过设置表单和输入框的样式，以及定义 `login` 函数来实现登录逻辑。在实际开发中，可以根据需求进行调整和扩展。
