【愚公系列】《微信小程序开发解析》008-表单组件

🏆 作者简介，愚公搬代码
🏆《头衔》：华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。
🏆《近期荣誉》：2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主等。
🏆《博客内容》：.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
🏆🎉欢迎 👍点赞✍评论⭐收藏

---

🚀前言

微信小程序中的表单组件是用于创建和管理用户输入的界面元素。这些组件允许开发者在小程序中轻松地收集用户信息，比如文本、数字、选择项等。表单组件通常用于需要用户填写信息的场景，如注册、登录、提交订单、反馈等。

1. 表单容器：用于包裹表单元素，提供表单提交的功能。

2. 输入框：用于接收用户输入的文本信息。可以设置不同类型，如文本、数字、密码等。

3. 多行文本输入框：用于接收用户输入的多行文本信息。

4. 按钮：用于表单提交或执行其他操作。

5. 复选框：用于让用户进行多选操作。

6. 复选框组：用于把多个复选框组合在一起，便于管理。

7. 单选框：用于让用户在多个选项中选择一个。

8. 单选框组：用于把多个单选框组合在一起，便于管理。

9. 开关 ：用于表示两种状态（开/关）。

10. 滑动选择器：用于选择一个范围内的值。

11. 选择器：用于选择单项或多项内容，常用于日期、时间等选择。

12. 标签：用于提升表单的可用性，通过点击标签可以选中关联的表单控件。

这些表单组件可以单独使用，也可以组合使用来创建复杂的表单界面。微信小程序提供的这些组件大大简化了表单的开发过程，让开发者可以更高效地创建用户友好的表单界面。

🚀一、表单组件

🔎1.form组件

在微信小程序中，<form> 组件用于包裹表单元素，提供表单提交的功能。

🦋1.1 <form> 组件的属性

1. report-submit (boolean): 是否返回 formId 用于发送模板消息。默认为 false。
2. bindsubmit (event handler): 表单提交时触发的事件，返回表单提交时的详细信息。
3. bindreset (event handler): 表单重置时触发的事件，返回表单重置时的详细信息。

🦋1.2 使用示例

下面是一个包含 <form> 组件的简单示例，演示了如何使用各种表单元素，并处理表单的提交和重置事件：

<view class="container">
  <form bindsubmit="formSubmit" bindreset="formReset">
    <view class="form-item">
      <text>姓名：</text>
      <input name="name" placeholder="请输入姓名" />
    </view>
    <view class="form-item">
      <text>年龄：</text>
      <input name="age" type="number" placeholder="请输入年龄" />
    </view>
    <view class="form-item">
      <text>性别：</text>
      <radio-group name="gender">
        <label>
          <radio value="male" /> 男
        </label>
        <label>
          <radio value="female" /> 女
        </label>
      </radio-group>
    </view>
    <view class="form-item">
      <text>兴趣爱好：</text>
      <checkbox-group name="hobbies">
        <label>
          <checkbox value="reading" /> 阅读
        </label>
        <label>
          <checkbox value="traveling" /> 旅行
        </label>
        <label>
          <checkbox value="sports" /> 运动
        </label>
      </checkbox-group>
    </view>
    <view class="form-item">
      <button formType="submit">提交</button>
      <button formType="reset">重置</button>
    </view>
  </form>
</view>

🦋1.3 JavaScript 代码

在对应的 JavaScript 文件中，需要定义表单提交和重置的处理函数：

Page({
  formSubmit(e) {
    console.log('表单提交，数据为：', e.detail.value);
    // 可以在此处处理表单数据，比如发送请求到服务器
  },
  formReset(e) {
    console.log('表单重置');
    // 可以在此处执行表单重置后的操作
  }
});

🦋1.4 属性和事件详解

• report-submit: 如果设置为 true，提交表单时会返回 formId，可以用于发送模板消息。

• bindsubmit: 表单提交时触发的事件，返回一个事件对象，包含表单提交时的所有数据（通过 e.detail.value 获取）。

• bindreset: 表单重置时触发的事件，通常用于处理表单重置后的逻辑。

🔎2.input组件

微信小程序中的 input 组件是用于单行文本输入的组件，它有许多属性和事件用于控制和处理用户输入。

<view>
  <input type="text" placeholder="请输入内容" bindinput="handleInput" />
</view>

🦋2.1 参数列表

☀️2.1.1 属性（Property）

1. type: 输入框的类型。有以下几种类型：

   • text: 文本输入键盘
   • number: 数字输入键盘
   • idcard: 身份证输入键盘
   • digit: 带小数点的数字键盘
   • safe-password: 安全密码输入键盘（iOS 需 12.0 及以上版本）

2. value: 输入框的初始内容。

3. placeholder: 输入框为空时占位符。

4. placeholder-style: 指定占位符的样式。

5. placeholder-class: 指定占位符的样式类。

6. disabled: 是否禁用输入框。

7. maxlength: 最大输入长度，设置为 -1 的时候不限制最大长度。

8. password: 是否是密码类型。

9. cursor-spacing: 指定光标与键盘的距离。

10. focus: 获取焦点。

11. confirm-type: 设置键盘右下角按钮的文字，只对 text 类型有效。

    • 可选值：send, search, next, go, done

12. confirm-hold: 点击键盘右下角按钮时是否保持键盘不收起。

13. cursor: 指定光标的位置。

14. selection-start: 光标起始位置，自动聚集时有效，需与 selection-end 配合使用。

15. selection-end: 光标结束位置，自动聚集时有效，需与 selection-start 配合使用。

16. adjust-position: 键盘弹起时，是否自动上推页面。

17. hold-keyboard: focus 时，点击页面的时候不收起键盘。

18. auto-blur: 键盘收起时，是否自动失去焦点。

☀️2.1.2 事件（Event）

1. bindinput: 当键盘输入时，触发 input 事件，处理函数可以获得 event.detail.value。

2. bindfocus: 输入框聚焦时触发，处理函数可以获得 event.detail。

3. bindblur: 输入框失去焦点时触发，处理函数可以获得 event.detail.value。

4. bindconfirm: 点击完成按钮时触发，处理函数可以获得 event.detail.value。

5. bindkeyboardheightchange: 键盘高度变化时触发，处理函数可以获得 event.detail.height。

🦋2.2 例子

<view>
  <input 
    type="text" 
    value="{{inputValue}}" 
    placeholder="请输入内容" 
    maxlength="20" 
    bindinput="handleInput" 
    bindfocus="handleFocus" 
    bindblur="handleBlur" 
    bindconfirm="handleConfirm" 
  />
</view>

Page({
  data: {
    inputValue: ''
  },
  handleInput(e) {
    this.setData({
      inputValue: e.detail.value
    });
  },
  handleFocus(e) {
    console.log('输入框聚焦', e.detail);
  },
  handleBlur(e) {
    console.log('输入框失去焦点', e.detail.value);
  },
  handleConfirm(e) {
    console.log('点击完成按钮', e.detail.value);
  }
});

🔎3.textarea组件

在微信小程序中，textarea 是一个多行文本输入组件，允许用户输入大量文本。

🦋3.1 基本使用

首先，在小程序的 WXML 文件中使用 <textarea> 标签来定义一个多行文本输入框。例如：

<view class="container">
  <textarea placeholder="请输入内容" bindinput="handleInput"></textarea>
</view>

🦋3.2 常用参数

textarea 组件支持多种属性，下面列出了一些常用的属性和事件：

• value：多行输入框的初始内容，类型为字符串。
• placeholder：输入框为空时的占位符，类型为字符串。
• placeholder-style：占位符样式，类型为字符串。
• placeholder-class：占位符 CSS 类，类型为字符串。
• disabled：是否禁用输入框，类型为布尔值。
• maxlength：最大输入长度，设置为 -1 时不限制最大长度，类型为数字。
• auto-focus：自动聚焦，拉起键盘，类型为布尔值。
• focus：获取焦点，类型为布尔值。
• auto-height：是否自动增高，设置为true时，文本超出时会自动增高，类型为布尔值。
• fixed：如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true，类型为布尔值。
• show-confirm-bar：是否显示键盘上方带有”完成“按钮那一栏，类型为布尔值。
• selection-start：光标起始位置，类型为数字。
• selection-end：光标结束位置，类型为数字。
• adjust-position：键盘弹起时，是否自动上推页面，类型为布尔值。

🦋3.3 事件

textarea 组件还支持绑定多个事件处理函数：

• bindinput：输入事件处理函数，返回输入框内容。
• bindfocus：获得焦点事件处理函数。
• bindblur：失去焦点事件处理函数。
• bindlinechange：行数变化时的事件处理函数。

🦋3.4 示例代码

以下是一个完整的示例，包括 WXML 和 JavaScript 文件：

☀️3.4.1 WXML 文件

<view class="container">
  <textarea 
    value="{{textValue}}" 
    placeholder="请输入内容" 
    placeholder-style="color: #999999;"
    maxlength="140"
    auto-height="true"
    bindinput="handleInput"
    bindfocus="handleFocus"
    bindblur="handleBlur"
    bindlinechange="handleLineChange"
  ></textarea>
</view>

☀️3.4.2 JavaScript 文件

Page({
  data: {
    textValue: ''
  },

  handleInput: function (e) {
    this.setData({
      textValue: e.detail.value
    });
  },

  handleFocus: function (e) {
    console.log('获得焦点', e);
  },

  handleBlur: function (e) {
    console.log('失去焦点', e);
  },

  handleLineChange: function (e) {
    console.log('行数变化', e.detail.lineCount);
  }
});

☀️3.4.3 样式 (WXSS)

.container {
  padding: 20px;
}

textarea {
  width: 100%;
  min-height: 200px;
  border: 1px solid #ccc;
  padding: 10px;
  box-sizing: border-box;
}

🔎4.checkbox组件

在微信小程序中，checkbox 组件用于在表单中提供多个选项，用户可以选择一个或多个选项。

🦋4.1 参数和属性

checkbox 组件有以下主要属性：

1. value:

   • 类型：String
   • 描述：<checkbox> 标识，选中时触发 change 事件时会携带的 value 值。

2. checked:

   • 类型：Boolean
   • 描述：当前是否选中。

3. disabled:

   • 类型：Boolean
   • 描述：是否禁用。

4. color:

   • 类型：String
   • 描述：checkbox的颜色，同css的color。

🦋4.2 使用方法

以下是一个简单的使用示例，展示如何在微信小程序中使用 checkbox 组件来创建一个多选表单。

<!-- index.wxml -->
<view class="container">
  <form bindsubmit="formSubmit">
    <checkbox-group name="gj" bindchange="checkboxChange">
      <label wx:for="{{items}}" wx:key="{{item.value}}">
        <checkbox value="{{item.value}}" checked="{{item.checked}}"/>{{item.name}}
      </label>
    </checkbox-group>
    <button formType="submit">提交</button>
  </form>
</view>

// index.js
Page({
  data: {
    items: [
      {name: 'USA', value: '美国'},
      {name: 'CHN', value: '中国', checked: 'true'},
      {name: 'BRA', value: '巴西'},
      {name: 'JPN', value: '日本'},
      {name: 'ENG', value: '英国'},
      {name: 'FRA', value: '法国'}
    ]
  },

  checkboxChange(e) {
    console.log('checkbox发生change事件，携带value值为：', e.detail.value)
  },

  formSubmit(e) {
    console.log('form发生了submit事件，携带数据为：', e.detail.value)
  }
});

🦋4.3 解释

• checkbox-group: 这是一个容器组件，用于包裹多个 <checkbox> 组件。它会在 change 事件中提供所有选中的 checkbox 的 value。
• label: <label> 标签用于包装 <checkbox>，这样用户点击标签时也可以触发 checkbox 的选中状态。
• bindchange: 绑定一个事件处理函数，当 checkbox 状态发生改变时触发。
• bindsubmit: 绑定一个事件处理函数，当表单提交时触发。

表单提交

当表单提交时，formSubmit 方法会被调用，并且可以通过 e.detail.value 获取表单中所有 checkbox 的值。

事件处理

• checkboxChange: 当 checkbox 的状态发生变化时，会调用此方法。e.detail.value 会包含所有选中的 checkbox 的值。

🔎5.switch组件

在开发微信小程序时，switch 组件是一个常用的开关控件。它允许用户在开和关两种状态之间进行切换。这是一个非常基础但功能强大的组件，适用于各种场景，如设置界面、表单等。

🦋5.1 switch 组件的基本用法

在 WXML 文件中，可以通过以下方式使用 switch 组件：

<switch checked="{{isChecked}}" bindchange="switchChange"/>

🦋5.2 switch 组件的属性

以下是 switch 组件的常用属性：

• checked: 是否选中，布尔值，默认值为 false。
• disabled: 是否禁用，布尔值，默认值为 false。
• type: 样式类型，switch 或 checkbox，默认值为 switch。
• color: 开关颜色，当 type 为 switch 时有效。

🦋5.3 事件处理

• bindchange: 当开关状态改变时触发的事件，事件处理函数会接收到一个事件参数，其中 detail.value 表示开关的当前状态。

🦋5.4 完整示例

☀️5.4.1 WXML

<view class="container">
  <switch 
    checked="{{isChecked}}" 
    disabled="{{isDisabled}}" 
    type="switch" 
    color="#4cd964" 
    bindchange="switchChange"
  />
  <button bindtap="toggleDisabled">Toggle Disabled</button>
</view>

☀️5.4.2 JS

Page({
  data: {
    isChecked: false,
    isDisabled: false
  },

  switchChange: function(e) {
    console.log('switch 发生 change 事件，携带值为', e.detail.value)
    this.setData({
      isChecked: e.detail.value
    })
  },

  toggleDisabled: function() {
    this.setData({
      isDisabled: !this.data.isDisabled
    })
  }
})

☀️5.4.3 WXSS

.container {
  padding: 20px;
}

🔎6.radio组件

在微信小程序中，<radio> 组件用于创建单选按钮，而 <radio-group> 组件用于将多个单选按钮组合在一起。

🦋6.1 <radio> 组件的参数

• value：string。单选按钮的标识。当单选按钮被选中时，这个值会传递给 <radio-group> 的 bindchange 事件。
• checked：boolean。是否选中状态，默认值为 false。
• disabled：boolean。是否禁用，默认值为 false。
• color：string。单选按钮的颜色。

🦋6.2 <radio-group> 组件的参数

• bindchange：事件处理函数。当某个单选按钮的选中状态改变时触发，事件对象包含 detail.value，即选中的 radio 的 value。

🦋6.3 使用示例

以下是一个简单的微信小程序页面示例，展示如何使用 <radio> 和 <radio-group> 组件：

<!-- pages/index/index.wxml -->
<view class="container">
  <radio-group bindchange="radioChange">
    <label wx:for="{{items}}" wx:key="value">
      <radio value="{{item.value}}" checked="{{item.checked}}" /> {{item.name}}
    </label>
  </radio-group>
</view>

// pages/index/index.js
Page({
  data: {
    items: [
      {name: '选项一', value: 'option1'},
      {name: '选项二', value: 'option2', checked: 'true'},
      {name: '选项三', value: 'option3'},
    ]
  },
  radioChange: function(e) {
    console.log('radio发生change事件，携带value值为：', e.detail.value)
  }
})

🦋6.4 说明

1. 数据绑定：在 data 对象中定义了一个 items 数组，用来存放单选按钮的相关信息，每个对象包含 name 和 value 属性，checked 属性用于指定初始选中的按钮。
2. 事件处理：在 <radio-group> 组件上绑定 bindchange 事件，当用户选中不同的单选按钮时，会触发 radioChange 方法，并传递选中的 value 值。
3. 视图渲染：使用 wx:for 循环遍历 items 数组，动态生成 <radio> 组件。

🔎7.keyboard-accessory组件

微信小程序中的 keyboard-accessory 组件用于在自定义键盘上方显示附加的内容。这个组件非常适合在用户输入时提供额外的操作按钮或提示信息。

🦋7.1 使用方法

1. 在 WXML 文件中使用组件

   <keyboard-accessory>
       <!-- 在这里放入你想要显示的内容 -->
       <view class="accessory-content">
           <button bindtap="onCustomButtonTap">自定义按钮</button>
       </view>
   </keyboard-accessory>
   

2. 在 WXSS 文件中定义样式

   .accessory-content {
       display: flex;
       justify-content: center;
       align-items: center;
       height: 50px; /* 根据实际需求调整高度 */
       background-color: #f2f2f2;
   }
   

3. 在 JS 文件中添加逻辑

   Page({
       onCustomButtonTap() {
           wx.showToast({
               title: '按钮点击',
               icon: 'none'
           });
       }
   });
   

🦋7.2 参数说明

keyboard-accessory 组件没有特定的属性或参数。它的主要作用是作为一个容器，用于放置你希望在键盘上方显示的内容。

🦋7.3 注意事项

• keyboard-accessory 组件只能在 input、textarea 等输入组件的上下文中使用。
• 该组件只在用户激活输入框（如 input 或 textarea）时才会显示。
• 确保内容高度适当，不要遮挡输入区域。

🦋7.4 示例

以下是一个完整的示例，展示如何使用 keyboard-accessory 组件在输入框上方显示一个自定义按钮：

index.wxml

<view class="container">
    <input placeholder="请输入内容" focus="{{focus}}" />
    <keyboard-accessory>
        <view class="accessory-content">
            <button bindtap="onCustomButtonTap">自定义按钮</button>
        </view>
    </keyboard-accessory>
</view>

index.wxss

.container {
    padding: 20px;
}

.accessory-content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    background-color: #f2f2f2;
}

index.js

Page({
    data: {
        focus: true
    },
    
    onCustomButtonTap() {
        wx.showToast({
            title: '按钮点击',
            icon: 'none'
        });
    }
});

🔎8.label组件

在微信小程序开发中，<label>组件用于实现表单元素的标签功能，主要用于绑定对应的<input>或<textarea>组件，使得点击标签可以聚焦到对应的输入控件。

🦋8.1 属性

1. for：用于指定绑定的控件的 id。当点击该 label 时，绑定的控件会获得焦点。
   • 类型：String
   • 默认值：无

🦋8.2 事件

<label>组件本身没有特定的事件，但它可以包含其他表单元素，并且可以通过点击 label 触发这些表单元素的事件。

🦋8.3 示例代码

<view class="container">
  <!-- 用户名部分 -->
  <label for="username">用户名：</label>
  <input id="username" type="text" placeholder="请输入用户名" />
  
  <!-- 密码部分 -->
  <label for="password">密码：</label>
  <input id="password" type="password" placeholder="请输入密码" />
  
  <!-- 提交按钮 -->
  <button type="primary">提交</button>
</view>

注意事项

• label 组件的 for 属性值必须与目标控件的 id 属性值一致，才能实现预期的绑定效果。
• label 组件可以包含其他的元素，不仅限于文本，例如图片或图标，这样可以丰富表单的交互界面。

🔎9.slider组件

在微信小程序中，slider 组件是一个滑动选择器，可以用于选择一个范围内的值。

🦋9.1 基本参数

1. min: 最小值，默认为 0。
2. max: 最大值，默认为 100。
3. step: 步长，默认为 1。
4. value: 当前取值，默认为 0。
5. color: 背景条的颜色，默认为 #e9e9e9。
6. selected-color: 已选择的颜色，默认为 #1aad19。
7. block-size: 滑块的大小，取值范围为 12 - 28，默认为 28。
8. block-color: 滑块的颜色，默认为 #ffffff。
9. show-value: 是否显示当前的 value，默认为 false。
10. disabled: 是否禁用组件，默认为 false。

🦋9.2 事件

1. bindchange: 完成一次拖动后触发的事件，返回参数有 value。
2. bindchanging: 拖动过程中触发的事件，返回参数有 value。

🦋9.3 基本使用示例

// 在 page.json 文件中配置
{
  "usingComponents":}

<!-- 在 .wxml 文件中 -->
<slider min="0" max="100" step="1" value="50" show-value bindchange="sliderChange" />

// 在 .js 文件中
Page({
  data: {
    sliderValue: 50,
  },
  sliderChange(e) {
    this.setData({
      sliderValue: e.detail.value,
    });
    console.log('Slider value changed to:', e.detail.value);
  },
});

🦋9.4 高级使用示例

如果你想展示更复杂的滑块功能，比如自定义样式或在滑动过程中更新数据，可以结合 CSS 和更多事件处理：

<!-- 在 .wxml 文件中 -->
<view class="slider-container">
  <slider min="0" max="100" step="1" value="{{sliderValue}}" show-value block-size="20" block-color="#ff0000" active-color="#00ff00" bindchange="sliderChange" bindchanging="sliderChanging"/>
  <text>当前值：{{sliderValue}}</text>
</view>

// 在 .js 文件中
Page({
  data: {
    sliderValue: 50,
  },
  sliderChange(e) {
    this.setData({
      sliderValue: e.detail.value,
    });
    console.log('Slider change event, value:', e.detail.value);
  },
  sliderChanging(e) {
    console.log('Slider changing event, value:', e.detail.value);
  },
});

/* 在 .wxss 文件中 */
.slider-container {
  padding: 20px;
}

---

🚀感谢：给读者的一封信

亲爱的读者，

我在这篇文章中投入了大量的心血和时间，希望为您提供有价值的内容。这篇文章包含了深入的研究和个人经验，我相信这些信息对您非常有帮助。

如果您觉得这篇文章对您有所帮助，我诚恳地请求您考虑赞赏1元钱的支持。这个金额不会对您的财务状况造成负担，但它会对我继续创作高质量的内容产生积极的影响。

我之所以写这篇文章，是因为我热爱分享有用的知识和见解。您的支持将帮助我继续这个使命，也鼓励我花更多的时间和精力创作更多有价值的内容。

如果您愿意支持我的创作，请扫描下面二维码，您的支持将不胜感激。同时，如果您有任何反馈或建议，也欢迎与我分享。

再次感谢您的阅读和支持！

最诚挚的问候， “愚公搬代码”