微信小程序|登录界面的框架搭建

欢迎点击「算法与编程之美」↑关注我们！

本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。

问题描述

当新用户登录一个APP时，输入手机号获取验证码的登录方式是比较快捷的。那么如何利用微信小程序制作一个常见的手机接收验证码的登录界面呢？

解决方案

一个简洁的登录界面需要的有输入框、按钮和提示字。

首先构建登录所需的输入框和按钮。

在wxml搭建框架:

欢迎来到一日三餐   请输入手机号" class="phone_number"> 请输入验证码" class="code_number"> 获取验证码 登录

在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 团队

---

   

微信号：算法与编程之美          

长按识别二维码关注我们!

温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！