问题描述
当新用户登录一个APP时，输入手机号获取验证码的登录方式是比较快捷的。那么如何利用微信小程序制作一个常见的手机接收验证码的登录界面呢？
解决方案
一个简洁的登录界面需要的有输入框、按钮和提示字。
首先构建登录所需的输入框和按钮。
在wxml搭建框架:
<view class="container">
<text>欢迎来到一日三餐</text>
<input type="number" bindblur="getPhone" placeholder="请输入手机号" class="phone_number"></input>
<view class="code">
<input type="number" bindblur="getCode" placeholder="请输入验证码" class="code_number"></input>
<button class="btn_code">获取验证码</button>
</view>
<view>
<button bindtap="login" class="btn_login">登录</button>
</view>
</view>
在wxss美化界面：
.container{
height: 100vh;
display: flex;
flex-direction: column;
padding: 30rpx;
}
text{
font-size: 40rpx;
display: flex;
justify-content: center;
}
input{
border: 2rpx solid #FFC125;
height: 90rpx;
border-radius: 12rpx;
padding-left: 16rpx;
}
.phone_number{
margin: 16rpx 0;
}
.code{
display: flex;
flex-direction: row;
margin-bottom: 16rpx;
width: 100%;
}
.btn_code{
background-color: #FFC125;
color: white;
font-size: 32rpx;
}
.code_number{
flex: 1;
}
.btn_login{
background-color: teal;
color: white;
font-size: 30rpx;
}
效果图：
图3.1 登录界面
结语
需要注意的是，text不是类名称，在wxss中前面不用加点。
上下输入框太近：margin: 16rpx 0;
输入框中的提示字太靠左：padding-left: 16rpx;
使输入框延长直至占满与按钮间的距离：flex: 1;
END实习编辑 | 王楠岚
责 编 | 赵 微
where2go 团队
微信号：算法与编程之美
本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请
点击举报。
