【愚公系列】《微信小程序与云开发从入门到实践》026-WeUl表单类组件介绍

原创

愚公搬代码

发布于 2025-01-19 21:15:36

6710

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

🚀前言

在现代应用开发中，表单是用户与系统交互的重要桥梁。无论是注册、登录、反馈，还是信息收集，表单的设计和实现直接影响到用户的体验和操作的顺畅度。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 组件的属性

属性名	类型	意义
title	字符串	设置标题，如果设置了 title 插槽，则与此属性互斥
subtitle	字符串	设置副标题

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

FormPage 组件支持的插槽

插槽名	意义
title	标题区域
titetips	标题区域的提示内容
sufixtips	底部提交按钮前的提示区域
button	底部的提交按钮区域
footer	页脚的内容区域

🔎3.关于Form 组件

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

Form 组件的属性

属性名	类型	意义
ext-class	字符串	设置组件的 class 类名
rules	数组	设置表单的校验规则列表，其中的每个对象为规则对象
bindsuccess	函数	绑定表单数据校验成功的回调事件
bindfail	函数	绑定表单数据校验失败的回调事件

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

rules 规则对象的属性

属性名	类型	意义
name	字符串	要校验的字段名，与要校验组件的 `prop` 属性对应
message	字符串	校验失败时的提示信息
validator	函数	自定义校验函数
rules	数组或对象	内置校验规则，可以是数组或对象，多条规则时用数组

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

内置校验规则

规则名	值	意义
required	布尔值	是否必填
minlength	数值	校验最小长度
maxlength	数值	校验最大长度
rangelength	数值数组	校验长度范围
bytelength	数值	校验字节长度
range	数值数组	校验数字的大小范围
min	数值	校验数字最小值
max	数值	校验数字最大值
mobile	布尔值	校验手机号
email	布尔值	校验邮箱
url	布尔值	校验 URL
equalTo	字符串	校验与指定字段相等的值

🔎4.关于Cell与Cells 组件

🦋4.1 Cell

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

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

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

Cells 组件的属性

属性名	类型	意义
ext-class	字符串	设置组件的 `class` 类名
title	字符串	设置 `Cells` 组件的标题
footer	字符串	设置 `底部文案 \|

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

🦋4.2 `Cell` 组件的属性

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

Cell 组件的属性

属性名	类型	意义
ext-class	字符串	设置组件的 `class` 类名
icon	字符串	设置左侧的图标，本地资源路径
title	字符串	设置 `Cell` 组件的标题
footer	字符串	设置 `Cell` 组件的底部文案
hover	布尔值	设置是否有点击中效果
link	布尔值	设置右侧是否显示跳转箭头
value	字符串	设置内容文案
show-error	布尔值	当校验出错时，是否将当前 `Cell` 标记为警告状态
prop	字符串	在 `Form` 组件中，表单项的校验字段名
footer	字符串	设置底部提示文案
inline	布尔值	设置表单项是左右排列还是上下排列

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

Cell 组件支持的插槽

插槽名	意义
icon	左侧图标区域
title	标题区域
default	默认插槽，显示 `Cell` 的主要内容
footer	右侧区域，用于显示底部提示或内容

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

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

🦋5.1 `Checkbox-group` 组件

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

Checkbox-group 组件的属性

属性名	类型	意义
ext-class	字符串	设置组件的 `class` 类名
multi	布尔值	设置单选还是多选。`true` 为多选，`false` 为单选
prop	字符串	用来表单校验的字段名
bindchange	函数	绑定选择的选项发生变化时的回调事件

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

🦋5.2 `Checkbox` 组件

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

Checkbox 组件的属性

属性名	类型	意义
ext-class	字符串	设置组件的 `class` 类名
multi	布尔值	设置是否为多选，`true` 表示多选，`false` 表示单选
checked	布尔值	设置是否选中，`true` 表示选中，`false` 表示未选中
value	字符串	选项的值
label	字符串	显示的文案
bindchange	函数	绑定选中状态发生变化时的回调事件

🔎6.关于 Slideview 组件

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

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

属性名	类型	意义
ext-class	字符串	设置组件的 class 类名
disable	布尔值	设置是否禁用当前组件
buttons	数组	左滑后的功能按钮
icon	布尔值	设置按钮是否是图标
show	布尔值	设置当前组件右侧功能按钮的显示隐藏
duration	数值	设置当前组件功能按钮显示隐藏动画的时长，单位为毫秒
throttle	数值	设置手指移动距离超过一定阈值后拉出按钮
bindbuttonTap	函数	绑定点击功能按钮后的回调事件
bindhide	函数	绑定隐藏功能按钮后的回调事件
bindshow	函数	绑定显示功能按钮后的回调事件

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

属性名	类型	意义
ext-class	字符串	设置组件的 class 类名
type	字符串	设置按钮的类型，可选值为： - default: 默认风格 - warn: 警告风格
text	字符串	按钮的标题
src	字符串	如果按钮为图标类型的，此属性设置图标的资源路径
data	任意类型	点击按钮时回传给触发事件参数的数据

🔎7.关于 Uploader 组件

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

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

属性名	类型	意义
ext-class	字符串	设置组件的 `class` 类名
title	字符串	设置组件的标题
tips	字符串	设置组件的提示文案
delete	布尔值	设置是否显示删除按钮
size-type	数组	选择文件尺寸参数（如 ‘original’, ‘compressed’）
source-type	数组	选择文件来源参数（如 ‘album’, ‘camera’）
max-size	数值	设置支持的文件最大尺寸限制（单位：字节）
max-count	数值	设置支持的最大文件个数
files	数组	当前文件列表
select	函数	设置选择文件时的过滤函数
upload	函数	设置文件上传的函数

回调事件

属性名	类型	意义
bindselect	函数	绑定选择文件后触发的回调事件
bindcancel	函数	绑定取消选择后触发的回调事件
bindsuccess	函数	绑定上传成功后触发的回调事件
bindfail	函数	绑定上传失败后触发的回调事件
binddelete	函数	绑定删除文件后触发的回调事件

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

属性名	类型	意义
url	字符串	文件的链接
loading	布尔值	文件是否正在上传中
error	布尔值	上传失败时，存放异常信息

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S11#重启人生

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

腾讯技术创作特训营S11#重启人生

登录后参与评论

0 条评论

热度