专栏首页算法与编程之美微信小程序|登录界面的框架搭建

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

问题描述

当新用户登录一个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;

本文分享自微信公众号 - 算法与编程之美(algo_coding),作者:赵微

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-03-05

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 微信小程序|flexbox layout—快速实现基本布局

    flexbox layout——弹性盒子布局。弹性盒子可以快速的对小程序进行布局。一般传统的小程序布局方法对内容量少的页面而言很方便,但对页面比较复杂的来讲就很...

    算法与编程之美
  • 微信小程序|页面的生命周期函数onLoad

    相信小程序的初学者对js页面是很模糊的总感觉看不懂,其实js页面总的来说就是一个Page()函数。用Page()函数来注册一个页面,接受一个object参数,实...

    算法与编程之美
  • 前端|Bootstrap 实例 - 简单的轮播插件

    Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式。除此之外,内容也是足够灵活的,可以是图像、内嵌框架、视频或者其他您想要...

    算法与编程之美
  • git statsh命令报错解决

    git stash命令主要用于当在一个分支的开发工作未完成,却又要切换到另外一个分支进行开发的时候,除了commit原分支的代码改动的方法外,提供暂存代码的方式...

    蓓蕾心晴
  • 论文阅读: Faster R-CNN

    RP原本主要用SS (Selective Search) 来生成,只能在CPU上跑。一张图片生成~2,000个proposal,效率0.5fps,实在太慢。 ...

    JNingWei
  • git学习

    1、通过定义在项目目录下定义.gitignore文件,把需要忽略的内容写在路面,例如:

    用户5325874
  • github学习(三)

    Git学习(二) 分支学习: 创建新分支dev:git branch dev 切换到dev分支:git checkout dev 可以简写为一句话:git ch...

    希希里之海
  • Git教程——撤销内容修改和版本回退

    用户2149234
  • Free FrpService

    手里面有一个树莓派3B,让他作为一个网络服务器提供服务下载服务,即便这玩意儿的网口和SD卡速度有点着急,但是也会比GitHub速度快,笔者一直深入机器视觉领域,...

    用户1327296
  • 使用内网穿透工具frp

    前几天写了篇文章用本机电脑搭建网站(域名、DNS解析),写完第二天发现我的网站访问不上去了。仔细研究了一下,发现我想的太简单了。很早一些时候,运营商会给我们分配...

    乐百川

扫码关注云+社区

领取腾讯云代金券