微信小程序实现登录页面

wxml文件：

<view class="container"> 

 <view class="login-icon"> 
 <image class="login-img" src="../../img/loginLog.jpg"></image> 
 </view> 
 <view class="login-from"> 

 <!--账号-->
 <view class="inputView"> 
  <image class="nameImage" src="../../img/name.png"></image> 
  <label class="loginLab">账号</label> 
  <input class="inputText" placeholder="请输入账号" bindinput="usernameInput" /> 
 </view> 
 <view class="line"></view> 

 <!--密码-->
 <view class="inputView"> 
  <image class="keyImage" src="../../img/key.png"></image> 
  <label class="loginLab">密码</label> 
  <input class="inputText" password="true" placeholder="请输入密码" bindinput="passwordInput" /> 
 </view> 
 
 <!--按钮-->
 <view class="loginBtnView"> 
  <button class="loginBtn" type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}" disabled="{{disabled}}" bindtap="login">登录</button> 
 </view> 
 </view> 
</view>

wxss文件：

page{ 
 height: 100%; 
} 

.container { 
 height: 100%; 
 display: flex; 
 flex-direction: column; 
 padding: 0; 
 box-sizing: border-box; 
 /* background-color: rgb(156, 23, 78) */
} 

/*登录图片*/
.login-icon{ 
 flex: none; 
} 

.login-img{ 
 width: 750rpx;
} 

/*表单内容*/
.login-from { 
 margin-top: 20px; 
 flex: auto; 
 height:100%; 
} 

.inputView { 
 /* background-color: #fff;  */
 line-height: 45px; 
 border-radius:20px;
  border:1px solid #999999;
} 

/*输入框*/
.nameImage, .keyImage { 
 margin-left: 22px; 
 width: 18px; 
 height: 16px
} 

.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 { 
 margin-top: 8px; 
} 

/* .line { 
 width: 100%; 
 height: 1px; 
 background-color: #cccccc; 
 margin-top: 1px; 
}  */

/*按钮*/
.loginBtnView { 
 width: 100%; 
 height: auto; 
 /* background-color:#DCDCDC;  */
 margin-top: 0px; 
 margin-bottom: 0px; 
 padding-bottom: 0px; 
} 

.loginBtn { 
 width: 90%; 
 margin-top: 40px; 
 border-radius:10px;
}

js文件：

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    username: '',
    password: ''
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onShow: function () {
    // 生命周期函数--监听页面显示
    wx.hideTabBar({})
  },
  onLoad: function () {
   
  },


  // 获取输入账号 
  usernameInput: function (e) {
    this.setData({
      username: e.detail.value
    })
  },

  // 获取输入密码 
  passwordInput: function (e) {
    this.setData({
      password: e.detail.value
    })
  },

  // 登录处理
  login: function () {
    var that = this;
    if (this.data.username.length == 0 || this.data.password.length == 0) {
      wx.showToast({
        title: '账号或密码不能为空',
        icon: 'none',
        duration: 2000
      })
    } else {
      wx.request({
        url: app.globalData.globalReqUrl +'/login/login', // 仅为示例，并非真实的接口地址
        method: 'post',
        data: {
          username: that.data.username,
          password: that.data.password
        },
        header: {
          'content-type': 'application/x-www-form-urlencoded' // 默认值
        },
        success(res) {
          if (res.data.code == "OK") {
            var unitName = res.data.data.User.unitName;
            var unitId = res.data.data.User.unitId;
            wx.setStorageSync('unitId', unitId);
            wx.setStorageSync('unitName', unitName);
            wx.switchTab({
              url: '../overviewData/realTimeData'
            })
          } else {
            wx.showToast({
              title: res.data.message,
              icon: 'none',
              duration: 2000
            })
          }
        }
      })
    }
  }
})

 

效果图：

   这里界面里用到的两个图标

 

 

 

 

 

                            ---------------长按二维码关注程序媛小姐姐公众号有更多彩蛋哦---------------