写一个简易的登录界面微信小程序开发的代码
时间: 2024-06-16 15:04:16 浏览: 10
当然,下面是一个简易的登录界面微信小程序的代码示例:
```html
<!-- index.wxml -->
<view class="container">
<view class="title">登录</view>
<view class="input-container">
<input class="input" placeholder="请输入用户名" bindinput="handleUsernameInput" />
<input class="input" type="password" placeholder="请输入密码" bindinput="handlePasswordInput" />
</view>
<button class="login-btn" bindtap="handleLogin">登录</button>
</view>
```
```css
/* index.wxss */
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.title {
font-size: 24px;
margin-bottom: 20px;
}
.input-container {
margin-bottom: 20px;
}
.input {
width: 200px;
height: 30px;
border: 1px solid #ccc;
border-radius: 4px;
padding: 5px;
margin-bottom: 10px;
}
.login-btn {
width: 100px;
height: 30px;
background-color: #007bff;
color: #fff;
border-radius: 4px;
}
```
```javascript
// index.js
Page({
data: {
username: '',
password: ''
},
handleUsernameInput(e) {
this.setData({
username: e.detail.value
});
},
handlePasswordInput(e) {
this.setData({
password: e.detail.value
});
},
handleLogin() {
// 在这里编写登录逻辑,可以发送请求到后端进行验证
console.log('用户名:', this.data.username);
console.log('密码:', this.data.password);
}
});
```
以上代码实现了一个简单的登录界面,包括一个标题、两个输入框和一个登录按钮。用户输入用户名和密码后,点击登录按钮会触发`handleLogin`函数,你可以在该函数中编写登录逻辑,比如发送请求到后端进行验证。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)