微信小程序弹框

官方文档：https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showToast.html

有四种弹框的方式：toast，modal，loading，actionSheet

wxml页面

showToast


showModal


showLoading


showAction

js文件

1. toast
handleShowToast(){
  wx.showToast({
    title: '添加成功',  // 必填，弹框内容
    duration: 3000,   // 间隔时间
    icon: "loading",  // 图标：loading success none
    image: "/assets/tabbar/cart.png",  // 自定义图标
    mask: true, // 蒙版效果，之后就不能操作蒙版之下的东西了
    success: function(){},
    fail: function(){},
    complete: function(){
      console.log("hfjka");
    }, // 点击完成之后，就会调用
  })
},

2. modal
handleShowModal(){
  wx.showModal({
    title: '成功',  // 必填
    content: '点击确定来进行下一步操作',  // 必填
    showCancel: false, // 需求：不显示取消按钮了
    cancelText: "退出", // 将取消按钮的文字修改掉
    cancelColor: "red", // 取消按钮的颜色
    success: function(res){  // 点击了取消或者确定，才会调用此函数
      console.log(res);
      if(res.cancel){
        // 一般取消了就啥也不做
        console.log("用户点击了取消按钮");
      }else if(res.confirm){
        // 一般确定了就进行下一步操作
        console.log("用户点击了确定按钮");
      }
    } 
  })
},

3. loading
handleShowLoading(){
  wx.showLoading({
    title: '加载中',
    mask: true,
  })

  setTimeout(function(){
    wx.hideLoading(); // 隐藏loading，必须手动调用才能消失
  }, 3000)
},

4. actionSheet，从底部弹出
handleShowAction(){
  wx.showActionSheet({
    itemList: ["相册","手机","图片"],
    itemColor: "red",
    success: function(res){
      console.log(res);
      switch (res.tapIndex){  // 获取到点击的哪一个
        // case 0: 
        // .....
      }
    }
  })
}

showLoading和showToast的区别：
showLoading不会主动消失，得调用hideLoading才会消失。一般向服务器发送请求的时候才会调用这个。

系统弹窗API
showToast
showModal
showLoading
showActionSheet