介绍
在微信小程序日常开发中，登录、注册、留言等表单场景，都需要获取Input输入框中的内容。很多新手入门会先用老旧的bindinput 输入监听事件取值，代码冗余且繁琐。
小程序原生提供了 model:value 双向数据绑定 语法，无需手动监听输入、无需手动赋值，一行配置就能自动同步视图与逻辑层数据，是目前小程序表单取值最优最简方案。
例子
搭建登录页面，包含用户名输入框、密码输入框、登录按钮；点击登录按钮，在开发者控制台打印出用户输入的用户名和密码。
项目目录
pages
└── getvalue
├── getvalue.wxml // 页面结构
├── getvalue.js // 页面逻辑
├── getvalue.json // 页面配置（默认无需修改）
└── getvalue.wxss // 页面样式（本文无需额外样式）
1. 编写页面结构 WXML
搭建输入框与按钮，通过 model:value 绑定JS中定义好的变量，实现数据双向同步。
<view>
<!-- 用户名输入框：绑定data中的username变量 -->
<input placeholder="请输入用户名" model:value="{{username}}"></input>
<!-- 密码输入框：开启密码隐藏，绑定password变量 -->
<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 获取输入框内容。
// pages/getvalue/getvalue.js
Page({
/**
* 页面的初始数据：定义变量，接收输入框双向同步的数据
*/
data: {
username:"", // 存储用户名，初始为空字符串
password:"", // 存储密码，初始为空字符串
},
/**
* 登录按钮点击事件
* 无需监听输入过程，直接读取data中同步完成的数据即可
*/
login(e){
// 控制台打印获取到的表单数据
console.log("用户名：",this.data.username)
console.log("密码：",this.data.password)
}
})
运行
输入用户名、密码，点击按钮，控制台输出结果：
用户名： 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函数名一一对应
总结
小程序表单取值首选 model:value 双向绑定，极简高效，适合绝大多数表单场景
核心逻辑：视图自动同步数据，业务方法中直接通过
this.data.变量名取值即可仅需要做输入实时校验、输入防抖等特殊逻辑时，再考虑使用bindinput监听事件