微信小程序里多个输入框值的累加方法

在微信小程序开发中，实现多个输入框值的累加是一个常见需求。无论是进行简单的数值计算，还是处理复杂业务逻辑，掌握这一方法都十分关键。

要在页面的 wxml 文件中创建多个输入框。使用 <input> 标签来定义输入框，并为每个输入框添加一个唯一的 id 和 bindinput 事件绑定。bindinput 事件用于在输入框内容发生变化时触发相应的处理函数。例如：

<input type="number" id="input1" bindinput="inputChange" />
<input type="number" id="input2" bindinput="inputChange" />

接着，在页面的 js 文件中编写处理逻辑。在 Page 函数内，定义一个数据变量用于存储累加结果，例如 sum。然后，编写 inputChange 函数，这个函数会在输入框内容改变时被调用。在函数内部，通过 e.target.id 获取当前触发事件的输入框的 id，再使用 this.data 来获取页面的数据。通过 wx.createSelectorQuery() 方法可以获取输入框的值。示例代码如下：

Page({
  data: {
    sum: 0
  },
  inputChange: function(e) {
    const inputId = e.target.id;
    const query = wx.createSelectorQuery().in(this);
    query.select(`#${inputId}`).fields({ value: true }, res => {
      const inputValue = parseInt(res.value);
      let sum = this.data.sum;
      // 这里假设移除之前该输入框的值再重新累加
      const inputs = ['input1', 'input2'];
      inputs.forEach(id => {
        query.select(`#${id}`).fields({ value: true }, inputRes => {
          sum -= parseInt(inputRes.value);
        }).exec();
      });
      sum += inputValue;
      this.setData({
        sum: sum
      });
    }).exec();
  }
});

通过上述步骤，就能实现微信小程序里多个输入框值的累加。在实际应用中，可能还需要考虑输入值的合法性检查，比如输入非数字字符的情况。可以通过正则表达式来验证输入值是否为合法数字，若不合法则给出提示并阻止累加操作。

掌握微信小程序里多个输入框值的累加方法，能为开发者在实现各种交互功能时提供有力支持，提升小程序的实用性和用户体验。