微信小程序之登录页面制作实例详解

<view>  <view>  <image></image>  </view>  <view>   <!--账号-->  <view>   <image></image>   <label>账号</label>   <input>  </view>  <view></view>   <!--密码-->  <view>   <image></image>   <label>密码</label>   <input>  </view>   <!--按钮-->  <view>   <button>登录</button>  </view>  </view> </view>

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

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