微信小程序中请编写一个用户登录页面,提示输入用户名和密码登录。
时间: 2023-12-01 12:02:35 浏览: 189
好的,以下是一个简单的微信小程序用户登录页面的代码:
```html
<!--index.wxml-->
<view class="container">
<view class="input-container">
<input bindinput="onUsernameInput" placeholder="请输入用户名" />
</view>
<view class="input-container">
<input bindinput="onPasswordInput" type="password" placeholder="请输入密码" />
</view>
<button bindtap="onLogin" class="login-button">登录</button>
</view>
```
```javascript
// index.js
Page({
data: {
username: '',
password: '',
},
onUsernameInput(event) {
this.setData({
username: event.detail.value,
});
},
onPasswordInput(event) {
this.setData({
password: event.detail.value,
});
},
onLogin() {
const { username, password } = this.data;
// 在这里进行登录验证
// 如果验证通过,则跳转到首页
// 如果验证失败,则提示用户用户名或密码错误
if (username === 'admin' && password === '123456') {
wx.navigateTo({
url: '/pages/home/home',
});
} else {
wx.showToast({
title: '用户名或密码错误',
icon: 'none',
});
}
},
});
```
```css
/* index.wxss */
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.input-container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
input {
width: 300px;
height: 40px;
border: 1px solid #ccc;
border-radius: 4px;
padding: 10px;
font-size: 16px;
}
.login-button {
width: 200px;
height: 40px;
background-color: #007aff;
color: #fff;
border: none;
border-radius: 4px;
font-size: 16px;
}
```
注意,这只是一个简单的示例代码,实际开发中需要根据实际情况进行修改和完善。同时,登录验证的具体实现需要根据后端接口的设计进行调整。