微信小程序登錄時如何獲取input框中的內(nèi)容

更新時間：2019年12月04日 15:00:11 作者：婧星

這篇文章主要介紹了微信小程序登錄時如何獲取input框中的內(nèi)容,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下

最近寫小程序項目遇到一些問題，今天整理下這些問題的解決方法，希望對用戶有幫助。下面是登錄頁，點擊登錄時獲取input框中的值，

效果如下：

wxml布局如下：

<view >
   <input type="text" placeholder-style="color:#fff;" bindinput="userNameInp" placeholder="請輸入賬號" />
</view>
<view >
   <input password placeholder-style="color:#fff;" bindinput="usePasswordInp" placeholder="請輸入密碼"/>
</view>
 <button class="loginBtn" bindtap='loginFn'>登錄</button>

js代碼如下：

const app = getApp();
Page({
 
 /**
  * 頁面的初始數(shù)據(jù)
  */
 data: {
  userName: "",
  passWord: "",
 },
 //監(jiān)聽輸入的賬號
 userNameInp: function (e) {
  this.data.userName = e.detail.value;
 },
 //監(jiān)聽輸入的密碼
 usePasswordInp: function (e) {
  this.data.passWord = e.detail.value;
 },
 //登錄
 loginFn: function () {
  var that = this;
  if (that.data.userName.length == 0 || that.data.passWord.length == 0) {
   wx.showToast({
    title: '賬號或密碼為空',
    icon: 'loading',
    duration: 2000
 
   })
  } else {
   wx.showLoading({
    title: '登錄中...',
   })
   wx.request({
    url: 'https://localhost:8180/exam/login',
    data: {
     username: that.data.userName,
     password: that.data.passWord
    },
    header: {
     'content-type': 'application/x-www-form-urlencoded' // 默認(rèn)值
    },
    method: 'post',
    success: function (res) {
     wx.hideLoading();
     wx.removeStorageSync('sessionid');
     // console.log('登錄成功', res.data.data);
     if (res.data.code == "0000") {
      wx.showToast({
       title: '登錄成功',
       icon: 'success',
       duration: 1000
      })
      wx.setStorageSync('sessionid', res.header['Set-Cookie']); //保存Cookie到Storage
      wx.setStorage({
       key: 'myData',
       data: res.data.data
      })
      wx.redirectTo({
       url: '/pages/index/index',
      })
     } else {
      wx.showToast({
       title: '登錄失敗',
       icon: 'none',
       duration: 2000
      })
     }
    },
    fail: function (e) {
     wx.showToast({
      title: '服務(wù)器出現(xiàn)錯誤',
      icon: 'none',
      duration: 2000
     })
    }
 
   })
  }
  },
  //跳轉(zhuǎn)到忘記密碼頁面
 onTapDayWeather() {
  wx.navigateTo({
   url: '/pages/updatepwd/updatepwd',
  })
 },
  /**
  * 生命周期函數(shù)--監(jiān)聽頁面加載
  */
 onLoad: function (options) {
 },
})

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: