1. User login

Knowledge points:

• Configuration page (page,window,tabBar)
• Life cycle (judge whether the user exists in onLoad)
• Event binding (login button, input input input box)
• Data transfer

Step 1: prepare the basic page (index user login). wxml

//login.wxml

<text>User name</text>
<input bindinput='usernameInput'></input>

<text>Password</text>
<input password='true'></input>

<button bindtap='btnLogin'>Sign in</button>

//user.wxml

<text>hello!{{username}}</text>

//index.wxml

<view>
   <image src='/image/index.jpg' class='myclass'></image>
</view>
<view>
   <image src='/image/index.jpg' class='myclass'></image>
</view>

Step 2: configuration page - add tabBar, add data userinfo

(key code)

//app.json{
  "tabBar": {
    "color": "#333",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "home page"
      },
      {
        "pagePath": "pages/user/user",
        "text": "User center"
      }
    ]
  }
}

//app.js
App({
  //Store user information
  appData:{
    userinfo:null
  }
})

Step 3: complete some logic of user.js, and jump to the login page when userinfo is empty

//user.js
onLoad: function (options) {
    if(app.appData.userinfo==null){
      console.log("username is null"),
      wx.redirectTo({
        url: '../login/login'
      })
    }    
}

Step 4: complete the logic of login.js and bind click events for input and button

  var app = getApp()  
  //Get input
  usernameInput:function(event){
    this.setData({username:event.detail.value})
  },

  //Click event of login button, assign value to appInfo
  btnLogin:function(){
    app.appData.userinfo={username:this.data.username},
    wx.redirectTo({url: '../user/user'})
  }

Step 5: complete the remaining logic of user.js and display when userinfo is not empty

  onLoad: function (options) {
    if(app.appData.userinfo==null){
      console.log("username is null"),
      wx.redirectTo({
        url: '../login/login'
      })
    }else{
      this.setData({username:app.appData.userinfo.username})
    }
  }