小程序学习笔记《四》用户登录

利用quickstart工程,实现用户登录过程，并简单校验用户名和密码是否正确。

1.底部有两个tabBar(首页/个人中心) 
2.个人中心显示用户信息。 
首次切换到个人中心，需要先登录，才能看到个人信息。登录后，就一直显示用户信息。

改app.json文件，添加tabBar

app.json
    {
      "pages":[
        "pages/index/index",
        "pages/user/user",
        "pages/login/login"
      ],
      "window":{
        "backgroundTextStyle":"light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "WeChat",
        "navigationBarTextStyle":"black"
      },
      "tabBar": {
        "list": [{
          "pagePath": "pages/index/index",
          "text": "首页"
        },{
          "pagePath": "pages/user/user",
          "text": "个人中心"
        }]
      }
    }

添加用户登录页面login 
两个输入框(用户名和密码) 
一个按钮 
当点击按钮时，验证用户名和密码是否正确，如果正确，则跳转到用户页面(用户的个人信息)。 
否则在登录页面有个错误提示"请输入正确的用户名和密码"。

login.wxml

    <view class="mcontainer">
        <view class="item">
           <view class="login-item">
                <view class="login-item-info">用户名</view>
                <view><input /></view>
           </view>
           <view class="login-item">
                <view class="login-item-info">密码</view>
                <view class="login-pwd">
                <input style="flex-grow:1" password="true" /> 
                <text> 忘记密码 </text>
                </view>
           </view>
           <view class="login-item bottom">
                <button class="login-btn" >登录</button>
           </view>
           <view class="login-item bottom">
                <text> 用户名或密码错误 </text>
           </view>
        </view>
    </view>

login.wxss

    .mcontainer {
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
    } 
    .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: 8px;
        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;
    }

绑定bindinput事件

        usernameInput/passwordInput
    <view><input bindinput="usernameInput" /></view>
    <input style="flex-grow:1" password="true"  bindinput="passwordInput"/>

login.js

    获得input输入框里的数据并保存到变量username、password
    page
    var app = getApp();
    usernameInput : function (event){
      console.log(event) //打印事件看看
      console.log(event.detail.value) 
      this.setData({username:event.detail.value})
    },
    passwordInput : function (event){
      this.setData({password:event.detail.value})
    }

index.js 
page 
app.js 
APP 
建一个用户信息页面 
user.wxml

    <view class="index-container">
       <view class="nickname">
          用户名和密码
       </view>
    </view>

user.wxss

    .index-container{
      width: 100%;
      height: 100%;
      position: relative;
    }
    .nickname{
      position: absolute;
      top: 170px;
      left: 120px;
      font-size: 25px;
    }

app.js

    定义全局用户信息变量 userInfo
      appData:{
        userInfo: null
      }

user.js

    若app全局变量userInfo == null，跳到用户登录页面。
    page
    var app = getApp();
      data:{
        username:null,
      },
      onLoad:function(options){
        // 生命周期函数--监听页面加载
        //如果信息为空，跳转到登录页面，页面跳转navigateTo/redirectTo
        //wx.navigateTo() 有返回按钮,不适合此页
        if(app.appData.userInfo == null){
          wx.redirectTo({
            url: '../login/login',
            success: function(res){
              // success
            },
            fail: function() {
              // fail
            },
            complete: function() {
              // complete
            }
          })
        }
       else{
         this.setData({username:app.appData.userInfo.username})
       }
      }

login.wxml

    绑定点击事件，点击登录按钮时，将输入框里的信息(用户名和密码)保存到userInfo中
        bindtap="loginBtnClick"
    <button class="login-btn" bindtap="loginBtnClick">登录</button>

login.js

        校验用户名和密码是否是admin用户，若是，跳转到用户信息页面(user)，并将获得的username/password
    信息存到全局变量userInfo中。
        使用wx.switchTab，跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
    若不是admin用户，则弹出提示"用户名或密码不正确，请重新输入"
        使用wx.showModal，显示模态弹窗。
    var app = getApp()
    data:{
        username:null,
        password:null
    }，
    loginBtnClick:function(){
    //用户名和密码验证的过程
    if(this.data.username == "admin" && this.data.password == "admin"){
        app.appData.userInfo = {username:this.data.username,password:this.data.password}
        wx.switchTab({
          url: '../user/user',
          success: function(res){
            // success
          },
          fail: function() {
            // fail
          },
          complete: function() {
            // complete
          }
        })
    }else{
      wx.showModal({
        title: '提示',
        content: '用户名或密码不正确，请重新输入',
        showCancel: false,
        success: function(res) {
          if (res.confirm) {
            console.log('用户点击确定')
          }
        }
      })
    }
  }

demo下载：用户登录.7z