微信小程序的四种弹窗使用

在做小程序的过程中，弹窗也算是非常实用的功能了，这几天写的几个功能就用到了弹窗，也可能是初学者的问题，比较菜，想找一个可以带图片的自定义的弹窗，，这里简单介绍一下官方封装好的四个弹窗，感觉适合简单的使用，，想在展示多点内容就不太够了。。

一、wx.showModal

微信小程序提供的用于显示模态对话框的 API，它允许开发者创建一个居中显示的弹窗，用来显示重要信息或请求用户确认操作。

参数说明：

标题（title）：弹窗的标题，可以自定义。
内容（content）：弹窗显示的具体内容，可以是文本或 HTML 格式。
显示取消按钮（showCancel） ：是否显示取消按钮，默认为 true。
取消按钮文案（cancelText）：自定义取消按钮的文案，默认为"取消"。
取消按钮颜色（cancelColor）：自定义取消按钮的文字颜色。
确定按钮文案（confirmText）：自定义确定按钮的文案，默认为"确定"。
确定按钮颜色（confirmColor）：自定义确定按钮的文字颜色。

代码演示

javascript 复制代码

wx.showModal({
  title: '提示',
  content: '这是一个模态弹窗，需要用户确认操作。',
  success: function (res) {
    if (res.confirm) {
      console.log('用户点击确定');
      // 用户点击确定后的逻辑处理
    } else if (res.cancel) {
      console.log('用户点击取消');
      // 用户点击取消后的逻辑处理
    }
  },
  fail: function (err) {
    console.error('弹窗失败', err);
    // 弹窗失败的错误处理
  }
});

二、wx.showActionSheet

微信小程序中用于显示操作菜单（Action Sheet）的 API，它提供了一种从屏幕底部弹出的菜单选项，供用户选择操作。

参数说明：

itemList：按钮的文字数组，数组长度最大为6，这是必需的参数。

itemColor：按钮的文字颜色，默认为 #000000。

success：接口调用成功的回调函数，回调参数 res 包含 tapIndex，表示用户点击的按钮序号，从上到下的顺序，从0开始。

fail：接口调用失败的回调函数。

complete：接口调用结束的回调函数（调用成功、失败都会执行）。

代码演示

javascript 复制代码

wx.showActionSheet({
  itemList: ['选项1', '选项2', '选项3'],
  itemColor: '#FF0000', // 自定义文字颜色
  success (res) {
    if (!res.cancel) {
      console.log(res.tapIndex);
      // 这里可以根据点击的索引执行相应操作
    }
  },
  fail (res) {
    console.log(res.errMsg);
  }
});

三、 wx.showLoading

微信小程序提供的 API，用于在屏幕上显示一个加载提示框，通常用于数据加载或进行某些耗时操作时告知用户正在处理中。

参数说明：

title：字符串类型，显示的提示内容，默认为 "加载中"。

mask：布尔类型，是否显示透明蒙层，防止触摸穿透，默认为 false。

代码演示：

javascript 复制代码

// 显示加载提示框
wx.showLoading({
  title: '数据加载中',
  mask: true
});

// 假设进行一些异步操作
setTimeout(() => {
  // 隐藏加载提示框
  wx.hideLoading();
  // 如果需要，可以执行其他操作
}, 2000);

四、wx.showToast

微信小程序提供的 API，用于在屏幕上显示一个轻量级的消息提示框（Toast），用来给用户反馈操作结果或状态信息。

参数说明：

title：字符串类型，显示的消息内容。

icon：字符串类型，图标类型，有效值包括 success、loading 和 none，默认为 none。

duration：数字类型，提示的显示时间，单位毫秒，默认为 2000 毫秒。

mask：布尔类型，是否显示透明蒙层，默认为 false。

success：函数类型，接口调用成功的回调函数。

fail：函数类型，接口调用失败的回调函数。

complete：函数类型，接口调用结束的回调函数（调用成功、失败都会执行）。

代码演示：

javascript 复制代码

// 显示成功的提示
wx.showToast({
  title: '操作成功',
  icon: 'success'
});

// 显示加载中的提示
wx.showToast({
  title: '加载中',
  icon: 'loading'
});

// 自定义显示时间
wx.showToast({
  title: '自定义时长',
  duration: 3000
});

总结

总而言之，这四个能处理很少一部分弹窗效果个人感觉，因为支持的方法太少了，前几天想找个支持照片跟文字的，尝试好久都不行，