Main steps

 1. Write layout in wxml, enter user name and password, two input boxes, vertical arrangement
 2. There is a login button under the two input boxes. The style is customized.
 3. Define two variables username and password in data in js, and customize the initial value
 4. The method of listening to two input boxes, constantly listening to input content and assigning username and password values
 5. To write the method of clicking the login button, we need to get the user name and password entered by the user, judge whether the information is correct, and set userInfo, because after successful login, we get user information directly from userInfo.
 6. Judging the user information is correct, jump to the page.

Write layout

//container is a vertical layout
 <view class="container" >

 //container_col horizontal layout, store input user name
 <view class="container_col">
     //The prompt text in front of the input box
       <text style="text-align:center; margin-right:10px;">User name:</text>
        //Input box
       <input bindinput="userName" placeholder="{{username}}" />
    </view>

 //container_col Lateral Layout, Store Input Password
    <view class="container_col">
       <text style="text-align:center; margin-right:30px;">Password:</text>
       <input bindinput="password" password="true"  type="password" placeholder="{{password}}" />
    </view>

//Login button, binding btnLoginClick method, realizing jump page, and information judgment
    <button bindtap="btnLoginClick" style="width:95%; height:40px; margin-top:40px;" plain="true" hover-class="button-hover" size="80%" type="primary" form-type="submit">Sign in</button>
</view>

Listen for changes in input boxes and assign input to variables

//Define two variables to receive input usernames and passwords
 data: {
    . . . ,
    username:'enter one user name',
    password:'Please input a password'
  },
//Listening method, the input box has been bound to the listening method bindinput, note that it is lowercase, because another method is bindInput.
  userName:function(event){
    console.log(event.detail.value)
      this.setData({
        username: event.detail.value
      })
  },
  password:function(e){
    console.log(e.detail.value)
    this.setData({
      password:e.detail.value
    })
  },

Realize click button login

btnLoginClick:function(e){
    //Get the currently assigned username and password
    var name = this.data.username;
    var pass = this.data.password;
    //Dead username and password are determined here. If it is incorrect, give a prompt.
    if(name != 'admin' || pass != 111111){
        wx.showToast({
          title: 'This user does not exist',
          duration:2000
        })
    }else{//Information correctly pops up the prompt box for checking account
      wx.showLoading({
        title: 'Inspection in progress',
      })
      //Correct information, assign value to userInfo
      app.globalData.userInfo = { username: this.data.username, password: this.data.password }
      //Cache the username and password, and keep it to achieve no duplicate login  
      wx.setStorageSync("username",this.data.username)
      wx.setStorageSync("password",this.data.password)
      //Jump the page and close the current page
      wx.redirectTo({
        url: '../user/user'
      })
    }
  }

Here is the difference between navigateTo, redirectTo and navigateBack.

wx.navigateTo(OBJECT)
Keep the current page, jump to a page in the application, and use wx.navigateBack to return to the original page.

wx.redirectTo(OBJECT)
Close the current page and jump to a page in the application.

wx.navigateBack(OBJECT)
Close the current page and return to the previous page or multi-level page. The current page stack can be retrieved through getCurrentPages(), which determines how many layers you need to return.

After the jump, we print out the current user name on the user page!
First, the variable username is defined in js.

 data:{
    username:null
  },

Get user information when loading the page:

 onLoad:function(options){
    if (app.globalData.userInfo == null){
       wx.showToast({
         title: 'getting information failure',
       })

    }else{
       this.setData({
         username: app.globalData.userInfo.username
       })
    }
  }

Display user information on the page:

<view class="container">
   <view>{{username}}</view>
</view>

In this way, the landing jump is realized!

But every time we refresh, we have to re-login. So, we solve this problem. Just now, when the user logs in, we cache the user information. Then, when the page loads again, we can judge whether there is user information. If there is user information, we can login directly, if not:
Implement these in the onLoad method:

   onLoad:function(options){
      //Get cached information
      var usernames = wx.getStorageSync("username")
      var passwords = wx.getStorageSync("password")

      //Determine whether the username is null or not. If it is null, the default display is'Enter username'.
      if(usernames == null){
          usernames = 'enter one user name'
      }
       //To determine whether the password is null, if null, the default display is'Please enter the password'.
      if(passwords == null){
        passwords = 'Please input a password'
      }
      this.setData({
        username:usernames,
        password:passwords
      })
    //Call the btnLoginClick method, because this method is the code that verifies that the user information is correct and // implements the login.
      this.btnLoginClick()
  },