微信小程序之wx.showActionSheet(OBJECT)弹出的后续处理

最新推荐文章于 2025-06-12 14:36:32 发布

原创最新推荐文章于 2025-06-12 14:36:32 发布 · 8.4k 阅读

5 ·

CC 4.0 BY-SA版权

微信小程序专栏收录该内容

1 篇文章

订阅专栏

本文介绍了微信小程序中使用wx.showActionSheet显示操作菜单的功能，并详细讲解了如何处理点击事件，通过success回调获取所点击的按钮编号。示例代码展示了如何根据返回的编号执行不同操作，如保存到相册并利用wx.showToast显示保存成功的提示信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

https://developers.weixin.qq.com/miniprogram/dev/api/api-react.html#wxshowactionsheetobject

这是官方的文档

这个api是用来显示操作菜单，弹出一个菜单框，用来显示一些操作，如下图

查看文档OBJECT参数说明：

参数	类型	必填	说明
itemList	String Array	是	按钮的文字数组，数组长度最大为6个
itemColor	HexColor	否	按钮的文字颜色，默认为"#000000"
success	Function	否	接口调用成功的回调函数，详见返回参数说明
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

success返回参数说明：

参数	类型	说明
tapIndex	Number	用户点击的按钮，从上到下的顺序，从0开始

该函数调用成功的回调会返回一个所点击按钮的编号，对这个数字进行获取，就能实现点击的对应事件了。

示例代码:

tapIndex: 0,
share: function () {
  wx.showActionSheet({
      itemList: ['保存图片','分享给好友','分享到朋友圈'],
      success: function (res1) {
        tapIndex: res1.tapIndex;
          success: function (res) {
            if (tapIndex == 0){
              wx.saveImageToPhotosAlbum({
                filePath: res.tempFilePath,
              })
              wx.showToast({
                title: '保存成功',
                icon: 'success',
                duration: 1500
              });
            }
	    if (tapIndex == 1){
	        /*
	        *******
	        */
            }	
          }
        });
      },
          fail: function (res) {
              console.log(res.errMsg)
          }   
    });
}

上面代码首先定义了一个变量tapIndex用来存储一下success返回的值，注意两个回调函数都需要一个res参数，所以不用写都写为res，注意区分。之后对这个值进行判断，不同的值通过不同的函数来进行处理，上面写出了保存到相册的方法，同时保存成功时调用另一个弹框的函数

wx.showToast(OBJECT)

该函数即为向屏幕上显示一个信息框，同样Object的参数也可以参考官方文档。

https://developers.weixin.qq.com/miniprogram/dev/api/api-react.html

参数	类型	必填	说明
title	String	是	提示的内容
icon	String	否	图标，有效值 "success", "loading", "none"
image	String	否	自定义图标的本地路径，image 的优先级高于 icon
duration	Number	否	提示的延迟时间，单位毫秒，默认：1500
mask	Boolean	否	是否显示透明蒙层，防止触摸穿透，默认：false
success	Function	否	接口调用成功的回调函数
fail	Function	否	接口调用失败的回调函数
complete	Function	否	接口调用结束的回调函数（调用成功、失败都会执行）

示例代码

wx.showToast({

     title: '保存成功',

     icon: 'success',

     duration: 1500

});

这样就实现了保存图片后弹出一个保存成功的消息框。如下图