帮我写一个微信小程序 登录页面
时间: 2023-06-23 09:07:09 浏览: 77
好的,下面是一个简单的微信小程序登录页面示例代码:
```html
<view class="container">
<image class="logo" src="/images/logo.png"></image>
<form class="login-form" bindsubmit="login">
<input class="input" name="username" placeholder="请输入用户名" />
<input class="input" name="password" placeholder="请输入密码" type="password" />
<button class="button" form-type="submit">登录</button>
</form>
</view>
```
```css
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
.logo {
width: 200rpx;
height: 200rpx;
}
.login-form {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 50rpx;
}
.input {
width: 400rpx;
height: 80rpx;
font-size: 36rpx;
margin-bottom: 20rpx;
padding-left: 20rpx;
border: 1rpx solid #ccc;
}
.button {
width: 400rpx;
height: 80rpx;
font-size: 36rpx;
background-color: #007aff;
color: #fff;
border: none;
border-radius: 10rpx;
}
```
```javascript
Page({
login: function(e) {
const username = e.detail.value.username
const password = e.detail.value.password
// 调用登录接口进行登录验证
wx.request({
url: 'https://example.com/login',
method: 'POST',
data: {
username: username,
password: password
},
success: function(res) {
// 登录成功
wx.showToast({
title: '登录成功',
icon: 'success',
duration: 2000
})
// 跳转到首页
wx.switchTab({
url: '/pages/home/home'
})
},
fail: function(res) {
// 登录失败
wx.showToast({
title: '登录失败',
icon: 'none',
duration: 2000
})
}
})
}
})
```
这是一个简单的登录页面,包含用户名、密码输入框和登录按钮,用户输入用户名和密码后,点击登录按钮,会调用登录接口进行登录验证,登录成功后跳转到首页。你需要根据实际需求进行修改和扩展。