UI インタラクション

UI API は、トースト、読み込み、ダイアログ、ナビゲーションバー、タブバーなど、多彩な画面操作を提供します。

オンラインで試す

実際の表示

下のボタンは SDK のモックを呼び出し、ページ上にそのまま UI として反映されます。

showToastToast (none)showLoading

showDialogalertActionSheet

フィードバック系 API のデモ

Toast / Loading / Dialog / ActionSheet の動作をボタンから確認します。

Vue

<script setup>
import { ref } from 'vue'
import woo from 'mini-sdk'

const result = ref('')

async function confirmDelete() {
  const { confirm } = await woo.showDialog({
    title: '确认删除',
    content: '删除后无法恢复',
    cancelText: '取消',
    confirmText: '删除',
  })
  if (confirm) {
    woo.showToast({ title: '已删除', icon: 'success' })
  }
}
</script>

<template>
  <button @click="woo.showToast({ title: '成功', icon: 'success' })">Toast</button>
  <button @click="confirmDelete">删除确认</button>
</template>

React

import { useState } from 'react'
import woo from 'mini-sdk'

function MyPage() {
  const [result, setResult] = useState('')

  async function confirmDelete() {
    const { confirm } = await woo.showDialog({
      title: '确认删除',
      content: '删除后无法恢复',
      cancelText: '取消',
      confirmText: '删除',
    })
    if (confirm) {
      woo.showToast({ title: '已删除', icon: 'success' })
    }
  }

  return (
    <>
      <button onClick={() => woo.showToast({ title: '成功', icon: 'success' })}>Toast</button>
      <button onClick={confirmDelete}>删除确认</button>
    </>
  )
}

インポート

import woo from 'mini-sdk'
// 或
import { ui } from 'mini-sdk'

フィードバック系 API

showToast

トーストを表示します。

woo.showToast(options?: string | ShowToastOptions): Promise<void>

パラメータ：

フィールド	型	必須	デフォルト	説明
title	string	はい	""	表示文字
icon	string	いいえ	"none"	アイコン種別
duration	number	いいえ	2000	表示時間（ms）

// 简写
await woo.showToast('操作成功')

// 完整参数
await woo.showToast({
  title: '保存成功',
  icon: 'success',
  duration: 1500,
})

hideToast

表示中のトーストを隠します。

await woo.hideToast()

---

showLoading

読み込み表示を出します。

woo.showLoading(options?: string | ShowLoadingOptions): Promise<void>

パラメータ：

フィールド	型	必須	デフォルト	説明
title	string	いいえ	""	表示文字
mask	boolean	いいえ	true	マスクを出すか

woo.showLoading('加载中...')

// 异步操作
await fetchData()

woo.hideLoading()

hideLoading

読み込み表示を閉じます。

await woo.hideLoading()

---

showDialog

モーダルダイアログを表示し、ユーザーの操作を待ちます。

woo.showDialog(options?: ShowDialogOptions): Promise<ShowDialogResult>

パラメータ：

フィールド	型	必須	デフォルト	説明
title	string	いいえ	""	タイトル
content	string	いいえ	""	本文
cancelText	string	いいえ	""	キャンセル（空のとき非表示）
confirmText	string	いいえ	""	確定

戻り値：

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

const { confirm } = await woo.showDialog({
  title: '确认删除',
  content: '删除后无法恢复，是否继续？',
  cancelText: '取消',
  confirmText: '删除',
})

if (confirm) {
  await deleteItem()
  woo.showToast('删除成功')
}

---

alert

ボタンが一つだけの簡易アラートを表示します。

woo.alert(options?: string | AlertOptions): Promise<void>

パラメータ：

フィールド	型	必須	デフォルト	説明
title	string	いいえ	""	タイトル
content	string	いいえ	""	本文
buttonText	string	いいえ	"OK"	ボタン文字

// 简写
await woo.alert('操作完成')

// 完整参数
await woo.alert({
  title: '提示',
  content: '您的积分不足',
  buttonText: '知道了',
})

---

showActionSheet

下部からアクションシートを表示します。

woo.showActionSheet(options: ShowActionSheetOptions): Promise<ShowActionSheetResult>

パラメータ：

フィールド	型	必須	説明
itemList	string[]	はい	メニュー項目の文字列配列

戻り値：

interface ShowActionSheetResult {
  index: number  // 用户选择的菜单项索引
}

const { index } = await woo.showActionSheet({
  itemList: ['拍照', '从相册选择', '保存图片'],
})

switch (index) {
  case 0: await takePhoto(); break
  case 1: await chooseFromAlbum(); break
  case 2: await saveImage(); break
}

ナビゲーションバー API

setNavigationBarTitle

実行時にページタイトルを設定します。

await woo.setNavigationBarTitle({ title: '新标题' })

setNavigationBarColor

ナビゲーションバーの色を設定します。

await woo.setNavigationBarColor({
  frontColor: '#ffffff',       // 前景色（标题、按钮）
  backgroundColor: '#6366f1', // 背景色
})

showNavigationBarLoading / hideNavigationBarLoading

ナビゲーションバーのローディング表示を出したり消したりします。

woo.showNavigationBarLoading()
await fetchData()
woo.hideNavigationBarLoading()

TabBar API

showTabBar / hideTabBar

下部のタブバーを表示・非表示にします。

await woo.hideTabBar()  // 隐藏
await woo.showTabBar()  // 显示

setTabBarBadge / removeTabBarBadge

タブのバッジを付けたり外したりします。

// 设置第 2 个 Tab 的徽标
await woo.setTabBarBadge({ index: 1, text: '99+' })

// 移除
await woo.removeTabBarBadge({ index: 1 })

setTabBarItem

特定のタブ項目を更新します。

await woo.setTabBarItem({
  index: 0,
  text: '新首页',
  iconPath: '/static/icons/new-home.png',
  selectedIconPath: '/static/icons/new-home-active.png',
})

setTabBarStyle

タブバーのスタイルを変更します。

await woo.setTabBarStyle({
  color: '#999999',
  selectedColor: '#6366f1',
  backgroundColor: '#ffffff',
  borderStyle: 'white',
})

showTabBarRedDot / hideTabBarRedDot

タブの赤い通知ドットの表示を切り替えます。

await woo.showTabBarRedDot({ index: 2 })
await woo.hideTabBarRedDot({ index: 2 })

画像プレビュー

previewImage

全画面で画像をプレビューします。

await woo.previewImage({
  urls: [
    'https://example.com/img/1.jpg',
    'https://example.com/img/2.jpg',
    'https://example.com/img/3.jpg',
  ],
  current: 'https://example.com/img/2.jpg', // 当前显示的图片
})

API 早見表

メソッド	説明	シグネチャ
showToast	トースト表示	({ title, icon?, duration? }) → Promise<void>
hideToast	トーストを隠す	() → Promise<void>
showLoading	ローディング表示	({ title }) → Promise<void>
hideLoading	ローディング非表示	() → Promise<void>
showModal	モーダル表示	({ title, content, ... }) → Promise<{ confirm, cancel }>
showActionSheet	アクションシート	({ itemList }) → Promise<{ tapIndex }>
setNavigationBarTitle	ナビのタイトル設定	({ title }) → Promise<void>
setNavigationBarColor	ナビの色設定	({ frontColor, backgroundColor }) → Promise<void>
showTabBar / hideTabBar	TabBar 表示/非表示	() → Promise<void>
setTabBarBadge / removeTabBarBadge	タブバッジ	({ index, text? }) → Promise<void>
setTabBarStyle	TabBar スタイル	({ color, selectedColor, ... }) → Promise<void>
showTabBarRedDot / hideTabBarRedDot	赤ドット表示/非表示	({ index }) → Promise<void>
previewImage	全画面で画像	({ urls, current? }) → Promise<void>