小程序API —— 52 小程序界面交互 - 模态对话框 - 消息对话框

然后就去远行吧2025-03-19 13:41

wx.showModal()：模态对话框，常用于询问用户是否执行一些操作；例如：询问用户是否退出登录、是否删除该商品等；
wx.showToast()：消息提示框，根据用户的某些操作来告知操作的结果；例如：退出成功时给用户提示，提示删除成功等；

接下来我们使用这两个 API 来实现一个具体的效果：点击删除按钮，弹出模态对话框；当用户点击【取消】时，给用户提示【取消删除】；当用户点击【确定】时，提示【删除成功】；

下面我们打开微信开发者工具来演示一下如何实现这个效果：

打开 pages/cate/cate.wxml 文件，我们设计一个删除按钮，输入以下代码：

html 复制代码

<button type="primary" bind:tap="delHandler">删除商品</button>

打开 pages/cate/cate.js 文件，输入以下代码：

javascript 复制代码

Page({
  // 删除商品
  async delHandler() {
    // showModal 显示模态对话框
    const { confirm } = await wx.showModal({
      title: '提示',
      content: '是否删除该商品'
    });
    if(confirm){
      wx.showToast({
        title: '删除成功',
        icon: 'none',
        duration: 2000
      })
    } else {
      wx.showToast({
        title: '取消删除',
        icon: 'error',
        duration: 2000
      })
    }
  }
})

接着编译运行，点击删除按钮，当我们点击【取消】时，会弹出【取消删除】，如下：

当我们点击【确认】时，会弹出【删除成功】，如下：

注意这两个对话框有很多属性，我们可以打开 showMadal 文档和 showToast 文档进行学习；

参考视频：尚硅谷微信小程序开发教程