微信小程序用户登录界面

效果展示图

小程序登录界面.png

login.js

Page({
  data: {
    username: '',
    password: '',
  },
  onLoad: function (options) {
    // 页面初始化 options为页面跳转所带来的参数
  },


  onReady: function () {
    // 页面渲染完成
  },
  onShow: function () {
    // 页面显示
  },
  onHide: function () {
    // 页面隐藏
  },
  onUnload: function () {
    // 页面关闭
  },
  usernameInput: function (event) {
    this.setData({ username: event.detail.value })
  },

  passwordInput: function (event) {
    this.setData({ password: event.detail.value })
  },
  login:function(){
    console.log(this.data);
  }
})

login.json

{
  "usingComponents": {},
  "navigationBarTitleText": "用户登录"
}

login.wxml

<!--登录页面-->
<view class="item">
      <view class="login-item">
           <view class="login-item-info">用户名</view>
           <view><input bindinput="usernameInput" /></view>
      </view>
      <view class="login-item">
           <view class="login-item-info">密码</view>
           <view class="login-pwd">

           <input style="flex-grow:1" bindinput="passwordInput" password="true" /> 
           <text> 忘记密码 </text>

           </view>
      </view>
      <view class="login-item bottom">
           <button class="login-btn" bindtap="login">登录</button>
      </view>
</view>

login.wxss

.item{
    flex-grow:1;
    height: 30%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 96%;
    padding: 0 2%;
}

.login-item{
    width: 90%;
    margin-top: 30rpx;
    border-bottom: 1px solid #eee;
    flex-grow:1;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 20rpx;
}

 .bottom{
     border-bottom: 0px;
}

.login-item-info{
    font-size: 12px;
    color: #888;
     padding-bottom: 20rpx;
}

.login-pwd{
    display: flex;
    justify-content: space-between;
    flex-grow: 1;
    align-items: center;

}

.login-pwd text{
    height: 100%;
    font-size: 14px;
    color: #888;
    display: flex;

}
.login-btn{
    width: 80%;
    color: white;
    background-color: green;
    border-radius: 0;
    font-size: 14px;

}

.login-btn:hover{
    width: 80%;
    color: white;
    border-radius: 0;
}