小程序开发——手机号验证码登录页面

最终做出页面效果：

<view class="main_candidate"><view class="inputbox flex"><text class="input-label">手机号</text><input name="name" placeholder="请输入手机号" bindinput="inputName" class="primary"/></view><view class="inputbox flex"><text class="input-label">验证码</text><input name="code" placeholder="请输入验证码"  class="primary"/><button class="getCode" bindtap="sendVerifyCode">发送验证码</button></view><button class="login" form-type="submit">立即登录</button><view class="register"><text bindtap="register">没有账号？去注册</text></view></view>

.input-label {color: #888;font-size: 12pt;height: 25rpx;line-height: 25rpx;padding: 0 25rpx;border-right: 1px solid #d8d8d8;
}
.main_candidate{width: 100%;height: 100%;background-color: #ffffff;margin-top: 30px;
}
.inputbox{padding-left: 6px;box-sizing: border-box;border-bottom: 1px solid #dadada;width: 100%;height: 50px;line-height: 50px;font-size: 14px;background-color: #fff;
}
.flex{border-radius: 5px;border: 2px solid #f4f4f4;display: flex;align-items: center;margin: 40rpx 0;
}
.primary{flex:1;
}
.inputbox button{width: 110px; height: 38px;color:#fff;background-color: #5dd5c8;font-size: 16px;
}
.login{margin-top: 20px;background-color: #5dd5c8;color: #fff;font-size: 20px;
}
.register{color: blue;font-size: 16px;margin: 0 auto;width: 40%;margin-top: 10px;
}

小程序开发——手机号验证码登录页面相关推荐

自学微信小程序开发第五天- 页面切换相关
自学微信小程序开发第五天- 页面切换相关创建多个页面页面间跳转页面间传值另一个页面跳转的方式(重定向) 点击跳转元素时的样式导航API 研究过页面样式设计后,就是多页面的呈现了,这就需要研究 ...
小程序短信验证码登录，1分钟实现小程序发短信功能，借助云开发10行代码实现短信验证码登录小程序
老规矩先看效果图普通短信验证码短信今天被云开发官方告知,云开发支持发短信功能了,然后就迫不及待的来尝下鲜. 进入官方文档一看,云开发给咱们开发者的福利还真不小. 不仅仅可以很方便的使用短信功能, ...
【小程序开发之微信登录】
毕业设计做的是一个针对三高人群的个人膳食管理与推荐的微信小程序,本人第一一次做小程序,也是第一次写博客,还有很多不完美的地方也可能有讲得不对的地方,多多包涵.希望记录一下完成毕业设计过程中学到的知识, ...
【小程序开发之文章详情页面的设计】文章详情页面如何布局
本篇博客是小程序开发系列的第四篇,在上一篇博客中介绍的是首页的制作,除了展示轮播图图片,食谱的封面.名称以及文章的封面和标题这些静态的东西之外我们还需要在点击它们的时候能够跳转到详情页面. 除了在首页 ...
微信小程序开发(一) 微信登录流程
文/YXJ 地址:http://blog.csdn.net/sk719887916/article/details/53761107 最近在研究微信小程序开发,非常有意思的一个东西.花了一点时间写了一 ...
Python+微信小程序开发（四）页面跳转和获取用户信息
上一篇已经介绍了如何搭建一个自己的静态页面,接下来则涉及到一些用户信息获取与跳转的操作. 一.页面跳转首先新建一个跳转页面,按上篇的操作生成pages/redirect/redirect. 1.对标 ...
微享商盟系统功能与小程序开发方案（静态页面制作）
在平时开发程序的过程中,自己经常会写一些控制台小程序进行测试某个功能,事后我们会寻找这些小程序, 如果不仔细管理,经常会找不到. 由于每个控制台小程序都有自己独立的 Main方法,所以我们不能把他们都 ...
微信小程序开发——以简单易懂的浏览器页面栈理解小程序的页面路由
前言: 对于小程序的页面路由,如果没有一定开发经验的话,理解起来还是会有些困难的.哪怕是有一定小程序开发经验的开发者,能够完全理解掌握的恐怕也不多. 这里就以另外一种方式来详细的介绍小程序的页面栈及路 ...
微信小程序开发之——用户登录-登录流程(1)
一概述新建微信小程序自带用户登录简化小程序登录流程时序二新建微信小程序自带用户登录简化新建的微信小程序默认有用户登录功能,将多余功能去除后,简化如下 2.1 index.wxml < ...

小程序开发——手机号验证码登录页面

小程序开发——手机号验证码登录页面相关推荐

最新文章

热门文章