微信小程序全栈开发技术与实战（微课版）最新章节_张引著

2.2 输入框input

在学习了视图容器组件之后，我们来学习一下普通组件。“输入框”可能是特别常见的一种普通组件。在微信小程序中任何需要输入文本的地方，我们都能见到它。接下来，我们就来学习一下如何在微信小程序中使用输入框。

要了解input组件的使用方法，请访问右侧二维码。

Hello World项目

在微信小程序中使用输入框是非常简单的，我们只需要使用input组件：

<!-- index.wxml -->
<view class="control">
  <input />
</view>

就可以显示出输入框，如图2-6所示。

图2-6 输入框的显示效果

不过，要从input组件中读取用户输入的内容，却有些麻烦。首先，我们没有办法直接从input组件中读取内容。因此，如果你曾经使用过其他前端或客户端开发平台，并期望采用如下的方式读取input组件的内容的话，你可能要失望了。

<!-- In *.wxml, this won't work.-->
<input id="myInput" />
// In *.js, this won't work.
var inputText = myInput.Text;

那么，如何才能读取input组件的内容呢？微信小程序为我们提供了两种方法：“bindinput属性”和“数据绑定”。

2.2.1 bindinput属性

我们首先来了解第一种方法。还记得我们是如何在HelloWorld项目中处理用户单击的吗？我们首先在index.wxml中设置button组件的bindtap属性，将它关联到button_bindtap函数：

<!-- index.wxml, the HelloWorld project -->
<button bindtap="button_bindtap">Click Me!</button>
// index.js
button_bindtap: function () {
  ...

这样，当用户单击按钮（button组件）时，就会执行button_bindtap函数。input组件的bindinput属性与button组件的bindtap属性类似，我们也需要将它关联到函数inputBindInput：

<!-- index.wxml, the Controls project -->
<input bindinput="inputBindInput" />

上面的代码会在用户输入内容时执行 inputBindInput 函数。并且，bindinput 属性关联的函数需要接收一个参数e：

// index.js
inputBindInput: function(e) {
  ...

这样，我们就可以通过参数e的detail属性的value属性获得用户输入的内容了：

inputBindInput: function(e) {
  console.log(e.detail.value);
},

切换到调试器的“Console”选项卡，并在输入框中随便输入一些内容，看看“Console”中会显示出什么？

当然，你一定会很纠结于“参数e的detail属性的value属性”这种陈述，并觉得自己肯定记不住怎么才能通过参数e获得用户输入的内容。事实上，在使用JavaScript语言时，绝大多数人都无法很容易地记住类似e.detail.value这样复杂的调用。我们通常需要重新翻查一下参考资料，因此你可能需要把本书保存好，以备不时之需。不过，除了参考资料之外，还有一个工具能够在这种时候帮你一把，这个工具就是调试器。

通过在“console.log”这一行设置断点，并在输入框中输入任意内容，我们就可以让微信小程序的执行过程暂停下来。如图2-7所示，首先，我们在调试器中找到与“index.js”对应的文件“index.js? [sm]”。接下来，我们在右侧单击“console.log”这一行的行号“3”，就可以设置断点了。最后，我们在输入框中输入“1”，小程序就会在断点处停下来。这个时候，我们就可以在“Scope”选项卡中查看参数e的值了。

图2-7 使用调试器查看参数e的值

利用调试器，我们可以随时查看任意变量的值，也就不必刻意地记忆 e.detail.value 这种复杂的调用了。当然，调试器还有更多的使用场景，我们会在后面的章节更多地介绍它。

2.2.2 input组件与数据绑定

现在我们来了解一下如何通过数据绑定读取input组件的内容。在1.3.4节，我们已经使用过一次数据绑定了，当时，我们利用text组件和数据绑定来显示“Hello World!”：

<!-- index.wxml, the HelloWorld project -->
<text>{{ result }}</text>
// index.js
this.setData({
  result: "Hello World!"
});

数据绑定不仅可以显示出我们在JS文件中为变量设置的值，还可以反过来设置JS文件中变量的值。要想实现这一效果，我们首先需要在JS文件的data中定义变量inputValue：

// index.js, the Controls project
Page({
  data: {
    inputValue: "",
  },
  ...

接下来，我们就可以将inputValue绑定到input组件的value属性了：

<!-- index.wxml -->
<input model:value="{{ inputValue }}" />

需要注意的是，我们必须将inputValue绑定到model:value，而不是value。我们稍后会解释为什么要这么做。绑定好之后，我们就可以读取input组件的内容了：

<view class="control">
  <input model:value="{{ inputValue }}" />
  <button bindtap="inputButtonBindTap">log input</button>
</view>
// index.js
inputButtonBindTap: function() {
  console.log(this.data.inputValue);
},

现在我们解释一下为什么要将inputValue绑定到model:value。如果我们将inputValue绑定到value，也就是采用下面的代码：

<!-- Fake codes -->
<input value="{{ inputValue }}" />

那么此时的绑定将会是单向的。也就是说，如果我们在JS文件中设置inputValue的值：

// Fake codes
this.setData({
  inputValue: "Some value"
});

那么 input 组件中的内容会随着变化。但是，如果我们修改 input 组件中的内容，inputValue变量的值并不会随着变化。只有将inputValue绑定到model:value时，绑定才是双向的。

微信小程序在发布之初就支持单向数据绑定。在那之后很久，腾讯公司才为微信小程序提供了有限的双向数据绑定功能。你可以从微信官方文档了解到关于双向数据绑定的更多内容。