微信小程序-用户登录

• 实现目标：在进入”用户中心“页面之前，一定要获取用户信息；若没有用户信息，则一定要进行登录以获得用户名、密码等信息，使得“用户中心”能显示一系列用户信息。

• 各个页面：

---

登录页面：

输入信息前：

输入信息后：
-----------------------------------------------------------
用户中心：

• 具体实现
  -1.app.js中设置userinfo数据为null

appData:{
    userinfo:null,
  }

-2. user.js中判断userinfo是否为null，若为null,则跳转到“登录页面”

onLoad: function (options) {
	if(app.appData.userinfo==null){
   		wx.redirectTo({ url: "../login/login" })//此时没有返回按钮
  }

-3.在“登录”页面login.wxml设置
用户名input输入框
密码inout输入框
以及button登录按钮

///并通过分别给用户名、密码绑定事件bindinput
///来获取输入框的数据

//通过给按钮绑定事件bindtap
///将页面跳转到”用户中心“页面，并把数据传给app.userinfo全局数据

<view>
		<view>
          <input class="input1" placeholder="{{input1Test}}" bindinput="usernameInput"/>
         </view>
        

        
        <!-- 如何获取？需要我们给输入框绑定一个事件 -->
          <view>
          <input style="felx-grow:1" class="input2" placeholder="{{input2Test}} " password="true"            
          bindinput="passwordInput"/>
          </view>
        
        <view>
          <button type="primary" bindtap="loginBtnClick" class="btn"> 登录 </button>
        </view>
  </view>

-4.在login.js具体实现bindinput和bindtap事件
//通过event.detail.value获取输入框的值
//通过this.setData来讲输入框的值赋值给username和password

data: {
    input1Test:"请输入用户名",
    input2Test: "请输入密码",
    //定义
    username:null,
    password:null,
    //如何获取？需要我们给输入框绑定一个事件
  },

  //定义2个方法
  usernameInput:function(event){
    //打印事件 console.log(event);
    this.setData({username:event.detail.value})//将输入框的用户名传入username变量


  },

  //我们在输入的时候数据就有值了appData
  //我们需要在点登录按钮时，要把数值赋给userinfo
  passwordInput:function(event){
    //console.log(event);
    this.setData({password: event.detail.value})

  }

//再将username和password传给app.userinfo

loginBtnClick:function(){
    //登陆的时候信息保存到app里面
    //1.点登陆的时候 获取输入框中获取的数据

    app.appData.userinfo={username:this.data.username,password:this.data.password}
    wx.switchTab({url:'../user/user'})



//把用户账号密码提交到服务器里面 验证返回true 存在且相等 ，才返回到用户页面，省略这个步骤
  },

-5.将app.userinfo信息传给user.username

 onLoad: function (options) {

    if(app.appData.userinfo==null){
    //若userinfo为空，则要跳转到登录页面
     /// wx.navigateTo({url:"../login/login"}) //不能用这个 因为跳转到没登陆就登陆页面，还能返回到用户界面
       wx.redirectTo({ url: "../login/login" })//因为跳转到没登陆就登陆页面，，此时没有返回按钮
  
  }else{
    this.setData({username:app.appData.userinfo.username})

  }
  },