作者:燕歆波

導讀:昨天早上來的早,閒來無事,就寫了微信小程式的登入demo,下面來看一下；

主要步驟

 1. 在wxml中編寫佈局,輸入使用者名稱和輸入密碼,兩個輸入框，垂直排列
 2. 在兩個輸入框下面有一個登入按鈕,樣式自定義
 3. 在js中的data中定義兩個變數username和password,初始值自定義
 4. 給兩個輸入框監聽的方法,不斷監聽輸入的內容並且給username和password賦值
 5. 編寫登入按鈕點選時的方法,我們要獲取使用者輸入的使用者名稱和使用者密碼，判斷資訊是否正確,還要設定userInfo,因為登陸成功後，我們直接從userInfo中獲取使用者資訊。
 6.
 
 判斷使用者資訊正確後,跳轉頁面。

編寫佈局

//container為豎向佈局
 <view class="container" >

 //container_col橫向佈局,存放輸入使用者名稱
 <view class="container_col">
     //輸入框前面的提示文字
       <text style="text-align:center; margin-right:10px;">使用者名稱:</text>
        //輸入框
       <input bindinput="userName" placeholder
 
="{{username}}" />
    </view>

 //container_col橫向佈局,存放輸入密碼
    <view class="container_col">
       <text style="text-align:center; margin-right:30px;">密碼:</text>
       <input bindinput="password" password="true"  type="password" placeholder="{{password}}" />
    </view>
 


//登入按鈕,繫結btnLoginClick方法,實現跳轉頁面,和資訊判斷
    <button bindtap="btnLoginClick" style="width:95%; height:40px; margin-top:40px;" plain="true" hover-class="button-hover" size="80%" type="primary" form-type="submit">登入</button>
</view>

監聽輸入框的改變，不斷給變數賦值輸入的內容

//定義兩個變數用來接收輸入的使用者名稱和密碼
 data: {
    。。。,
    username:'請輸入使用者名稱',
    password:'請輸入密碼'
  },
//監聽方法,輸入框已經綁定了監聽的方法bindinput,注意為小寫,因為還有一個方法是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
    })
  },

實現點選按鈕登入

btnLoginClick:function(e){
    //獲取當前已經賦值的使用者名稱和密碼
    var name = this.data.username;
    var pass = this.data.password;
    //此處定死了使用者名稱和密碼,如果不正確,給出提示
    if(name != 'admin' || pass != 111111){
        wx.showToast({
          title: '不存在此使用者',
          duration:2000
        })
    }else{//資訊正確彈出檢測賬戶的提示框
      wx.showLoading({
        title: '檢測中',
      })
      //資訊正確,給userInfo賦值
      app.globalData.userInfo = { username: this.data.username, password: this.data.password }
      //將使用者名稱和密碼快取下來,留著實現不用重複登入  
      wx.setStorageSync("username",this.data.username)
      wx.setStorageSync("password",this.data.password)
      //跳轉頁面,並且關閉當前頁面
      wx.redirectTo({
        url: '../user/user'
      })
    }
  }

這裡提一個知識點,就是，navigateTo，redirectTo和navigateBack的區別:

wx.navigateTo(OBJECT)
保留當前頁面，跳轉到應用內的某個頁面，使用wx.navigateBack可以返回到原頁面。

wx.redirectTo(OBJECT)
關閉當前頁面，跳轉到應用內的某個頁面。

wx.navigateBack(OBJECT)
關閉當前頁面，返回上一頁面或多級頁面。可通過 getCurrentPages() 獲取當前的頁面棧，決定需要返回幾層。

跳轉後,我們在user頁面打印出當前的使用者名稱!
首先在js中定義變數username,

 data:{
    username:null
  },

在載入頁面時獲取使用者資訊:

 onLoad:function(options){
    if (app.globalData.userInfo == null){
       wx.showToast({
         title: '獲取資訊失敗',
       })

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

在頁面上顯示使用者資訊：

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

這樣,就實現了登陸跳轉!

可是每次重新整理，都要重新登陸,所以,我們來解決這個問題，剛才,我們在使用者登入時,快取了使用者資訊,那麼,我們可以再頁面載入的時候,判斷是否有使用者資訊,如果有就直接登入,如果沒有在登入:
在onLoad方法中實現這些:

   onLoad:function(options){
      //獲取快取的資訊
      var usernames = wx.getStorageSync("username")
      var passwords = wx.getStorageSync("password")

      //判斷使用者名稱是否為null,如果為null,預設顯示'請輸入使用者名稱'
      if(usernames == null){
          usernames = '請輸入使用者名稱'
      }
       //判斷密碼是否為null,如果為null,預設顯示'請輸入密碼'
      if(passwords == null){
        passwords = '請輸入密碼'
      }
      this.setData({
        username:usernames,
        password:passwords
      })
    //呼叫btnLoginClick方法,因為此方法中就是驗證使用者資訊正確和        //       實現登入的程式碼
      this.btnLoginClick()
  },