：微信小程序获取输入框值方法

在微信小程序中，获取输入框的值通常有两种主流方式：通过数据绑定监听输入事件，或使用选择器查询节点属性。推荐使用第一种方式，它更符合小程序的数据驱动思想，代码也更简洁。

方法一：通过 bindinput 事件实时同步数据（推荐）

1. 在 WXML 中为 <input/> 添加 bindinput 事件，并绑定一个处理函数

   html

   <!-- a.wxml -->
   <input type="text" id="test" bindinput="onInput" placeholder="请输入内容" />
   <button bindtap="submit">提交</button>

2. 在 JS 中定义事件处理函数，将输入值保存到 data 中

   javascript

   // a.js
   Page({
     data: {
       inputValue: ''  // 用于存储输入框的值
     },
     // 输入事件处理
     onInput:function(e) {
       this.setData({
         inputValue: e.detail.value
       });
     },
     // 按钮点击或其他需要获取值的场景
     submit:function(e) {
       console.log('当前输入框的值是：', this.data.inputValue);
       // 这里可以提交或处理该值
     }
   });

优点：

• 数据实时同步，页面状态和逻辑数据保持一致。

• 在任何需要的时候（如按钮点击、表单提交）都能直接从 this.data 获取最新值。

方法二：通过 bindblur 获取失去焦点时的值

如果只需要在输入框失去焦点时获取一次值，可以使用 bindblur 事件：

<input type="text" id="test" bindblur="onBlur" />

Page({
  onBlur(e) {
    const value = e.detail.value;
    console.log('失去焦点时的值：', value);
    // 可以保存或直接使用
  }
});

方法三：使用 wx.createSelectorQuery() 直接查询节点（不常用）

在特定情况下（例如需要读取第三方组件内部 input 的值），可以通过选择器查询获取节点上的 value 属性。注意这是异步操作，且通常不推荐用于常规输入值获取。

// 在某个事件（如按钮点击）中执行
getInputValue() {
  const query = wx.createSelectorQuery();
  query.select('#test').field({ value: true }).exec((res) => {
    if (res[0]) {
      console.log('通过选择器获取的值：', res[0].value);
    }
  });
}

注意：.field({ value: true }) 用于指定需要返回的字段，这里指定返回 value 属性。该方法返回的结果是包含节点信息的数组，可通过 res[0].value 获取值。

总结

• 日常开发首选方法一：通过 bindinput + setData 将输入值同步到 data 中，后续直接从数据层读取。

• 方法二适用于只需要在输入框失去焦点时处理的场景。

• 方法三虽然能直接获取节点值，但异步操作且不够直观，仅在无法通过事件监听获取时使用（如操作原生小程序不直接支持的某些组件）。