Wechat applet comprehensive case practice 1

1. The user login

Purpose ：

In order to improve efficiency UI beautify , It mainly simulates the data transmission of user login , Suitable for beginners .

Realization function ：

• Get into " User center " The page needs Determine whether the user is logged in
• If the user is not logged in , be Jump to login page
• On the login page Get user name information
• If the user is already logged in , Need to be in “ User center ” page Show login user name

Knowledge point ：

• Configuration page （page,window,tabBar）
• Life cycle （ stay onLoad Judge whether the user exists ）
• Event binding （ The login button 、input Input box ）
• Data acquisition and transmission （ difficulty ）

First step ： 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>

The second step ： Configuration page ----- add to 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
  }
})

The third step ： complete user.js Part of the logic of , When userinfo Jump to login page

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

Step four ： complete login.js Logic , by input and button Bind click event

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

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

Step five ： complete user.js The remaining logic of , When userinfo Display when it 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})
    }
  }

Achievement examples ：