微信小程序如何制作登录页面

在小程序中制作一个登录页面的方法

index.wxml文件

<viewclass="container">
<viewclass="login-icon">
<imageclass="login-img"src="../images/loginLog.jpg"></image>
</view>
<viewclass="login-from">
<!--账号框-->
<viewclass="inputView">
<imageclass="nameImage"src="../images/name.png"></image>
<labelclass="loginLab">账号</label>
<inputclass="inputText"placeholder="请输入账号"bindinput="phoneInput"/>
</view>
<viewclass="line"></view>
<!--密码框-->
<viewclass="inputView">
<imageclass="keyImage"src="../images/key.png"></image>
<labelclass="loginLab">密码</label>
<inputclass="inputText"password="true"placeholder="请输入密码"bindinput="passwordInput"/>
</view>
<!--登录按钮-->
<viewclass="loginBtnView">
<buttonclass="loginBtn"type="primary"size="{{primarySize}}"loading="{{loading}}"plain="{{plain}}"disabled="{{disabled}}"bindtap="login">登录</button>
</view>
</view>
</view>

index.wxss文件

page{
height:100%;
}
.container{
height:100%;
display:flex;
flex-direction:column;
padding:0;
box-sizing:border-box;
background-color:#f2f2f2
}
/*背景图片*/
.login-icon{
flex:none;
}
.login-img{
width:750rpx;
}
/*表单内容*/
.login-from{
margin-top:20px;
flex:auto;
height:100%;
}
.inputView{
background-color:#fff;
line-height:44px;
}
/*输入框*/
.nameImage,.keyImage{
margin-left:22px;
width:14px;
height:14px
}
.loginLab{
margin:15px15px15px10px;
color:#545454;
font-size:14px
}
.inputText{
flex:block;
float:right;
text-align:right;
margin-right:22px;
margin-top:11px;
color:#cccccc;
font-size:14px
}
.line{
width:100%;
height:1px;
background-color:#cccccc;
margin-top:1px;
}
/*登录按钮*/
.loginBtnView{
width:100%;
height:auto;
background-color:#f2f2f2;
margin-top:0px;
margin-bottom:0px;
padding-bottom:0px;
}
.loginBtn{
width:80%;
margin-top:35px;
}

index.js文件

Page({
data:{
phone:'',
password:''
},
//获取输入账号
phoneInput:function(e){
this.setData({
phone:e.detail.value
})
},
//获取输入密码
passwordInput:function(e){
this.setData({
password:e.detail.value
})
},
//登录条件
login:function(){
if(this.data.phone.length==0||this.data.password.length==0){
wx.showToast({
title:'用户名和密码不能为空',
icon:'loading',
duration:2000
})
}else{
//修改成跳转的页面
wx.showToast({
title:'登录成功',
icon:'success',
duration:2000
})
}
}
})