微信小程序开发教程-获取input输入框组件的值 作者:马育民 • 2026-06-21 14:18 • 阅读:10012 # 介绍 在微信小程序日常开发中,登录、注册、留言等表单场景,都需要获取Input输入框中的内容。很多新手入门会先用老旧的`bindinput` 输入监听事件取值,代码冗余且繁琐。 小程序原生提供了 **`model:value` 双向数据绑定** 语法,无需手动监听输入、无需手动赋值,一行配置就能自动同步视图与逻辑层数据,是目前小程序表单取值最优最简方案。 # 例子 搭建登录页面,包含用户名输入框、密码输入框、登录按钮;点击登录按钮,在开发者控制台打印出用户输入的用户名和密码。 ### 项目目录 ```plain pages └── getvalue ├── getvalue.wxml // 页面结构 ├── getvalue.js // 页面逻辑 ├── getvalue.json // 页面配置(默认无需修改) └── getvalue.wxss // 页面样式(本文无需额外样式) ``` ### 1\. 编写页面结构 WXML 搭建输入框与按钮,通过 `model:value` 绑定JS中定义好的变量,实现数据双向同步。 ```xml 登录 ``` #### 关键属性说明 - `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) ```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