微信小程序弹框

一、基础知识

1、微信小程序弹框是一种在小程序中常用的消息提醒方式，可以在特定场景下对用户进行提示，并获取用户的操作反馈。
2、小程序开发中，使用wx.showModal、wx.showToast、wx.showLoading等方法进行弹框操作。
3、wx.showModal默认包含一个确认按钮和一个取消按钮，可以自定义按钮文本和样式，返回用户操作结果。
4、wx.showToast和wx.showLoading两个方法在用户确保操作成功后自动关闭，分别用于展示提示信息和加载状态。

  // wx.showModal示例代码
  wx.showModal({
    title: '提示',
    content: '这是一个模态弹窗',
    confirmText: '确定',
    confirmColor: '#39b54a',
    cancelText: '取消',
    cancelColor: '#808080',
    success(res) {
      if (res.confirm) {
        console.log('用户点击确定')
      } else if (res.cancel) {
        console.log('用户点击取消')
      }
    }
  })

二、自定义弹框

1、可以通过自定义组件和样式实现个性化的弹框效果，例如弹幕弹框。
2、自定义弹框需要在app.json中引入对应的组件文件，并在页面中使用该组件。
3、弹框样式的修改可以通过设置组件样式或者动态设置组件属性实现。

  
  "usingComponents": {
    "custom-modal": "/components/modal/modal"
  }
  
  // 在页面中使用自定义组件
  
  
  // 引入样式文件
  @import "path/to/custom-modal.wxss";

  // 动态设置组件属性
  this.setData({
    showModal: true
  })

三、弹框与API请求

1、在API请求中可以使用wx.showLoading方法展示数据加载状态，增强用户体验。
2、在API请求出错时，可以使用wx.showModal对用户进行提示并获取操作反馈，以便进行相应的错误处理。
3、使用wx.showToast方法可以在操作成功后展示提示信息，例如提交表单成功提示。

  // 在API请求前展示加载状态
  wx.showLoading({
    title: '加载中',
    mask: true
  })

  wx.request({
    url: 'http://localhost:3000/api',
    success(res) {
      // 成功返回结果后隐藏加载状态
      wx.hideLoading()

      // 操作成功提示
      wx.showToast({
        title: '操作成功',
        icon: 'success',
        duration: 2000
      })
    },
    fail(err) {
      // 操作失败提示
      wx.showModal({
        title: '提示',
        content: '操作失败，请稍后再试',
        confirmText: '确定',
        confirmColor: '#39b54a',
        showCancel: false
      })
    }
  })

四、常见问题

1、在多个弹框同时出现时，会有弹框覆盖的问题，需要通过设置z-index解决。
2、wx.showToast方法有默认的展示时间，需要根据实际需要进行调整。
3、在使用wx.showModal方法时，用户无论点击哪个按钮都会触发success回调函数，需要在回调函数中进行判断处理。