微信小程序-----获取登录数据的三种方式

第一种

存在代码冗余推荐使用第二种

<!-- 这是wxml文件 -->
<view>
  <input
    value="{{ username }}" 
    bindinput="usernameInput" 
    placeholder="请输入用户名">
  </input>
  <input 
    value="{{ password }}" 
    bindinput="passwordInput" 
    placeholder="请输入密码">
  </input>
</view>
<view>
  <button type="primary" bindtap="loginHandle">登录</button>
  <button>注册</button>
</view>

<!-- 这是js文件 -->
Page({
  //为页面提供数据的
  data: {
    username: '',
    password: ''
  },
  usernameInput: function(e) {
    this.setData({
      username: e.detail.value
    })
  },
  passwordInput: function(e) {
    this.setData({
      password: e.detail.value
    })
  },
  loginHandle: function() {
    console.log(this.data)
  }


})

---

第二种 (常用)

<!-- 这是wxml文件 -->
<view>
  <input
    value="{{ username }}" 
    bindinput="inputChangeHandle" 
    data-prop="username" 
    placeholder="请输入用户名"
   >
  </input>
  <input 
    value="{{ password }}" 
    bindinput="inputChangeHandle" 
    data-prop="password" 
    placeholder="请输入密码"
   >
  </input>
</view>
<view>
  <button type="primary" bindtap="loginHandle">登录</button>
  <button>注册</button>
</view>

```js
Page({
  //为页面提供数据的
  data: {
    username: '',
    password: ''
  },

  inputChangeHandle: function(e) {
    var prop = e.target.dataset['prop']
    console.log(e.target.dataset)
    var changed = {}
    changed[prop] = e.detail.value

    this.setData(changed)
  },

  loginHandle: function () {
    console.log(this.data)
  }

})

---

第三种

通过form表单提交，方便快捷。

<!-- 这是wxml文件 -->
<form bindsubmit="loginHandle">
<view>
  <input
    value="{{ username }}" 
    placeholder="请输入用户名"
    name="username"
    >
  </input>
  <input 
    value="{{ password }}" 
    placeholder="请输入密码"
    type="password"
    name="password"
    >
  </input>
</view>
<view>
  <button type="primary" form-type="submit">登录</button>
  <button>注册</button>
</view>
</form>

Page({
  //为页面提供数据的
  data: {
    username: '',
    password: ''
  },
  loginHandle: function (e) {
    console.log(e.detail.value)
  }

})