ダイアログとフィードバック

フィードバック用コンポーネントは、ユーザーへの通知や、操作結果の取得に用います。

コンポーネントの比較

コンポーネント	操作のブロック	ユーザー操作	主な用途
Toast	いいえ	いいえ	軽い通知（成功／失敗）
Loading	はい（マスク）	いいえ	非同期処理の待機
Dialog	はい	はい（確定／キャンセル）	重要操作の確認
Alert	はい	はい（OK）	情報の表示
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

ボタンが 1 つの簡易メッセージです。

// 最简用法
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()
  }
}