写一个微信小程序登录页面
时间: 2024-06-09 10:11:47 浏览: 25
好的,以下是一个简单的微信小程序登录页面的代码示例:
```
<view class="container">
<view class="logo"></view>
<view class="form">
<input class="input" type="text" placeholder="请输入用户名"></input>
<input class="input" type="password" placeholder="请输入密码"></input>
<button class="button" bindtap="login">登录</button>
</view>
</view>
<style>
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
.logo {
width: 100px;
height: 100px;
background-color: #ccc;
border-radius: 50%;
margin-bottom: 30px;
}
.form {
display: flex;
flex-direction: column;
align-items: center;
}
.input {
width: 80%;
height: 40px;
border: 1px solid #ccc;
border-radius: 20px;
margin-bottom: 10px;
padding-left: 20px;
}
.button {
width: 80%;
height: 40px;
background-color: #007aff;
color: #fff;
border: none;
border-radius: 20px;
}
</style>
<script>
Page({
login: function() {
// 获取用户名和密码
var username = this.selectComponent('.input[type=text]').value;
var password = this.selectComponent('.input[type=password]').value;
// 发送登录请求
wx.request({
url: 'https://example.com/login',
method: 'POST',
data: {
username: username,
password: password
},
success: function(res) {
// 登录成功
wx.showToast({
title: '登录成功',
icon: 'success'
});
// 保存登录状态
wx.setStorageSync('token', res.data.token);
// 跳转到首页
wx.switchTab({
url: '/pages/index/index'
});
},
fail: function(res) {
// 登录失败
wx.showToast({
title: '登录失败',
icon: 'none'
});
}
});
}
});
</script>
```
以上代码实现了一个简单的登录页面,包括用户名和密码输入框、登录按钮等。当用户点击登录按钮时,会发送一个登录请求到服务器,并根据返回的结果跳转到首页或者提示登录失败。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)