小程序入门之用户登录

用户登陆需要一个用户界面和一个登陆界面

用户进入用户界面（未登录）--进入登陆界面---登陆成功（用户名密码记住）---跳转至用户界面（已登录，显示用户名）

1，在全局的app.js中定义appData，其中两个参数【微信有默认的globalData】

 appData:{
    username: null,
    password: null
  },
  globalData: {
    userInfo: null
  }

2，在用户页user的onLoad方法中（进入页面首先加载onLoad方法），判断app.js中的username是否为空，若为空就进入登陆页面；不为空则显示用户名

 /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    if(app.appData.username == null){//var app=getApp();
      // wx.navigateTo({
      //   url: '../login/login',
      // })
      wx.redirectTo({
        url: '../login/login',
      })
    }else{
      console.log(app.appData.username);
      this.setData({ username: "用户名："+app.appData.username})
    }
  },

3，在login.wxml中写布局,比较糙啊

<view >
<input bindinput='usernameInput' placeholder='请输入用户名'></input>
<input bindinput='passwordInput' placeholder='请输入密码'></input>
<button bindtap='btnlogin' type='parimary'>登陆</button>
</view>

4,在login.js中在data声明2个变量，在输入框的监听中为变量赋值，在button的监听中把值赋给全局变量，并跳转到user用户界面

 data: {
    username: null,
    password: null
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
   
  },
  usernameInput:function(event){
    console.log(event);
    this.setData({ username: event.detail.value});

  },
  passwordInput: function (event){
    this.setData({ password: event.detail.value });

  },
  btnlogin:function(){
    app.appData.username = this.data.username;
    app.appData.password = this.data.password;
    wx.navigateTo({
      url: '../user/user',
    })
  }

小程序入门之用户登录

猜你喜欢