微信小程序彈框

一、基礎知識

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回調函數，需要在回調函數中進行判斷處理。