【愚公系列】《微信小程序与云开发从入门到实践》017-提供用户交互功能的组件

原创

愚公搬代码

发布于 2025-01-16 00:39:49

72600

代码可运行

文章被收录于专栏：愚公系列-书籍专栏愚公系列-书籍专栏

运行总次数：0

代码可运行

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

🚀前言

在微信小程序的开发过程中，用户交互功能的实现是提升用户体验的关键。而微信小程序提供了一系列强大的组件，专门用于增强用户与应用之间的互动。这些组件不仅丰富了小程序的功能，也为开发者提供了灵活的工具，以满足不同场景下的交互需求。

本篇文章将深入探讨微信小程序中主要的用户交互组件，包括按钮、表单、滑动条、对话框等。我们将详细分析每个组件的特性、使用方法以及最佳实践，帮助你更好地理解如何通过这些组件来提升用户体验。

无论你是小程序开发的新手，还是希望优化现有应用的资深开发者，这篇文章都将为你提供实用的见解和技巧。让我们一起探索微信小程序提供的用户交互功能组件，创造出更加引人入胜的小程序体验吧！

🚀一、提供用户交互功能的组件

🔎1.button(按钮)组件及应用

按钮是页面开发中最常用的交互组件之一。小程序框架提供的 button 组件可配置的属性众多，可以通过实际代码演示来体验这些属性的效果。

🦋1.1 示例：在 `buttonDemo` 页面中使用按钮组件

在 buttonDemo.wxml 文件中编写如下代码：

<!-- pages/buttonDemo/buttonDemo.wxml -->
<view>
  <button type="primary">Normal</button>
  <button type="primary" loading="true">Loading</button>
  <button type="primary" disabled="true">Disabled</button>
  <button type="default">default</button>
  <button type="warn">Warn</button>
  <button type="primary" plain="true">Plain</button>
  <button type="primary" disabled="true" plain="true">Plain Disabled</button>
  <button class="mini-btn" type="primary" size="mini">Mini Primary</button>
</view>

在 buttonDemo.wxss 文件中为 button 组件添加边距样式：

/* pages/buttonDemo/buttonDemo.wxss */
button {
  margin: 20px;
}

运行代码后，效果如图所示。可以看到，默认的按钮组件样式简洁美观，很多时候，我们的小程序风格应尽量与微信应用程序整体风格保持协调，使用框架默认的样式是一个不错的选择。

🦋1.2 button 组件可配置的属性

button 组件支持以下可配置的属性：

属性名	类型	意义
size	字符串	设置按钮的尺寸类型，可选值为：
		`default`: 默认大小
		`mini`: 小尺寸
type	字符串	设置按钮样式类型，可选值为：
		`primary`: 主题色调按钮（绿色）
		`default`: 默认色调按钮（白色）
		`warn`: 警告色调按钮（红色）
plain	布尔值	设置是否为空的描边按钮
disabled	布尔值	设置是否禁用按钮
loading	布尔值	设置是否带 loading 状态
form-type	字符串	用于表单组件内，点击会触发表单的 submit 事件
open-type	字符串	关联的微信开放能力，可选值为：
		`contact`: 打开客服会话
		`share`: 触发用户转发
		`getPhoneNumber`: 获取用户手机号
		`getUserInfo`: 获取用户信息
		`launchApp`: 打开 App
		`openSetting`: 打开授权设置页
		`feedback`: 打开意见反馈页面
		`chooseAvatar`: 获取用户头像
hover-stop-propagation	布尔值	设置是否阻止本节点的祖先节点出现点击状态
hover-class	字符串	设置按钮按下时亮起的样式类
hover-start-time	数值	设置按钮按住后出现点击态的延迟时间，默认值为 20ms
hover-stay-time	数值	设置点击态消失后的延迟时间，默认值为 70ms
lang	字符串	指定返回用户信息的语言，可选值为：
		`en`: 英文
		`zh_CN`: 简体中文
		`zh_TW`: 繁体中文
session-from	字符串	设置会话来源
send-message-title	字符串	设置发送消息卡片标题，当 `open-type` 为 `contact` 时有效
send-message-path	字符串	设置发送消息卡片点击后跳转小程序路径，当 `open-type` 为 `contact` 时有效
send-message-img	字符串	设置发送消息卡片图片，当 `open-type` 为 `contact` 时有效
app-parameter	字符串	设置打开 APP 时传递的参数，当 `open-type` 为 `launchApp` 时有效
show-message-card	布尔值	设置是否显示会话消息卡片，当 `open-type` 为 `getUserInfo` 时有效
bindgetuserinfo	函数	获取用户信息的回调，当 `open-type` 为 `getUserInfo` 时有效
bindcontact	函数	客服消息回调，当 `open-type` 为 `contact` 时有效
bindgetphonenumber	函数	获取用户手机号的回调，当 `open-type` 为 `getPhoneNumber` 时有效
binderror	函数	使用开放能力时失败的回调调，适用于所有 `open-type`
bindopensetting	函数	打开授权设置页的回调，当 `open-type` 为 `openSetting` 时有效
bindlaunchapp	函数	打开 APP 完成后的回调，当 `open-type` 为 `launchApp` 时有效
bindchooseavatar	函数	获取用户头像的回调，当 `open-type` 为 `chooseAvatar` 时有效

示例：按钮集成微信分享能力

例如，要接入微信的分享能力，只需设置 open-type="share"：

<button class="mini-btn" type="primary" size="mini" open-type="share">Mini Primary</button>

🔎2.switch(开关)组件及应用

switch 组件是一类特殊的按钮，它有开启和关闭两种状态。在很多应用的设置页面，都有类似的开关，比如控制是否有消息提示音，是否接收推送消息等。在 pages 文件夹下新建一组名为 switchDemo 的页面文件，在 switchDemo.wxml 文件中编写如下代码：

<!-- pages/switchDemo/switchDemo.wxml -->
<view>
  <switch checked="{{switchData}}" bindchange="switchChange"/> 开关按钮
</view>
<view style="margin: 20px;"></view>
<view>
  <switch type="checkbox" checked="{{checkData}}" bindchange="checkChange"/> 选择框按钮
</view>

上述代码中，使用了两个 switch 组件，其中一个设置为开关类型，另一个设置为选择按钮类型。在 switchDemo.js 文件中编写与之匹配的代码：

// pages/switchDemo/switchDemo.js
Page({
  data: {
    switchData: false,
    checkData: false
  },
  switchChange: function(data) {
    console.log(data.detail);
  },
  checkChange: function(data) {
    console.log(data.detail);
  }
});

当用户切换了开关按钮的状态时，会触发绑定的回调函数，传递进来的参数中的 detail 属性表示当前开关的状态。

运行上述代码，效果如图所示。

switch 组件的属性

属性名	类型	意义
checked	布尔值	当前开关是否开启或选中
disabled	布尔值	设置按钮是否禁用
type	字符串	设置按钮的类型，可选值为：
		`switch`: 开关类型
		`checkbox`: 选择框类型
color	字符串	设置按钮的颜色
bindchange	函数	设置开关状态改变时的回调函数

🔎3.checkbox 组件与 checkbox-group 组件及应用

当 switch 组件的 type 属性设置为 checkbox 时，其会渲染出一个选择框样式的按钮。其实在小程序开发框架中，专门提供了 checkbox 与 checkbox-group 组件来处理需要使用选择框的场景。checkbox 组件和 checkbox-group 组件内部可以定义一组 checkbox 组件，我们只需要在 checkbox-group 组件上绑定用户选择状态改变的事件即可。

在 pages 文件夹下新建一组名为 checkboxDemo 的页面文件，在 checkboxDemo.wxml 文件中编写如下代码：

<!-- pages/checkboxDemo/checkboxDemo.wxml -->
<checkbox-group bindchange="change">
  <checkbox value="足球">足球</checkbox>
  <checkbox value="篮球">篮球</checkbox>
  <checkbox value="乒乓球">乒乓球</checkbox>
</checkbox-group>

在 checkboxDemo.js 文件中实现绑定的回调事件函数：

// pages/checkboxDemo/checkboxDemo.js
Page({
  change: function(data) {
    console.log(data.detail.value);
  }
});

运行代码，页面上会显示一组选择框，当这一组选择框中的任意一个选中状态发生了变化时，都会调用回调函数，在其传递的参数中会装一个数组对象，数组中存放的是所有选中状态的 checkbox 的 value 值。

上面的代码运行效果如图所示。

checkbox-group 组件的作用是包含一组 checkbox 组件，其本身并没有与 UI 有关的配置属性，只有一个 bindchange 属性可以设置。

checkbox 组件的属性

属性名	类型	意义
value	字符串	选择框的标识，触发 `checkbox-group` 组件的 `bindchange` 回调函数时，多数会携带所选中选择框的 `value` 值
disabled	布尔值	设置是否禁用
checked	布尔值	设置选择框是否选中
color	字符串	设置选择框的颜色

🔎4.radio 组件与 radio-group 组件及应用

通过 checkbox 与 checkbox-group 组合使用，相当于创建了一组支持多选的选择框组件。有些场景下，同样需要一组选择框，只是这些选择框互相之间是有约束关系的，即只能进行单选。这时候就需要使用 radio 和 radio-group 组件。

在 pages 文件夹下新建一组名为 radioDemo 的页面文件，在 radioDemo.wxml 文件中编写如下代码：

以下是识别的内容：

<radio-group bindchange="radioChange">
  <radio value="男">男</radio>
  <view style="margin: 20px;"></view>
  <radio value="女">女</radio>
  <view style="margin: 20px;"></view>
  <radio value="保密">保密</radio>
</radio-group>

在 radioDemo.js 文件中实现回调函数如下：

// pages/radioDemo/radioDemo.js
Page({
  radioChange: function(data) {
    console.log(data.detail);
  }
});

需要注意，由于 radio 组件通常要求一组选项中只能选择一个，也就是说选项间是互斥的，因此在开发中要将互斥的选项放入同一个 radio-group 组件。运行上述代码，效果如图所示。

radio-group 组件与 checkbox-group 组件类似，其只提供了一个 bindchange 属性用于绑定回调事件。

radio 组件的属性

属性名	类型	意义
value	字符串	单选框的标识，触发 `radio-group` 组件的 `bindchange` 回调时，参数会携带选中的 `radio` 的 `value` 值
checked	布尔值	设置当前选中的列表项
disabled	布尔值	设置是否禁用
color	字符串	设置选中框的颜色

🔎5.input 组件与 textarea 组件及应用

input 是一种单行文本输入组件，在需要接受用户输入的场景中会经常使用到，例如登录注册界面。新建一组名为 inputDemo 的页面文件，在 inputDemo.wxml 文件中编写如下示例代码：

<!-- pages/inputDemo/inputDemo.wxml -->
<view style="margin: 20px;">
  <input style="border: 2px red solid;" placeholder="文本输入框" type="text"/>
</view>
<view style="margin: 20px;"></view>
<view style="margin: 20px;">
  <input style="border: 2px red solid;" placeholder="数字输入框" type="number"/>
</view>
<view style="margin: 20px;"></view>
<view style="margin: 20px;">
  <input style="border: 2px red solid;" placeholder="密码输入框" type="password"/>
</view>
<view style="margin: 20px;"></view>
<view style="margin: 20px;">
  <input style="border: 2px red solid;" placeholder="输入框文本长度限制为10" maxlength="10"/>
</view>

input 组件可以通过 type 属性设置弹出键盘的类型。例如对于输入手机号码的场景，可以设置弹出的键盘为数字类型。input 组件所支持的属性较多，如表所示。

属性名	类型	意义
value	字符串	输入框中的内容
type	字符串	设置输入框弹出键盘的类型，可选值为：
		`text`: 文本输入键盘
		`number`: 数字输入键盘
		`idcard`: 身份证输入键盘
		`digit`: 带小数点的数字键盘
		`safe-password`: 密码安全输入键盘
		`nickname`: 昵称输入键盘
password	布尔值	设置是否为加密输入框，输入的文本会被处理成密文形式
placeholder	字符串	设置输入框为空时的占位文本
placeholder-style	字符串	设置占位文本的样式
placeholder-class	字符串	设置占位文本的样式类
disabled	布尔值	设置是否禁用
maxlength	数值	设置输入框内容可接受的最大文本长度，设置为 `-1`，为不限制
cursor-spacing	数值	设置光标与键盘间的间距
auto-focus	布尔值	设置是否自动获取焦点
focus	布尔值	设置获取焦点
confirm-type	字符串	设置键盘右下角按钮的文本，可选值为：
		`send`: 发送
		`search`: 搜索
		`next`: 下一个
		`go`: 前往
		`done`: 完成
always-embed	布尔值	强制键盘在组件失去焦点时保持不收起
confirm-hold	布尔值	设置点击键盘中的确认按钮后键盘是否保持不收起
cursor	数值	设置光标所在的位置
selection-start	数值	设置选中文本的起始位置
selection-end	数值	设置选中文本的结束位置
adjust-position	布尔值	设置是否自适应位置，即键盘弹出时是否自动上推输入框
hold-keyboard	布尔值	设置键盘弹出时，点击页面是否保持键盘不收起
safe-password-cert-path	字符串	设置安全键盘加密公钥的路径
safe-password-length	数值	设置安全键盘输入的密码长度
safe-password-time-stamp	数值	设置安全键盘加密的时间戳
safe-password-nonce	字符串	设置安全键盘加密盐值
safe-password-salt	字符串	设置安全键盘加密盐值
safe-password-custom-hash	字符串	设置安全键盘计算 `hash` 的算法表达式
bindinput	函数	设置键盘输入时触发的回调
bindfocus	函数	设置输入框获得焦点时触发的回调
bindblur	函数	设置输入框失去焦点时触发的回调
bindconfirm	函数	设置点击键盘上的「完成」按钮时触发的回调
bindkeyboardheightchange	函数	设置键盘高度发生变化时触发的回调

input 组件只支持单行文本的输入，对于需要输入大量文本的场景，需要使用另一组件：textarea。textarea 为输入区域组件，其用法与 input 组件非常类似，示例如下：

<textarea placeholder="文本区域" style="height: 300px; border: red 1px solid;"></textarea>

运行代码，可以尝试在文本输入区域中点击软键盘输入多行文本，如图所示。

🔎6.editor 组件及应用

在前面的小节中，我们学习了富文本渲染组件 rich-text。有时候，用户不仅需要浏览富文本内容，甚至还需要生成富文本内容。小程序开发框架中提供了 editor 组件来支持富文本的输入。editor 的使用非常简单，且能够支持大部分富文本输入场景。

示例：使用 editor 组件

首先在 pages 文件夹下新建一组名为 editorDemo 的页面文件，在 editorDemo.wxml 文件中编写如下代码：

<!-- pages/editorDemo/editorDemo.wxml -->
<view>
  粗体: <switch bindchange="formatBold"></switch>
  斜体: <switch bindchange="formatItalic"></switch>
</view>
<view>
  上标: <switch bindchange="formatSuper"></switch>
  下标: <switch bindchange="formatSub"></switch>
</view>
<view>
  红色文字: <switch bindchange="formatColor"></switch>
  黄色背景: <switch bindchange="formatBG"></switch>
</view>
<view>
  <button type="primary" size="mini" bindtap="insertImg">图片</button>
  <button type="primary" size="mini" bindtap="insertDivider">分割线</button>
  <button type="primary" size="mini" bindtap="undo">撤回</button>
  <button type="primary" size="mini" bindtap="redo">恢复</button>
  <button type="primary" size="mini" bindtap="log">Log</button>
</view>
<editor 
  style="height: 300px; border: red 1px solid;" 
  placeholder="请输入文本编辑内容" 
  show-img-toolbar="{{true}}" 
  show-img-size="{{true}}" 
  show-img-resize="{{true}}" 
  bindready="onEditorReady">
</editor>

上述代码中，添加了许多控制富文本格式的按钮，例如字体加粗、斜体字体、文字添加颜色、文字添加背景、插入图片和分割线等。这些按钮和切换开关组件（switch 和button）我们在前面的章节已经学习过，editor 组件则是本节学习的重点。

Editor 组件的属性

属性名	类型	意义
read-only	布尔值	设置编辑器是否为只读
placeholder	字符串	设置内容文本为空时的提示文案
show-img-size	布尔值	设置点击内容中的图片时，是否展示图片的尺寸信息
show-img-toolbar	布尔值	设置点击内容中的图片时，是否展示图片的工具栏
show-img-resize	布尔值	设置点击内容中的图片时，是否可以修改图片的尺寸
bindready	函数	设置编辑器初始化完成时触发的回调
bindfocus	函数	设置编辑器获取焦点时触发的回调
bindblur	函数	设置编辑器失去焦点时触发的回调
bindinput	函数	设置编辑器内容发生变化时触发的回调
bindstatuschange	函数	设置编辑器使用的样式发生变化时触发的回调

可以看到，editor 组件本身可设置的属性并不多。读者可能会感到奇怪，editor 组件是怎么控制富文本的样式的，又是如何设置富文本内容或者让用户输入富文本内容的。这些工作需要通过 JavaScript 逻辑代码来完成。

使用 JavaScript 控制 editor 组件

在 editorDemo.js 文件中编写如下逻辑代码：

// pages/editorDemo/editorDemo.js
Page({
  // 富文本组件准备完成后，通过 JS 获取富文本实例
  onEditorReady: function() {
    wx.createSelectorQuery().select('#editor').context((result) => {
      this.editorContext = result.context;
    }).exec();
  },
  
  // 插入分割线
  insertDivider: function() {
    this.editorContext.insertDivider();
  },
  
  // 撤回
  undo: function() {
    this.editorContext.undo();
  },
  
  // 恢复
  redo: function() {
    this.editorContext.redo();
  },
  
  // 粗体
  formatBold: function(event) {
    this.editorContext.format('bold');
  },
  
  // 斜体
  formatItalic: function() {
    this.editorContext.format('italic');
  },
  
  // 上标
  formatSuper: function() {
    this.editorContext.format('script', 'super');
  },
  
  // 下标
  formatSub: function() {
    this.editorContext.format('script', 'sub');
  },
  
  // 颜色
  formatColor: function() {
    this.editorContext.format('color', '#ff0000');
  },
  
  // 背景色
  formatBG: function() {
    this.editorContext.format('backgroundColor', '#fdf4d7');
  },
  
  // 打印富文本内容
  log: function() {
    this.editorContext.getContents().then((res) => {
      console.log(res);
    });
  },
  
  // 插入图片
  insertImg: function() {
    this.editorContext.insertImage({
      src: "http://huishao.cc/img/head-img.png"
    });
  }
});

在 JavaScript 逻辑代码中，所有的富文本编辑器逻辑都是通过富文本编辑器上下文对象实现的，可以在 onEditorReady 回调中拿到富文本编辑器上下文对象，使用如下方法：

wx.createSelectorQuery().select('#editor').context((result) => {
  this.editorContext = result.context;
}).exec();

wx.createSelectorQuery 用来生成一个选择器对象，调用其 select 方法可以获取到页面中定义的组件 JavaScript 实例。editor 实例调用 context 方法可以获得其上下文对象。需要注意，此 context 方法是一个异步函数，调用 exec 执行后，可以在设置的 context 回调参数中拿到上下文对象，将其保存即可。

使用 EditorContext 上下文对象可以实现对富文本编辑器的样式管理、内容导入导出、图片插入等功能。EditorContext 对象中提供的方法如表所示。

方法名	参数	意义
format	String name: 要设置的样式名 String value: 要设置的样式值，此参数可选	富文本编辑器的核心方法。调用此方法改变某个样式，再次设置相同的样式会取消此样式的使用。设置样式后，用户再输入的文本将使用最新的样式。
insertDivider	Object object: { Function success: 成功后的回调 Function fail: 失败后的回调 Function complete: 完成后的回调 }	向编辑器中当前光标的位置插入分割线
insertImage	Object object: { String src: 图片的路径 String alt: 图片加载失败的替代文本 Number width: 图片的宽度 Number height: 图片的高度 String extClass: 添加到 img 标签上的类名 Object data: 设置为对象，会被挂载到 data-custom 属性上 Function success: 插入图片成功后的回调 Function fail: 插入图片失败后的回调 Function complete: 插入图片完成后的回调 }	向编辑器中当前光标的位置插入图片
insertText	Object object: { String text: 插入的文本 Function success: 插入文本成功后的回调 Function fail: 插入文本失败后的回调 Function complete: 插入文本完成后的回调 }	向编辑器中当前光标位置插入文本
setContents	Object object: { String html: html格式的富文本内容 Object delta: 使用对象描述的富文本内容 Function success: 成功后的回调 Function fail: 失败后的回调 Function complete: 完成后的回调 }	设置编辑器中的内容
getContents	Object object: { Function success: 成功后的回调 Function fail: 失败后的回调 Function complete: 完成后的回调 }	获取编辑器中的内容
clear	参数同上	清空编辑器中的内容
removeFormat	参数同上	清空当前编辑器设置的样式
undo	参数同上	撤销操作
redo	参数同上	恢复操作
blur	参数同上	使编辑器失去焦点，收起键盘
scrollIntoView	无	使光标滚动到窗口的可视区域内
getSelectionText	Object object: { Function success: 成功后的回调 Function fail: 失败后的回调 Function complete: 完成后的回调 }	获取当前选中区域的文本

上面列举的方法中，format 方法是控制样式的核心方法。当我们需要设置用户即将输入的文本的样式时，调用这个方法设置即可。这个方法有两个参数：name 和 value. 富文本组件支持的样式 name 及其对应的 value 值如表所示。

format 方法的 name 参数	对应的 value 参数	解释
bold	无	设置粗体样式，如果当前已经是粗体样式，再次设置会清除粗体
italic	无	设置斜体样式，如果当前已经是斜体样式，再次设置会清除斜体
underline	无	设置下划线样式，如果当前已经是下划线样式，再次设置会清除下划线
strike	无	设置删除线样式，如果当前已经是删除线样式，再次设置会清除删除线
ins	无	设置插入文本样式，如果当前已经是插入文本样式，再次设置会清除插入文本样式
script	sub: 下标 super: 上标	设置下标或上标样式
header	H1: 一级标题	设置标题样式
	H2: 二级标题
	H3: 三级标题
	H4: 四级标题
	H5: 五级标题
	H6: 六级标题
align	left: 左对齐	设置对齐样式
	center: 中间对齐
	right: 右对齐
	justify: 两端对齐
direction	rtl: 从右到左	设置字序
indent	-1/+1	设置缩进
list	ordered: 有序列表	设置列表样式
	bullet: 无序列表
	check: 选择框列表
color	十六进制颜色字符串	设置文本颜色样式
backgroundColor	十六进制颜色字符串	设置文本背景色样式
margin	(包括 marginTop, marginBottom, marginLeft, marginRight)	与 CSS 可设置值一致	设置外边距
padding	(包括 paddingTop, paddingBottom, paddingLeft, paddingRight)	与 CSS 可设置值一致	设置内边距
font	(包括 fontSize, fontStyle, fontVariant, fontWeight, fontFamily)	与 CSS 可设置值一致	设置字体相关样式
lineHeight	与 CSS 可设置值一致	设置行高样式
letterSpacing	与 CSS 可设置值一致	设置字符间距
textDecoration	与 CSS 可设置值一致	设置文本样式
textIndent	与 CSS 可设置值一致	设置文本缩进
wordWrap	与 CSS 可设置值一致	设置换行模式
wordBreak	与 CSS 可设置值一致	设置断行模式
whiteSpace	与 CSS 可设置值一致	设置空格样式

可以看到，控制台打印的富文本内容对象中有3部分数据：text为内容的纯文本数据；html为内容的 html 格式的富文本数据，可以将其保存，在任意的浏览器中进行渲染；delta为富文本内容的对象描述形式，其清晰地记录富文本中每一块内容的样式属性等数据，也可以将其保存后再次使用 editor 组件渲染。

🔎7.label组件、keyboard-accessory组件与 form 组件及应用

label组件用来扩展其绑定的组件的可响应区域；keyboard-accessory组件用来设置可随键盘调整位置的工具栏视图；form组件用来组合一组可交互组件的值一起提交，对于开发表单提交类的页面非常方便。

在示例工程的 pages 文件夹下新建一组名为 toolsDemo 的页面文件。

🦋7.1 基本用法及优化体验

回想一下我们学习过的 button、checkbox、radio、switch 和 input 组件，这些组件很多时候都不是单独出现的，尤其是 checkbox、radio 和 switch 组件。这三个组件本身没有描述信息，只是提供开关或选择功能，通常需要为其配备描述文本，例如下面的代码所示：

<!-- pages/toolsDemo/toolsDemo.wxml -->
<switch></switch>开关
<view style="margin: 20px;"></view>
<checkbox></checkbox>选择框
<view style="margin: 20px;"></view>
<radio></radio>单选

运行上述代码。我们发现，当点击页面中的文案描述部分时，switch、checkbox 和 radio 组件并不会改变状态。这也就是说，必须点击这些交互组件本身才会触发组件的交互事件。这对用户来说体验并不太友好，尤其是在移动端设备上，设备的屏幕尺寸有限，用户手指操作的灵敏度也有局限性，这就要求组件有足够大的交互响应区域，可以将交互组件和文本同时包装进 label 组件中，这样当用户点击文本时，也能触发同 label 组件内的交互组件的事件。修改上述代码如下：

<!-- pages/toolsDemo/toolsDemo.wxml -->
<label><switch></switch>开关</label>
<view style="margin: 20px;"></view>
<label><checkbox></checkbox>选择框</label>
<view style="margin: 20px;"></view>
<label><radio></radio>单选</label>

再次编译代码，点击交互组件旁的文本，可以看到交互组件也可以正常响应了。

🦋7.2 使用 `keyboard-accessory` 组件

keyboard-accessory 组件需要配合能够弹出键盘的输入类组件进行使用。很多时候，输入框会配套工具栏进行使用，例如对于富文本编辑器来说，工具栏上可以放置文本格式控制按钮。当键盘弹出或收起时，工具栏也需要做同步的位置变动，此时使用 keyboard-accessory 组件就非常方便。编写如下示例代码：

<!-- pages/toolsDemo/toolsDemo.wxml -->
<textarea>
  <keyboard-accessory>
    <cover-view>工具栏</cover-view>
  </keyboard-accessory>
</textarea>

需要注意，上述代码只能在真机中进行测试，模拟器本身没有键盘弹出。此外，在 keyboard-accessory 组件内部编写工具栏时，一定要使用 cover-view 组件，这是一个覆盖在原生组件上的容器组件，直接使用 view 组件不能实现预期的效果。

🦋7.3 使用 `form` 组件

最后，我们再来看一下 form 组件。本章中介绍的 switch、input、checkbox 等交互组件在接收到用户的输入后，这些输入数据一般都要向服务端提交保存。例如编写如下示例代码：

<!-- pages/toolsDemo/toolsDemo.wxml -->
<label><switch></switch>开关</label> 
<view style="margin: 20px;"></view>
<checkbox-group>
  <label><checkbox value="1"></checkbox>选择框1</label>
  <label><checkbox value="2"></checkbox>选择框2</label>
</checkbox-group>
<view style="margin: 20px;"></view>
<radio-group>
  <label><radio value="1"></radio>单选1</label>
  <label><radio value="2"></radio>单选2</label>
</radio-group>
<button>提交</button>

可以为页面中的 button 组件添加一个点击事件，当用户点击提交按钮后，将页面上的组件的输入状态进行提交。但这样操作起来非常繁琐，首先要为每一个交互组件添加状态改变的事件处理函数，在处理函数中根据用户输入来存储对应的变量，当用户点击提交按钮时，将存储的变量的值进行提交。

也可以直接使用 form 组件将需要提交数据的交互组件进行包装。在使用 form 组件时，将要进行数据提交的交互组件放入 form 组件内，并且为 form 组件本身添加 report-submit 属性绑定提交事件。在 form 内部的交互组件需要添加 name 属性来为其设置 key，form 组件中的 button 组件上设置 form-type 属性为 submit 来实现提交功能。在触发的提交处理函数中，会将 form 内部所有交互组件的值作为参数传递。示例代码如下：

<!-- pages/toolsDemo/toolsDemo.wxml -->
<form bindsubmit="submit">
  <label><switch name="switch"></switch>开关</label>
  <view style="margin: 20px;"></view>

  <checkbox-group name="checkbox">
    <label><checkbox value="1"></checkbox>选择框1</label>
    <label><checkbox value="2"></checkbox>选择框2</label>
  </checkbox-group>
  <view style="margin: 20px;"></view>

  <radio-group name="radio">
    <label><radio value="1"></radio>单选1</label>
    <label><radio value="2"></radio>单选2</label>
  </radio-group>
  
  <button form-type="submit">提交</button>
</form>

实现 submit 处理函数如下：

// pages/toolsDemo/toolsDemo.js
Page({
  submit: function(data) {
    console.log(data.detail.value);
  }
});

运行代码，改变一下页面中各个按钮和选择框的状态，点击提交按钮后，观察控制台的输出，可以看到 form 组件已经将要提交的数据进行了聚合，使用非常方便。

🔎8.slider(滑块)组件及应用

slider 组件提供了一种范围内数据取值的方式，常用在音量调节、亮度调节等场景中。在示例工程的 pages 文件夹下新建一组名为 sliderDemo 的页面文件，在 sliderDemo.wxml 文件中编写如下代码：

<!-- pages/sliderDemo/sliderDemo.wxml -->
<slider min="{{0}}" max="{{50}}" step="{{2}}" value="{{value}}"
        backgroundColor="#ff0000" activeColor="#00ff00"
        show-value bindchanging="sliderChange"></slider>
<text>进度{{value}}</text>

上述代码中，定义了一个 slider 组件，并使用 text 组件来实时显示滑块组件的值。在 sliderDemo.js 文件中实现逻辑代码如下：

// pages/sliderDemo/sliderDemo.js
Page({
  data: {
    value: 10
  },
  sliderChange: function(event) {
    this.setData({
      value: event.detail.value
    });
  }
});

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

slider 组件本身也有许多属性可配置，如表所示。

属性名	类型	意义
min	数值	设置滑块组件的最小值
max	数值	设置滑块组件的最大值
step	数值	设置滑块组件的步长，即控制的精度，需要能够被（max-min）整除
disabled	布尔值	设置组件是否禁用
value	数值	设置组件的当前取值
backgroundColor	字符串	设置滑块组件未选中部分的颜色
activeColor	字符串	设置滑块组件已激活部分的颜色
block-size	数值	设置滑块的大小，取值范围为 12-28
block-color	字符串	设置滑块的颜色
show-value	布尔值	设置组件是否显示当前的值
bindchange	函数	完成一次拖动后松开滑块时触发的回调
bindchanging	函数	滑块在滑动过程中产生值变化时触发的回调

🔎9.picker组件及应用

在应用开发中，经常会遇到一些需要用户从列表中选择一项出来的需求，例如选择生日、选择收货地址等。picker 组件是小程序开发框架中提供的一种标准的选择器组件。通过设置 picker 组件的 mode 属性，可以选择使用的选择器的类型。

在 pages 文件夹下新建一组名为 pickerDemo 的页面文件来编写示例代码。首先可以尝试一下时间选择器的使用，在 pickerDemo.wxml 文件中编写如下代码：

<!-- pages/pickerDemo/pickerDemo.wxml -->
<picker mode="time">点击选择时间</picker>

运行代码后，页面上会显示一行文本：点击选择时间。也可以使用自定义的视图来替换此文本，当用户点击该文本时，会从页面底部弹出选择器列表，如图所示。

时间选择器列表分为两列，左侧一列用来选择“时”，右侧一列用来选择“分”。picker 组件的 mode 为 time 时，其有一些特殊的属性可以用来设置，如表所示。

属性名	类型	意义
value	字符串	设置选中的时间，格式为 “hh:mm”
start	字符串	设置可选时间的起点，格式为 “hh:mm”
end	字符串	设置可选时间的终点，格式为 “hh:mm”
bindchange	函数	设置选择器选中的值发生变化时的回调函数，接收一个参数 `event`，包含具体选择的值

当将 mode 设为 date 时，表示要使用日期选择器。示例代码如下：

<picker mode="date">点击选择日期</picker>

效果如图所示。

日期类型的选择器也有一些特殊的属性可以配置，如表所示。

属性名	类型	意义
value	字符串	设置选中的日期，格式为 “YYYY-MM-DD”
start	字符串	设置可选日期的起点，格式为 “YYYY-MM-DD”
end	字符串	设置可选日期的终点，格式为 “YYYY-MM-DD”
fields	字符串	设置选择器的细粒度，可选值为：`year`、`month`、`day`
bindchange	函数	设置选择器的值发生变化的回调函数

除了时间和日期的选择外，开发中也经常会使用到地址选择的场景。picker 组件也内置了位置（地址）选择类型，示例代码如下：

<picker mode="region">点击选择县镇</picker>

效果如图所示。

位置选择器可配置的属性如表所示。

属性名	类型	意义
value	数组	选中的省市区
custom-item	字符串	为每一列选项的顶部添加一个自定义的选项
level	字符串	设置选择器的层级，可选值为： `province`: 省级选择器、`city`: 市级选择器、`region`: 区级选择器、`sub-district`: 街道选择器
bindchange	函数	设置选择器的值发生变化时的回调函数

picker 除了提供时间、日期和位置选择器外，还提供了两种自定义选择器，可以根据需要来使用。对于单列数据选择来说，可以使用 mode 为 selector 的 picker 组件，示例代码如下：

<picker mode="selector" range="{{dataArray}}" range-key="title">自定义单列选择器</picker>

其中，range 设置选择器列表的数据源，其需要设置为一个数组，数组中可以是任意对象。range-key 设置使用数据源数组中对象的哪个键值来渲染选择列表。在 pickerDemo.js 文件中编写如下代码来提供数据源：

// pages/pickerDemo/pickerDemo.js
Page({
  data: {
    dataArray: [
      {
        title: "公园",
        value: "data1"
      },
      {
        title: "市场",
        value: "data2"
      },
      {
        title: "商场",
        value: "data3"
      }
    ]
  }
});

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

当 mode 为 selector 时，支持设置的属性如表所示。

属性名	类型	意义
range	数组	数据源数组
range-key	字符串	设置用来展示选择器中选项的键值
value	数值	设置当前选中的第几项，从 0 开始计数
bindchange	函数	设置选择器的值发生变化时的回调函数

如果需要使用自定义的多列选择器，picker 组件也是支持的。设置 mode 为 multiSelector 即可。示例代码如下：

<picker mode="multiSelector" range="{{multiDataArray}}" range-key="title">自定义多列选择</picker>

选择器有多列，因此需要提供的数据源数组也需要是二维的，代码如下：

// pages/pickerDemo/pickerDemo.js
Page({
  data: {
    multiDataArray: [
      [
        { title: "1-1" },
        { title: "1-2" }
      ],
      [
        { title: "2-1" },
        { title: "2-2" }
      ]
    ]
  }
});

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

与自定义单列选择器相比，mode 可以为 multiSelector 的 picker 组件使用 bindcolumnchange 属性，当用户对某一列的选择发生变化时，监听此方法。此模式下的 picker 组件可配置的属性如表所示。

属性名	类型	意义
range	二维数组	数据源数组
range-key	字符串	设置用来展示选择器中选项的键值
value	数组	数组中的每一项表示对应列中选择的第几个
bindchange	函数	Picker 选择器的值发生变化时的回调
bindcolumnchange	函数	Picker 所选择的列中选项发生变化时的回调

现在，已经基本上将 picker 组件的用法介绍完了。除了上面提到的针对某个 mode 下 picker 组件所支持的特定属性外，picker 组件还有一些通用的属性可用，如表所示。

属性名	类型	意义
header-text	字符串	设置选择器的标题，仅在 Android 设备下有效
mode	字符串	设置选择器的模式，可选值为：
		`selector`: 自定义单列选择器
		`multiSelector`: 自定义多列选择器
		`time`: 时间选择器
		`date`: 日期选择器
		`region`: 省市区选择器
disabled	布尔值	设置是否禁用
bindcancel	函数	点击选择器上的取消按钮触发的回调

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

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

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

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

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

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