编写一个微信小程序的登录界面,可以注册账号,可以选择用户类型
时间: 2024-05-06 07:14:48 浏览: 18
以下是一个微信小程序的登录界面示例代码,包括注册账号和选择用户类型功能:
```
<!--login.wxml-->
<view class="container">
<view class="logo"></view>
<form bindsubmit="login" class="form">
<input name="username" type="text" placeholder="请输入用户名"/>
<input name="password" type="password" placeholder="请输入密码"/>
<button formType="submit">登录</button>
</form>
<view class="register">
<text>没有账号?</text>
<navigator url="/pages/register/register">去注册</navigator>
</view>
<view class="user-type">
<text>我是</text>
<radio-group bindchange="radioChange">
<label class="radio-label">
<radio name="userType" value="1" checked="{{userType==1}}"/>普通用户
</label>
<label class="radio-label">
<radio name="userType" value="2" checked="{{userType==2}}"/>商家用户
</label>
</radio-group>
</view>
</view>
```
```
/*login.wxss*/
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.logo {
width: 100px;
height: 100px;
background-color: #ccc;
border-radius: 50%;
margin-bottom: 20px;
}
.form {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
input {
width: 80%;
height: 40px;
margin-bottom: 20px;
padding: 0 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
width: 80%;
height: 40px;
background-color: #00BFFF;
border: none;
border-radius: 5px;
color: #fff;
font-size: 16px;
}
.register {
display: flex;
align-items: center;
justify-content: center;
margin-top: 20px;
}
.user-type {
display: flex;
align-items: center;
justify-content: center;
margin-top: 20px;
}
.radio-label {
display: flex;
align-items: center;
justify-content: center;
margin-right: 20px;
}
```
```
//login.js
Page({
data: {
userType: 1 //默认选择普通用户
},
login: function(e) {
//登录逻辑
},
radioChange: function(e) {
this.setData({
userType: e.detail.value
})
}
})
```
```
<!--register.wxml-->
<view class="container">
<view class="logo"></view>
<form bindsubmit="register" class="form">
<input name="username" type="text" placeholder="请输入用户名"/>
<input name="password" type="password" placeholder="请输入密码"/>
<input name="confirmPassword" type="password" placeholder="请确认密码"/>
<button formType="submit">注册</button>
</form>
</view>
```
```
/*register.wxss*/
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.logo {
width: 100px;
height: 100px;
background-color: #ccc;
border-radius: 50%;
margin-bottom: 20px;
}
.form {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
input {
width: 80%;
height: 40px;
margin-bottom: 20px;
padding: 0 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
button {
width: 80%;
height: 40px;
background-color: #00BFFF;
border: none;
border-radius: 5px;
color: #fff;
font-size: 16px;
}
```
相关推荐
![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)