🚀前言

在现代应用开发中，表单是用户与系统交互的重要桥梁。无论是注册、登录、反馈，还是信息收集，表单的设计和实现直接影响到用户的体验和操作的顺畅度。WeUI 作为一套专为微信生态设计的用户界面框架，提供了一系列精美且功能强大的表单类组件，使开发者能够快速构建出符合用户期待的交互界面。

本篇文章将重点介绍 WeUI 的表单类组件，包括输入框、选择器、滑动条、开关等。我们将详细解析每个组件的功能、使用方法以及在实际开发中的最佳实践，帮助你深入理解如何利用这些组件提升小程序的用户体验。同时，我们还会分享一些实用的技巧，帮助你应对常见的表单设计挑战，实现更加流畅和美观的用户交互。

无论你是刚刚入门的小程序开发者，还是希望优化现有关联的开发者，这篇文章都将为你提供丰富的知识和实用的工具。让我们一起深入探索 WeUI 表单类组件，为用户打造出更为便捷和友好的交互体验吧！

🚀一、WeUl表单类组件介绍

表单类组件是weU中提供的非常实用的一系列组件，通常在项目开发中，免不了会出现要用户输入的场景，而有用户输入就伴随着用户数据信息的校验与整合，表单组件帮开发者将议些功能进行了封装，使用非常方便。

🔎1.体验 WeUl开发的表单页面

🦋1.1 引入 WeUI 表单类组件

首先，我们来体验一下 WeUI 中提供的表单类组件。在页面配置文件中引入如下自定义组件：

{
  "usingComponents": {
    "mp-form-page": "weui-miniprogram/form-page/form-page",
    "mp-form": "weui-miniprogram/form/form",
    "mp-cells": "weui-miniprogram/cells/cells",
    "mp-cell": "weui-miniprogram/cell/cell",
    "mp-checkbox-group": "weui-miniprogram/checkbox-group/checkbox-group",
    "mp-checkbox": "weui-miniprogram/checkbox/checkbox",
    "mp-slideview": "weui-miniprogram/slideview/slideview",
    "mp-uploader": "weui-miniprogram/uploader/uploader"
  }
}

🦋1.2 示例代码

在对应的 WXML 文件中编写如下示例代码：

<mp-form-page title="完善信息" subtitle="请填写您的基本信息">
  <mp-form>
    <!-- 带说明的列表项 -->
    <mp-cells title="带说明的列表项">
      <mp-cell>
        <view>内容</view>
        <view slot="title">标题</view>
      </mp-cell>
    </mp-cells>
    
    <!-- 单选列表项 -->
    <mp-cells title="单选列表项">
      <mp-checkbox-group multi="{{false}}">
        <mp-checkbox value="0" label="男"></mp-checkbox>
        <mp-checkbox value="1" label="女"></mp-checkbox>
      </mp-checkbox-group>
    </mp-cells>
    
    <!-- 复选列表项 -->
    <mp-cells title="复选列表项">
      <mp-checkbox-group multi="{{true}}">
        <mp-checkbox value="0" label="足球"></mp-checkbox>
        <mp-checkbox value="1" label="篮球"></mp-checkbox>
      </mp-checkbox-group>
    </mp-cells>
    
    <!-- 支持左滑的表单项 -->
    <mp-slideview buttons="{{[{text:'删除', type: 'warn'}]}}">
      <mp-cell value="内容内容内容内容内容内容内容内容内容"></mp-cell>
    </mp-slideview>
    
    <!-- 上传文件功能 -->
    <view style="margin-left: 20px;">
      <mp-uploader></mp-uploader>
    </view>
  </mp-form>
  
  <!-- 底部提示 -->
  <view slot="tips">
    <view>
      <checkbox /> 阅读并同意
      <label style="color:blue;">《相关条款》</label>
    </view>
  </view>
  
  <!-- 按钮 -->
  <view slot="button">
    <button class="weui-btn" type="primary" bindtap="submitForm">确定</button>
  </view>
  
  <!-- 附加内容区域 -->
  <view slot="suffixtips">附加内容区域</view>
  
  <!-- 页脚内容区域 -->
  <view slot="footer">页脚内容区域</view>
</mp-form-page>

🦋1.3 组件介绍

上述代码中使用了以下组件：

• mp-form-page 组件定义了表单页面的整体结构。
• mp-form 组件是表单项的容器组件。
• mp-cells 和 mp-cell 组件用来定义表单中的一行数据。
• mp-checkbox-group 和 mp-checkbox 用来定义单选或多选项。
• mp-slideview 定义支持左滑的表单项。
• mp-uploader 组件用来实现上传文件功能。

🦋1.4 运行效果

运行代码，效果如图所示：

总体看来，WeUI 中的这些表单组件基本足够满足用户提供信息的相关需求。下面我们会依次对这些组件做具体的介绍。

🔎2.关于FormPage 组件

FormPage 组件被称为表单页面组件，作为其他表单组件的容器，定义了整个页面的结构。该组件有两个属性可设置，如表所示。

FormPage 组件的属性

FormPage 组件规范了表单页中不同内容所在的区域，通过自定义组件的插槽技术实现。关于自定义组件的详细介绍，我们会在第 7 章进行讨论。现在只需要了解 FormPage 组件内部的子组件可以通过插槽的方式来定义即可。

FormPage 组件支持的插槽

🔎3.关于Form 组件

Form 组件用于结合 Cell、Cells、Checkbox、Checkbox-group 等组件一起使用，提供有效性校验功能。该组件支持一些重要的属性配置，如表 6-7 所示。

Form 组件的属性

rules 属性可以设置为一个规则列表，列表中包含多个规则对象。规则对象的属性如表所示。

rules 规则对象的属性

内置校验规则可以是单个规则或多个规则，支持如下一些常见规则。所有支持的内置校验规则如表所示。

内置校验规则

🔎4.关于Cell与Cells 组件

🦋4.1 Cell

Cell 可以理解为表单中的一项，在一个表单页面中，每一个要填写的项目都可以是一个 Cell。每个 Cell 组件表示表单中的一个单独项，例如输入框、选择框等。

Cells 组件则用来封装一组 Cell 组件，用于将多个 Cell 组织在一起，形成一个表单项的集合。

Cells 组件主要用于容纳多个 Cell 组件，它支持以下属性，如表所示：

Cells 组件的属性

Cells 组件的默认插槽是其内容部分，即嵌套的多个 Cell 组件。

🦋4.2 Cell 组件的属性

Cell 组件包含许多配置项，以便定制表单项的样式和行为。下表列出了 Cell 组件支持的主要属性，如表所示。

Cell 组件的属性

Cell 组件支持多个插槽，用于定制不同部分的内容。表列出了 Cell 组件支持的插槽。

Cell 组件支持的插槽

🔎5.关于Checkbox-group与Checkbox 组件

Checkbox 组件和 Checkbox-group 组件常用于表单页面中实现选项列表，支持单选和多选功能。选项列表通过这两个组件实现，通常需要配合使用。

🦋5.1 Checkbox-group 组件

Checkbox-group 组件是一个容器组件，用于管理多个 Checkbox 组件。它支持配置一些属性，如表所示：

Checkbox-group 组件的属性

Checkbox-group 组件内部包含多个 Checkbox 组件，管理这些复选框的状态变化。

🦋5.2 Checkbox 组件

Checkbox 组件用于表单项中的单个复选框。它可以配置不同的属性来实现具体的交互效果，如表所示。

Checkbox 组件的属性

🔎6.关于 Slideview 组件

Slideview 组件是一种支持左滑操作的表单项，通常用于表单中需要展示额外功能按钮的场景。通过左滑手势，右侧会出现预设的功能按钮，用户可以通过点击这些按钮进行相应操作。

Slideview 组件支持的属性如下表所示：

Slideview 组件可以配置一组功能按钮，定义功能按钮对象的属性如下表所示：

🔎7.关于 Uploader 组件

Uploader 组件是 WeUI 中封装的图片上传组件，适用于表单页面中用户需要上传图片、音频等文件的场景。通过该组件，可以方便地实现文件上传功能。

Uploader 组件支持多种属性配置，用于控制组件的外观、行为和文件上传过程。以下是 Uploader 组件支持的属性，如表示：

回调事件

以下是 files 属性中每个文件对象包含的信息，如表所示：