han_cui入门实战《四》用户登录

作者：han_cui，来自授权地址 
在商城中，访问个人中心或者购物车前先判断是否登录，从缓存中读取用户名，密码等，若无登录，或者清楚缓存，则需登录。 
下面以本人做的登录为例，login.js页面

// pages/login/login.js
Page({
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
    var token = wx.getStorageSync('token')
    var name = wx.getStorageSync('name')
    var pwd = wx.getStorageSync('pwd')
    if(token ==''){
        wx.navigateTo({
          url: '/pages/index/index'
        })
    }
    if(name!=''){
      if(pwd!=''){
        wx.redirectTo({
          url: '../my/my?name='+name+'&pwd='+pwd+''
        })
      }
    }
  },
  //用户名和密码输入框事件
  usernameInput:function(e){
    // console.log(e)
    this.setData({
      userN:e.detail.value
    })
  },
  passwordInput:function(e){
    this.setData({
      passW:e.detail.value
    })
  },
  //登录按钮点击事件，调用参数要用：this.data.参数；
  //设置参数值，要使用this.setData({}）方法
  loginBtnClick:function(a){
    // console.log(a)
    var that=this
    if(this.data.userN.length == 0 || this.data.passW.length == 0){
      this.setData({
        infoMess:'温馨提示：用户名或密码不能为空！',
      })
    }else{
      wx.request({
        url: ',
        data: {
          username: this.data.userN,
          password: this.data.passW,
          unique_id:'123456'
        },
        header: {
            'content-type': 'application/json'
        },
        success: function(res) {
          // console.log(res.data.result)
          if(res.data.status == -1){
            userName:'缺少参数'
          }else{
            //存用户session
            // wx.setStorageSync('token', res.data.result.token)
            // wx.setStorageSync('user_id', res.data.result.user_id)
            // wx.setStorageSync('name', that.data.userN)
            // wx.setStorageSync('pwd', that.data.passW)
            wx.setStorage({
              key:'name',
              data:res.data.result.mobile,
            })
            wx.setStorage({
              key:'token',
              data:res.data.result.token,
            })
            wx.setStorage({
              key:'pwd',
              data:that.data.passW,
            })
          //  wx.switchTab({
            wx.redirectTo({
              url: '../my/my?name='+res.data.result.mobile+'&pwd='+that.data.passW+''
            })
          }
        }
      })
    }
  }
})

login.wxml页面

<view class="login">
  <view class="section">
      <view class="section__title">用户名：</view>
      <input name="username" placeholder="请输入邮箱/手机号" bindinput="usernameInput" />
  </view>
  <view class="section">
      <view class="section__title">密码：</view>
      <input password type="text" name="password" placeholder="密码" bindinput="passwordInput" />
  </view>
  <view id='button'>
    <button formType="submit" bindtap="loginBtnClick">登录</button>
  </view>
  <view id="tishi">
    {{infoMess}}
  </view>
  <view id="xia">
    <checkbox-group name="checkbox">
          <label><checkbox value="checkbox1" checked="checked"/>自动登录</label>
    </checkbox-group>
    <view style="float:left;">
      <navigator url="redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">免费注册</navigator>
      <navigator url="redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">忘记密码？</navigator>
    </view>
  </view>
  <view id='di'>第三方登录</view>
  <view id='san'>
    <image src="../../utils/images/QQ.png" />
    <image src="../../utils/images/zhifubao.png" />
  </view>
</view>

以及手机版样式，login.wxss页面

/* pages/login/login.wxss */
.Login{ width:90%; margin:auto; overflow:hidden; padding-top:20px;}
#my input{
    border: 1px solid black;
    float: left;
    margin-left: 5px;
}
/*page{
    margin-top: 20px;
}*/
.section{
    margin-top: 20px;
    margin-left:5px;
    display: flex;
    flex-direction: row;
    width:95%; overflow:hidden; overflow:hidden;
}
.section__title{
    width:25%; float:left; font-size:16px; line-height:40px; color:#666;
}
.section input{
    border: 1px solid #DFDFDF; height:30px; line-height:30px; width:95%; padding-left: 5px; -webkit-appearance: none; -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; border-radius: 0; -webkit-rtl-ordering: logical; -webkit-user-select: text; cursor: auto; background-color: white; font-size:14px; line-height:30px;
}
#button button{
    display:block; margin:auto; background:#FF2233; font-size:16px; line-height:40px; 
 border:0px; color:#FFF; width:97%; margin:auto;margin-top:20px; margin-bottom:10px;border-radius:5px;
}
#xia{
    margin-top: 30px;
    margin-left:5px;
}
#xia checkbox-group{
    float: left;color:#737373;font-size:15px;
}
#xia view{
    float: left;
    margin-left: 72px;
}
#xia navigator{
    float: left;
    margin: 0 3px;
    color:dodgerblue;font-size:15px;  
}
#di{
    text-align:center;font-size:12px; padding-top:50px;
    color:#737373;
}
#san{
    margin-left: 23%;
}
#san image{
    width: 40px;
    height: 40px;
    margin: 8%  10%;
}
#tishi{
    color:red;
    text-align:center;font-size:12px; padding-top:8px;
}

完成简单的登录页面