本文给大家带来的是微信小程序手机验证码快速登录页面样式设计制作开发教程，制作好以后效果图如下：
一、wxml页面代码如下：
<view class="container">
<text class="warn">为了确保服务质量，请先验证你的手机</text>
<form action="" class="oform" bindsubmit="formSubmit">
<view class="inputbox flex">
<input maxlength="11" type="number" name="phone" class="primary" placeholder="请输入你的手机号"/>
<button hover-class="send">发送验证码</button>
</view>
<view class="inputbox flex">
<input type="number" name="yzm" class="primary" placeholder="验证码"/>
<text class="info">没有收到?</text>
</view>
<button class="login" form-type="submit">立即登录</button>
</form>
</view>
|
二、wxss样式文件代码如下：
.container{
width: 100%;
height: 100%;
background-color: #f8f8f8;
}
.warn{
box-sizing: border-box;
font-size: 14px;
color: #999;
padding-top:40px;
padding-bottom: 40px;
}
.oform{
width: 100%;
}
.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{
display: -webkit-flex;
display: -ms-flex;
display: flex;
align-items: center;
justify-content: center;
}
.primary{
flex:1;
}
.inputbox button{
width: 100px;
height: 30px;
line-height: 30px;
color:#fff;
background-color: #00beaf;
}
/*.send{
width: 50px;
height: 30px;
color: #00beaf;
}*/
.info{
font-size: 18px;
color: #00beaf;
}
.login{
margin-top: 20px;
background-color: #00beaf;
color: #fff;
font-size: 20px;
}
|
三、js页面代码如下：
var app = getApp()
Page({
config:{
telephone:'13133743126',
yzm:'123456'
},
onReady:function(){
wx.setNavigationBarTitle({
title:'快速登录'
})
},
formSubmit:function(e){
var that=this;
console.log(e.detail.value.yzm);
if(e.detail.value.yzm.length==0){
wx.showModal({
title: '密码不得为空',
showCancel:false
})
}
if(e.detail.value.phone==that.config.telephone && e.detail.value.yzm==that.config.yzm){
wx.showModal({
title: '登录成功',
showCancel:false
})
}else{
wx.showModal({
title: '验证码错误',
showCancel:false
})
}
}
})
|
.jpg)
.jpg)
