组件化思维（下）：表单与交互组件，倾听用户的心声

所属专栏 ：《微信小程序实战笔记30讲》
作者：码力无边

前言

在上一讲中，我们学习了如何使用视图和基础内容组件来"展示"信息给用户。这解决了小程序"说"的问题。但一个好的应用不仅要会说，更要会"听"。它需要能够接收用户的输入、理解用户的选择，从而做出相应的反馈。

今天，我们将聚焦于小程序中负责"倾听"的组件------表单与交互组件。这些组件是连接用户与应用的桥梁，是构建登录注册、信息提交、设置选项等核心功能的基石。

学完本讲，你将掌握如何通过<input>, <form>, <picker>, <button>等组件，打造出功能完整的数据录入和交互界面，让你的小程序真正具备与用户双向沟通的能力。

一、用户输入的窗口：`<input>` 与 `<textarea>`

<input> 和 <textarea> 是我们获取用户文本输入最常用的两个组件。

1. `<input>`：单行输入框

用于输入单行文本，如用户名、密码、手机号等。

核心属性：

value: 输入框的当前内容。
type: 输入框类型。常用的有 text(文本), number(数字), idcard(身份证), digit(带小数点的数字), password(密码)。指定类型可以唤起对应的手机键盘，提升体验。
placeholder: 输入框为空时的占位文本。
maxlength: 最大输入长度。
bindinput: 输入框内容改变时触发的事件。这是获取用户实时输入内容的关键。

动手实践 - 实时获取输入：
WXML:

html 复制代码

<view class="input-wrap">
  <text>用户名：</text>
  <input 
    class="input-item" 
    placeholder="请输入用户名" 
    bindinput="handleUsernameInput"
  />
</view>
<view>你输入的内容是：{{username}}</view>

JS:

javascript 复制代码

Page({
  data: {
    username: ''
  },
  handleUsernameInput: function(event) {
    // event.detail.value 能获取到输入框最新的内容
    console.log(event.detail.value); 
    this.setData({
      username: event.detail.value
    });
  }
})

通过bindinput事件，我们可以实时捕获用户的每一次按键，并更新到data中，实现了数据的双向绑定。

2. `<textarea>`：多行文本域

用于输入大段文本，如用户反馈、文章评论等。它的属性与<input>类似，但多了auto-height等特性。

核心属性：

auto-height: 自动增高，当输入内容超过一行时，文本域会自动撑高。
show-confirm-bar: 是否显示键盘上方带有"完成"按钮的工具栏。

示例：

html 复制代码

<textarea 
  placeholder="请输入您的宝贵意见..." 
  maxlength="200"
  auto-height
/>

二、数据的集结号：`<form>` 组件

当页面上有多个输入项（如注册页面）时，如果一个个去绑定bindinput会很繁琐。<form>组件提供了一种更高效的方式来一次性收集表单内所有输入组件的数据。

<form>通过包裹<input>, <switch>, <picker>等组件，并在点击特定按钮（form-type="submit"）时，通过bindsubmit事件统一提交。

关键点：

表单内的输入组件必须有name属性，作为提交时数据的键名。
触发提交的按钮，必须设置form-type="submit"。

动手实践 - 实现一个登录表单：
WXML:

html 复制代码

<form bindsubmit="handleFormSubmit">
  <view class="form-item">
    <text>账号：</text>
    <input name="account" placeholder="请输入账号"/>
  </view>
  <view class="form-item">
    <text>密码：</text>
    <input name="password" type="password" placeholder="请输入密码"/>
  </view>
  <button form-type="submit" type="primary">登录</button>
  <button form-type="reset">重置</button>
</form>

JS:

javascript 复制代码

Page({
  handleFormSubmit: function(event) {
    // event.detail.value 就是一个包含了所有表单项数据的对象
    // key 是组件的 name，value 是用户输入的值
    const formData = event.detail.value;
    console.log('收到的表单数据：', formData);
    
    if (!formData.account || !formData.password) {
      wx.showToast({
        title: '账号或密码不能为空',
        icon: 'none'
      });
      return;
    }

    // 在这里可以执行登录的网络请求
    wx.showLoading({ title: '登录中...' });
    // ... 模拟登录 ...
    setTimeout(() => {
      wx.hideLoading();
      wx.showToast({ title: '登录成功' });
    }, 1500);
  }
})

使用<form>大大简化了数据收集的逻辑，让代码更清晰、更易于维护。

三、选择的艺术：`<picker>`, `<radio>`, `<checkbox>`

除了文本输入，让用户做选择也是常见的交互。

1. `<picker>`：从底部弹起的滚动选择器

<picker>非常适合从一组固定的选项中进行单项选择，如选择日期、时间、地区、或者自定义的列表。

核心属性：

mode: 选择器类型。常用值：
- selector: 普通选择器（从数组中选）。
- multiSelector: 多列选择器。
- time: 时间选择器。
- date: 日期选择器。
- region: 省市区选择器。
range: 当mode="selector"时，提供选择的数组。
bindchange: 值改变时触发的事件。

动手实践 - 选择学历：
WXML:

html 复制代码

<picker 
  mode="selector" 
  range="{{educationArray}}" 
  bindchange="handleEducationChange"
>
  <view class="picker-display">
    当前选择：{{educationArray[selectedIndex]}}
  </view>
</picker>

JS:

javascript 复制代码

Page({
  data: {
    educationArray: ['高中', '大专', '本科', '硕士', '博士'],
    selectedIndex: 2 // 默认选中'本科'
  },
  handleEducationChange: function(event) {
    // event.detail.value 是选中项的索引（从0开始）
    console.log('选中的索引是：', event.detail.value);
    this.setData({
      selectedIndex: event.detail.value
    });
  }
})

2. `<radio-group>` 与 `<radio>`：单选按钮

用于在一组选项中进行单选。

WXML:

html 复制代码

<radio-group bindchange="handleGenderChange">
  <radio value="male" checked>男</radio>
  <radio value="female" style="margin-left: 20rpx;">女</radio>
</radio-group>
<view>你的选择是：{{gender}}</view>

JS:

javascript 复制代码

Page({
  data: {
    gender: 'male' // 默认值
  },
  handleGenderChange: function(event) {
    // event.detail.value 是被选中的 radio 的 value 值
    this.setData({
      gender: event.detail.value
    });
  }
})

3. `<checkbox-group>` 与 `<checkbox>`：多选框

用于在一组选项中进行多项选择。

WXML:

html 复制代码

<checkbox-group bindchange="handleHobbyChange">
  <checkbox value="coding">编程</checkbox>
  <checkbox value="reading" checked>阅读</checkbox>
  <checkbox value="sports">运动</checkbox>
</checkbox-group>
<view>你的爱好是：{{hobbies.join(', ')}}</view>

JS:

javascript 复制代码

Page({
  data: {
    hobbies: ['reading'] // 默认值
  },
  handleHobbyChange: function(event) {
    // event.detail.value 是一个包含了所有被选中项 value 的数组
    this.setData({
      hobbies: event.detail.value
    });
  }
})

四、不仅仅是按钮：`<button>` 的更多潜能

<button>除了触发普通点击事件和表单提交，它还是小程序开放能力的"钥匙"。通过设置open-type属性，它可以调用微信提供的各种原生功能。

open-type="contact": 打开客服会话。
open-type="share": 触发用户分享。
open-type="getUserInfo": 获取用户信息（已逐渐废弃，推荐使用wx.getUserProfile）。
open-type="getPhoneNumber": 获取用户手机号（需企业认证）。

这些开放能力我们将在后续的实战篇中详细讲解。

结语

今天，我们系统地学习了小程序中负责"倾听"的表单与交互组件。我们掌握了：

使用<input>和<textarea>获取用户的文本输入。
利用<form>组件高效地组织和提交表单数据。
通过<picker>, <radio>, <checkbox>等组件让用户做出选择。
了解了<button>组件背后强大的开放能力。

至此，你的小程序已经同时具备了"说"和"听"的能力，可以构建出绝大多数需要数据录入和用户选择的交互界面了。

但是，用户的操作（比如点击按钮）是如何被小程序精确捕捉并传递给逻辑层的呢？这一切的背后，都依赖于小程序的事件系统 。下一讲，我们将深入探究事件的冒泡机制、bind与catch的区别，以及如何在事件中传递自定义参数，让你对小程序的交互逻辑有更深层次的理解。

我们下篇见！

组件化思维（下）：表单与交互组件，倾听用户的心声