写一个微信小程序登录界面
时间: 2024-06-08 15:05:09 浏览: 18
以下是一个简单的微信小程序登录界面,包括用户输入账号和密码,以及提交按钮。
```html
<view class="container">
<image class="logo" src="/images/logo.png"></image>
<form bindsubmit="login">
<view class="form-item">
<input name="username" placeholder="请输入账号" />
</view>
<view class="form-item">
<input name="password" type="password" placeholder="请输入密码" />
</view>
<button formType="submit" class="btn">登录</button>
</form>
</view>
```
接下来需要在对应的 js 文件中编写登录逻辑:
```javascript
Page({
login: function (e) {
const username = e.detail.value.username;
const password = e.detail.value.password;
// 调用后台 API 进行登录验证
wx.request({
url: 'https://api.example.com/login',
method: 'POST',
data: {
username: username,
password: password
},
success: function (res) {
// 登录成功,跳转到主页
wx.switchTab({
url: '/pages/home/home'
});
},
fail: function (res) {
wx.showToast({
title: '登录失败',
icon: 'none'
});
}
});
}
})
```
在样式文件中添加样式:
```css
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.logo {
width: 120rpx;
height: 120rpx;
margin-bottom: 40rpx;
}
.form-item {
width: 80%;
margin-bottom: 20rpx;
padding: 10rpx;
border: 1rpx solid #ccc;
border-radius: 5rpx;
}
.input {
width: 100%;
height: 40rpx;
font-size: 16rpx;
}
.btn {
width: 80%;
height: 40rpx;
background-color: #007AFF;
color: #fff;
border-radius: 5rpx;
font-size: 16rpx;
text-align: center;
line-height: 40rpx;
}
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![](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)