🚀前言

在数字化时代，微信小程序作为一种新兴的应用形态，凭借其轻便、易用的特性，迅速成为了各类企业和开发者的重要工具。为了提升用户体验，微信小程序提供了丰富的界面交互API，使开发者能够更灵活地设计和实现各种交互效果。

本篇文章将深入探讨微信小程序中界面交互相关API的使用，包括常见的交互组件、事件处理、动画效果等。我们将通过实际案例，帮助开发者快速掌握这些API的用法，提升小程序的交互体验和用户满意度。

🚀一、界面交互相关API的使用

🔎1.关于 Toast与Loading 组件

🦋1.1 Toast 组件

☀️1.1.1 功能说明

• Toast 组件用于在界面上展示一段简短的提示信息，提示用户操作结果（如文件上传、下载是否完成等），无须用户进一步的交互。
• Toast 通常会自动消失，可以设置持续时间。

☀️1.1.2 实现步骤

🌈1.1.2.1 在页面中添加按钮

在 alertDemo.wxml 中，添加一个按钮用于触发 Toast 弹窗：

<!-- pages/alertDemo/alertDemo.wxml -->
<view style="margin:20px">
  <button type="primary" bindtap="toast">弹出 Toast</button>
</view>

🌈1.1.2.2 在 alertDemo.js 中实现按钮的点击事件

// pages/alertDemo/alertDemo.js
Page({
  toast: function() {
    wx.showToast({
      title: 'Toast提示标题',  // 提示内容
      icon: 'error',           // 提示图标类型，可选值：success/error/loading/none
      duration: 5000,          // 提示持续时间，单位毫秒，默认1500ms
      mask: true               // 是否显示透明背景遮罩，防止背景被点击
    });
  }
});

☀️1.1.3 wx.showToast 方法的参数说明

☀️1.1.4 手动隐藏 Toast

如果需要在 Toast 显示过程中手动将其消失，可以使用 wx.hideToast() 方法：

wx.hideToast({
  success: (res) => {},
  fail: (error) => {},
  complete: () => {}
});

🦋1.2 Loading 组件

☀️1.2.1 功能说明

• Loading 组件用于提示用户当前正在进行某项操作，通常用于数据加载过程中，告诉用户需要等待。
• Loading 不会自动消失，除非手动调用 wx.hideLoading() 来隐藏。

☀️1.2.2 实现步骤

🌈1.2.2.1 在页面中添加按钮

在 alertDemo.wxml 中，再添加一个按钮来触发显示 Loading：

<!-- pages/alertDemo/alertDemo.wxml -->
<view style="margin:20px">
  <button type="primary" bindtap="loading">弹出 Loading</button>
</view>

🌈1.2.2.2 在 alertDemo.js 中实现按钮的点击事件

// pages/alertDemo/alertDemo.js
Page({
  loading: function() {
    wx.showLoading({
      title: '请稍等...',  // Loading提示内容
    });
  }
});

☀️1.2.3 wx.showLoading 方法的参数说明

☀️1.2.4 手动隐藏 Loading

Loading 组件不会自动消失，需要手动调用 wx.hideLoading() 来隐藏：

wx.hideLoading({
  success: (res) => {},
  fail: (error) => {},
  complete: () => {}
});

🔎2.可交互的用户弹窗和抽屉功能接口

这段内容讲解了 模态对话框 和 活动列表 的使用场景及实现方法。以下是整理后的详细信息：

🦋2.1 模态对话框 (Modal)

☀️2.1.1 功能说明

• 模态对话框 用于展示需要用户进行确认的操作，通常用于重要的交互反馈，如提示确认、选择等。
• 可以展示取消和确认按钮，用户点击其中一个按钮后，执行相应的回调逻辑。

☀️2.1.2 实现步骤

🌈2.1.2.1 调用 wx.showModal 方法

模态对话框通过 wx.showModal 方法来弹出，其基本用法如下：

// 示例：弹出模态对话框
modal: function() {
  wx.showModal({
    title: "温馨提示",                    // 设置标题
    content: "是否确认选择",              // 设置内容
    showCancel: true,                    // 是否展示取消按钮
    cancelText: "取消",                  // 取消按钮文字
    cancelColor: "#000000",              // 取消按钮颜色
    confirmText: "确认",                 // 确认按钮文字
    confirmColor: "#0000f",              // 确认按钮颜色
    editable: false,                     // 是否可编辑（用于输入框）
    placeholderText: "",                 // 输入框提示文字
    success: ({ content, confirm, cancel }) => {  // 用户点击按钮后的回调
      console.log("点击确认:" + confirm);
      console.log("点击取消:" + cancel);
    },
    fail: (error) => {
      console.log("调用失败", error);
    },
    complete: () => {
      console.log("调用完成");
    }
  });
}

☀️2.1.3 wx.showModal 方法的属性说明

☀️2.1.4 回调函数参数说明

• success 回调：当用户点击“确认”或“取消”按钮时，回调函数会接收到以下参数：
  • confirm: true 表示点击了确认，false 表示点击了取消。
  • cancel: true 表示点击了取消按钮，false 表示点击了确认按钮。

☀️2.1.5 示例效果

• 弹出的模态对话框可以让用户进行选择，并通过 success 回调来获取选择的结果。

🦋2.2 活动列表 (Action Sheet)

☀️2.2.1 功能说明

• 活动列表 是一种从页面底部弹出的操作菜单，用户可以点击菜单中的选项进行交互。通常用于提供多个操作选项，用户可以选择其中的一个进行操作。

☀️2.2.2 实现步骤

🌈2.2.2.1 调用 wx.showActionSheet 方法

活动列表通过 wx.showActionSheet 方法来弹出，以下是基本示例：

// 示例：弹出活动列表
actionSheet: function() {
  wx.showActionSheet({
    alertText: "操作列表",              // 设置提示文案
    itemList: ["按钮 1", "按钮 2", "按钮 3"], // 设置菜单中的按钮列表
    itemColor: "#000000",              // 设置菜单按钮的文字颜色
    success: (res) => {                // 点击菜单项后的回调
      console.log("点击了按钮:" + res.tapIndex); // `tapIndex` 表示点击的按钮索引
    },
    fail: (error) => {
      console.log("调用失败", error);
    },
    complete: () => {
      console.log("调用完成");
    }
  });
}

☀️2.2.3 wx.showActionSheet 方法的属性说明

☀️2.2.4 回调函数参数说明

• success 回调：点击菜单项后，回调函数会接收到以下参数：
  • tapIndex: 被点击的菜单项的索引，从 0 开始。

☀️2.2.5 示例效果

• 弹出的活动列表可以让用户选择操作，点击某个菜单项时，回调函数会返回点击项的索引。

🦋2.3 退出二次确认功能

☀️2.3.1 功能说明

• 退出二次确认 是一种提示功能，用户点击页面的返回按钮时，会弹出确认框，要求用户确认是否退出页面。

☀️2.3.2 开启退出二次确认

通过 wx.enableAlertBeforeUnload 方法开启二次确认功能，示例如下：

// 开启退出二次确认
wx.enableAlertBeforeUnload({
  message: "确定退出?", // 弹出提示内容
  success: () => {
    console.log("确认退出");
  },
  fail: () => {
    console.log("取消退出");
  },
  complete: () => {
    console.log("确认框调用完成");
  }
});

☀️2.3.3 关闭退出二次确认

通过 wx.disableAlertBeforeUnload 方法关闭退出二次确认功能，示例如下：

// 关闭退出二次确认
wx.disableAlertBeforeUnload({
  success: () => {
    console.log("退出二次确认已关闭");
  },
  fail: () => {
    console.log("关闭失败");
  },
  complete: () => {
    console.log("调用完成");
  }
});