小程序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 文档 进行学习;

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

相关推荐
说私域6 小时前
公域流量向私域流量转化策略研究——基于开源AI智能客服、AI智能名片与S2B2C商城小程序的融合应用
人工智能·小程序
半生过往6 小时前
微信小程序文件下载与预览功能实现详解
微信小程序·小程序·notepad++·压缩包下载解压
源码_V_saaskw6 小时前
JAVA图文短视频交友+自营商城系统源码支持小程序+Android+IOS+H5
java·微信小程序·小程序·uni-app·音视频·交友
weixin_lynhgworld10 小时前
淘宝扭蛋机小程序系统开发:重塑电商互动模式
大数据·小程序
小乖兽技术10 小时前
C#与C++交互开发系列(二十四):WinForms 应用中嵌入C++ 原生窗体
c++·c#·交互
ᥬ 小月亮13 小时前
Uniapp编写微信小程序,绘制动态圆环进度条
微信小程序·小程序·uni-app
henreash13 小时前
NLua和C#交互
开发语言·c#·交互
哥本哈士奇19 小时前
Web前端交互利用Python跟大模型操作
前端·python·交互
天若有情67319 小时前
从一个“诡异“的C++程序理解状态机、防抖与系统交互
开发语言·c++·交互·面向对象·状态机
henreash19 小时前
xLua和C#交互
开发语言·c#·交互