UI 交互

UI API 提供丰富的界面交互能力，包括弹窗、提示、加载、导航栏、标签栏等。

在线试用

真实运行

下方的按钮会调用 SDK mock，在页面上产生真实的 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

隐藏当前 Toast。

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	显示 Toast 提示	({ title, icon?, duration? }) → Promise<void>
hideToast	隐藏 Toast	() → 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	设置/移除 Tab 角标	({ index, text? }) → Promise<void>
setTabBarStyle	设置 TabBar 样式	({ color, selectedColor, ... }) → Promise<void>
showTabBarRedDot / hideTabBarRedDot	显示/隐藏 Tab 红点	({ index }) → Promise<void>
previewImage	全屏预览图片	({ urls, current? }) → Promise<void>