微信小程序—如何獲取用戶輸入文本框的值

我們就拿簡單常用的登錄來舉例子吧，先看最終效果圖片

我不喜歡使用from表單提交，所以這里不采用表單提交的方式咯；

先看看html代碼：

login.wxml

<view class="itemView">用戶名：
    <input class="input" name="userName" placeholder="請輸入用戶名"
    bindinput ="userNameInput"/>
  </view>
<view class="itemView">密    碼：
    <input class="input" password placeholder="請輸入密碼"
     bindinput="passWdInput" />
  </view>
<view class="viewName" style="background-color:#fbf9fe">
  <button class="loginBtn" bindtap="loginBtnClick">登錄</button>
</view>

在看js代碼：

login.js

// pages/index/login.js
Page({
  data: {
    userName: '',
    userPwd:""
  },
  //獲取用戶輸入的用戶名
  userNameInput:function(e)
  {
    this.setData({
      userName: e.detail.value
    })
  },
  passWdInput:function(e)
  {
    this.setData({
      userPwd: e.detail.value
    })
  },
  //獲取用戶輸入的密碼
  loginBtnClick: function (e) {
    console.log("用戶名："+this.data.userName+" 密碼：" +this.data.userPwd);
  }
  ,
  // 用戶點擊右上角分享
  onShareAppMessage: function () {

  }
})