微信小程序之登录页并存储用户

效果图：

 

login.wxml： 

<!--pages/login/login.wxml-->
<view class="container"> 
  <view class="login-icon">  
    <image class="login-img" src="/images/logo.png"></image>  
  </view>  
  <view class="login-from">  
  <form bindsubmit="formSubmit" class='form'>
    <view class="myno">
    <!-- 学号 -->
      <view class="weui-cell weui-cell_input">
      <image class="nameImage" src="/images/name.png"></image>
          <!-- <view class="weui-cell__hd">
              <view class="weui-label">学号</view>
          </view> -->
          <view class="weui-cell__bd">
              <input class="weui-input" name="no" bindinput="noinput" value='{{no}}' placeholder="请输入学号" />
          </view>
      </view>
    </view>
    <view class="mypwd">
      <!-- 密码 -->
      <view class="weui-cell weui-cell_input">
      <image class="nameImage" src="/images/key.png"></image>
          <!-- <view class="weui-cell__hd">
              <view class="weui-label">密码</view>
          </view> -->
          <view class="weui-cell__bd">
              <input class="weui-input" type="password" name="pwd" bindinput="pwdinput" placeholder="请输入密码" value='{{pwd}}'/>
          </view>
      </view>
    </view>
 
     <!--按钮-->  
    <view class="loginBtnView">  
      <button class="loginBtn" size="{{primarySize}}"  form-type='submit' disabled='{{disabled}}'>登录</button>  
    </view>  
    </form>
  
  </view>  
</view>  

login.wxss： 

/* pages/login/login.wxss */
page{
  height: 100%;
  background-size:100%;
  background-image: url('http://songlijuan.top/bk2.jpg');
}
 
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
  box-sizing: border-box;
  /* background-color: #f2f2f2;     */
} 
 
/*登录图片*/
.login-icon{
  flex: none;
  margin: 0 auto;
  margin-top: 200rpx;
}
.login-img{
  width: 220rpx;
  height: 220rpx;
  border-radius: 110rpx;
  opacity: 0.6;
}
 
/*表单内容*/
.login-from {
  margin-top: 90px;
  flex: auto;
  height:100%;
}
 
/* 输入框 */
.myno{
  width: 90%;
  height: 80rpx;
  margin: 0 auto;
  border:1px solid #ccc;
  border-radius: 50rpx;
 
}
.mypwd{
  width: 90%;
  height: 80rpx;
  margin: 0 auto;
  border:1px solid #ccc;
  border-radius: 50rpx;
  margin-top: 20rpx;
}
/*按钮*/
.loginBtnView {
  margin-top: 0px;
  margin-bottom: 0px;
  padding-bottom: 0px;
}
 
.loginBtn {
  width: 90%;
  height: 80rpx;
  line-height: 80rpx;
  margin-top: 35px;
  color: #fff;
  background-color:#7e8ef0;
  border: 0.1rpx solid #ccc;
  border-radius: 40rpx;
}
 
 
.nameImage, .keyImage {
  margin-right: 10px;
  width: 14px;
  height: 14px
}

login.js：

// pages/login/login.js
const app = getApp()
Page({
  /**
   * 页面的初始数据
   */
  data: {
    disabled:false,
    no:'',
    pwd:'',
    noinput:false,
    pwdinput:false,
  },
  noinput:function(e){
    this.setData({no:e.detail.value});
    this.setData({noinput:true});
    if(this.data.noinput==true && this.data.pwdinput==true){
      this.setData({ disabled: false });
    }
 
  },
  pwdinput: function (e) {
    this.setData({ pwd: e.detail.value });
    this.setData({ pwdinput: true });
    if (this.data.noinput == true && this.data.pwdinput == true) {
      this.setData({ disabled: false });
    }
  },
  formSubmit: function (e) {
    wx.showLoading({
      title: '登录中...',
    })
    console.log(e);
    this.setData({ disabled: true});
    wx.request({
      url: app.globalData.url.login, //仅为示例，并非真实的接口地址
      data: {
        no: e.detail.value.no,
        pwd: e.detail.value.pwd
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: function (res) {
        console.log(res);
        if (res.statusCode == 200) {
          if (res.data.error == true) {
            wx.showToast({
              title: res.data.msg,
              icon: 'none',
              duration: 2000
            })
          } else {
            wx.setStorageSync('student', res.data.data);
            wx.showToast({
              title: res.data.msg,
              icon: 'success',
              duration: 2000
            })
            setTimeout(function(){
              wx.switchTab({
                url: '../teacher/teacher',
              })
            },2000)
          }
        }else{
          wx.showToast({
            title: '服务器出现错误',
            icon: 'none',
            duration: 2000
          })
        }
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({disabled:false});
    var student = wx.getStorageSync('student');
    if (typeof (student) == 'object' && student.no != '' && student.classid != '') {
      wx.switchTab({
        url: '../teacher/teacher',
      })
    }
  },
 
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
 
  },
 
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    if(this.data.no=='' || this.data.pwd==''){
      this.setData({ disabled: true });
    }else{
      this.setData({ disabled: false });
    }
  },
 
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
 
  },
 
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
 
  },
 
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
 
  },
 
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
 
  },
 
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
 
  }
})

 我引用了weui的样式，大家可以参考下weui的样式，下载weui并引用。