弹窗与反馈

反馈组件用于向用户展示提示信息和收集用户操作结果。

组件对比

组件	是否阻断	是否需要交互	使用场景
Toast	否	否	轻量提示（操作成功/失败）
Loading	是（遮罩）	否	异步操作等待
Dialog	是	是（确认/取消）	重要操作确认
Alert	是	是（确定）	信息提示
ActionSheet	是	是（选择项）	底部多选操作

Toast 轻量提示

非阻断式，自动消失。

// 最简用法
await woo.showToast('操作成功')

// 完整参数
await woo.showToast({
  title: '保存成功',
  icon: 'success',    // 'success' | 'error' | 'loading' | 'none'
  duration: 2000,     // 持续时间（ms）
})

// 手动关闭
await woo.hideToast()

适用场景

• 操作反馈：保存成功、删除成功
• 非关键提示：网络状态变化

Loading 加载提示

带遮罩的加载指示器，阻止用户交互。

// 最简用法
woo.showLoading('加载中...')

// 完整参数
woo.showLoading({
  title: '提交中...',
  mask: true,  // 是否显示遮罩（默认 true）
})

// 异步操作完成后关闭
try {
  await submitForm()
  woo.showToast('提交成功')
} finally {
  woo.hideLoading()
}

注意

showLoading 和 showToast 互斥——调用 showLoading 会关闭当前的 Toast，反之亦然。

Dialog 对话框

模态对话框，等待用户选择。

const result = await woo.showDialog({
  title: '提示',
  content: '确认退出登录？',
  cancelText: '取消',
  confirmText: '退出',
})

if (result.confirm) {
  await logout()
}

参数说明

字段	类型	默认值	说明
title	string	""	标题
content	string	""	内容
cancelText	string	""	取消按钮文字（空则不显示）
confirmText	string	""	确认按钮文字

返回值

interface ShowDialogResult {
  confirm: boolean  // 是否点击确认
  cancel: boolean   // 是否点击取消
}

Alert 提示框

仅有一个按钮的简单提示。

// 最简用法
await woo.alert('操作完成')

// 完整参数
await woo.alert({
  title: '温馨提示',
  content: '您的会员即将到期，请及时续费',
  buttonText: '我知道了',
})

ActionSheet 操作菜单

从底部弹出的多选操作列表。

try {
  const { index } = await woo.showActionSheet({
    itemList: ['拍照', '从相册选择', '从文件选择'],
  })

  switch (index) {
    case 0: takePhoto(); break
    case 1: chooseFromAlbum(); break
    case 2: chooseFromFile(); break
  }
} catch (err) {
  // 用户点击取消或遮罩关闭
  if (err.code === BridgeErrorCode.UserCancelled) {
    console.log('用户取消选择')
  }
}

返回值

interface ShowActionSheetResult {
  index: number  // 选择的项索引（从 0 开始）
}

组合使用示例

async function deleteItem(id: string) {
  // 1. 确认对话框
  const { confirm } = await woo.showDialog({
    title: '确认删除',
    content: '删除后无法恢复，是否继续？',
    cancelText: '取消',
    confirmText: '删除',
  })

  if (!confirm) return

  // 2. 显示加载
  woo.showLoading('删除中...')

  try {
    // 3. 执行删除
    await woo.request.del(`/api/items/${id}`)

    // 4. 成功提示
    woo.showToast({ title: '删除成功', icon: 'success' })

    // 5. 返回列表页
    setTimeout(() => woo.navigateBack(), 1500)
  } catch (err) {
    // 6. 错误提示
    woo.showToast({ title: '删除失败', icon: 'none' })
  } finally {
    woo.hideLoading()
  }
}