微信小程序开发教程-获取input输入框组件的值-马育民老师

# 介绍

在微信小程序日常开发中，登录、注册、留言等表单场景，都需要获取Input输入框中的内容。很多新手入门会先用老旧的`bindinput` 输入监听事件取值，代码冗余且繁琐。

小程序原生提供了 **`model:value` 双向数据绑定** 语法，无需手动监听输入、无需手动赋值，一行配置就能自动同步视图与逻辑层数据，是目前小程序表单取值最优最简方案。

# 例子

搭建登录页面，包含用户名输入框、密码输入框、登录按钮；点击登录按钮，在开发者控制台打印出用户输入的用户名和密码。

### 项目目录

```plain
pages
└── getvalue
    ├── getvalue.wxml  // 页面结构
    ├── getvalue.js    // 页面逻辑
    ├── getvalue.json  // 页面配置（默认无需修改）
    └── getvalue.wxss  // 页面样式（本文无需额外样式）
```

### 1\. 编写页面结构 WXML

搭建输入框与按钮，通过 `model:value` 绑定JS中定义好的变量，实现数据双向同步。

```xml
<view>
  
  <input placeholder="请输入用户名" model:value="{{username}}"></input>
  
  <input placeholder="请输入密码" password="true" model:value="{{password}}"></input>
  
  <button bind:tap="login">登录</button>
</view>
```

#### 关键属性说明

- `placeholder`：输入框默认占位提示文字
  
- `password="true"`：开启密码模式，输入内容隐藏为黑点
  
- `model:value="{{变量名}}"`：核心双向绑定语法，变量名必须和JS data中保持一致
  
- `bind:tap`：绑定原生点击事件，触发对应JS方法

### 2\. 编写页面逻辑 JS

在data中初始化接收数据的变量，编写点击事件，直接通过 `this.data` 获取输入框内容。

```javascript
// pages/getvalue/getvalue.js
Page({

/**
   * 页面的初始数据：定义变量，接收输入框双向同步的数据
   */
  data: {
    username:"", // 存储用户名，初始为空字符串
    password:"", // 存储密码，初始为空字符串
  },

/**
   * 登录按钮点击事件
   * 无需监听输入过程，直接读取data中同步完成的数据即可
   */
  login(e){
    // 控制台打印获取到的表单数据
    console.log("用户名：",this.data.username)
    console.log("密码：",this.data.password)
  }

})
```

---

### 运行

输入用户名、密码，点击按钮，控制台输出结果：

[![](https://www.malaoshi.top/upload/0/0/1GW3XMKREm0J.png)](https://www.malaoshi.top/upload/0/0/1GW3XMKREm0J.png)

```plain
用户名： admin
密码： 123456
```

可以看到：无需任何输入监听代码，输入框内容已经自动同步到JS逻辑层，取值一步到位。

# 踩坑问题汇总

整理开发中90%新手都会遇到的问题，直接避坑：

### 坑1：控制台打印数据为空

**原因**：语法书写错误，将`model:value` 写成了 `modelvalue`，遗漏冒号

**解决**：严格书写完整语法 model:value，冒号不可省略

### 坑2：变量始终获取不到正确值

**原因**：小程序变量**严格区分大小写**，wxml绑定username，js写成userName，前后不统一

**解决**：WXML和JS变量名保持完全一致

### 坑3：点击登录按钮无任何响应

**原因**：事件名写错，bindtap 和 bind:tap 混用，或者JS方法名和页面绑定名称不一致

**解决**：统一使用 bind:tap，页面事件名与JS函数名一一对应

---

# 总结

1. 小程序表单取值首选 **model:value** 双向绑定，极简高效，适合绝大多数表单场景
  
2. 核心逻辑：视图自动同步数据，业务方法中直接通过 `this.data.变量名` 取值即可
  
3. 仅需要做输入实时校验、输入防抖等特殊逻辑时，再考虑使用bindinput监听事件

原文出处：http://malaoshi.top/show_1GW3XMKZ0IkK.html