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

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

一、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
});

总结

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

相关推荐
小着6 分钟前
微信小程序组件中二维码生成问题解决方案
前端·微信小程序
sen_shan8 分钟前
《微信小程序》第六章:参数定义与管理
微信小程序·小程序
他们叫我秃子4 小时前
从 0 到 1,我用小程序 + 云开发打造了一个“记忆瓶子”,记录那些重要的日子!
前端·微信小程序·小程序·云开发
2501_915106324 小时前
iOS 反编译防护工具与实战组合 从静态侦察到 IPA 成品加固的工程化路径
android·ios·小程序·https·uni-app·iphone·webview
星光一影5 小时前
快递比价寄件系统技术解析:基于PHP+Vue+小程序的高效聚合配送解决方案
vue.js·mysql·小程序·php
苹果电脑的鑫鑫6 小时前
微信小程序原生如何使用画布生成名片
微信小程序·小程序
Dragon Wu6 小时前
Taro 自定义tab栏和自定义导航栏
前端·javascript·小程序·typescript·前端框架·taro
游戏开发爱好者87 小时前
iOS 26 iPhone 使用记录分析 多工具组合构建全方位设备行为洞察体系
android·ios·小程序·uni-app·cocoa·iphone·webview
星光一影20 小时前
Java医院管理系统HIS源码带小程序和安装教程
java·开发语言·小程序
毕设源码-郭学长21 小时前
【开题答辩全过程】以 基于微信小程序的个性化饮品定制点餐系统设计与实现为例,包含答辩的问题和答案
微信小程序·小程序