当前位置：首页 > article >正文

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

article 2025/3/22 18:30:54

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

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

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

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

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

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

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
      })
    }
  }
})