🚀前言

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

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

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

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

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

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

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

1. 在 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>

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

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

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

🦋1.2 button 组件可配置的属性

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

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

例如，要接入微信的分享能力，只需设置 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 组件的属性

🔎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 组件的属性

🔎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 组件的属性

🔎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 组件所支持的属性较多，如表所示。

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 组件的属性

可以看到，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 方法是控制样式的核心方法。当我们需要设置用户即将输入的文本的样式时，调用这个方法设置即可。这个方法有两个参数：name 和 value. 富文本组件支持的样式 name 及其对应的 value 值如表所示。

可以看到，控制台打印的富文本内容对象中有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 组件本身也有许多属性可配置，如表所示。

🔎9.picker组件及应用

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

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

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

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

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

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

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

效果如图所示。

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

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

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

效果如图所示。

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

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 时，支持设置的属性如表所示。

如果需要使用自定义的多列选择器，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 组件可配置的属性如表所示。

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