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

  • 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 文档 进行学习;

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

相关推荐
说私域7 小时前
基于开源AI智能名片链动2+1模式的S2B2C商城小程序:门店私域流量与视频号直播融合的生态创新研究
人工智能·小程序·开源
说私域9 小时前
传统微商困境与开源链动2+1模式、AI智能名片及S2B2C商城小程序的转型破局
人工智能·小程序·开源
一渊之隔9 小时前
微信小程序在用户拒绝授权后无法使用wx.opensetting再次获取定位授权
微信小程序·小程序
racerun13 小时前
微信小程序如何实现再多个页面共享数据
微信小程序·小程序
XM-545814 小时前
2025微信小程序wxapkg解包全攻略
linux·运维·小程序
AxureMost1 天前
Axure常用交互功能案例-免费
交互·axure·photoshop
HERR_QQ2 天前
【unify】unify的微信小程序开发学习 (to be continued)
学习·微信小程序·小程序
racerun2 天前
小程序导航设置更多内容的实现方法
小程序
说私域2 天前
基于开源AI智能名片链动2+1模式S2B2C商城小程序的超级文化符号构建路径研究
人工智能·小程序·开源
mg6682 天前
微信小程序入门实例_____快速搭建一个快递查询小程序
微信小程序·小程序