微信小程序之登录页实例

  
    
      
    
    
  
      
      
        
      账号  
        
      
      
  
      
      
        
      密码  
        
      
  
      
      
      登录  
      
    
  

样式代码：

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: 15px 15px 15px 10px;  
  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;  
}  

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    
      })    
    }    
  }  
})