更新记录

1.0.4（2026-10-21）

• 修复鸿蒙编译报错。

1.0.3（2026-10-21）

• 修复鸿蒙编译报错。

1.0.2（2026-10-21）

• 修复鸿蒙编译报错。

平台兼容性

uni-app x(5.24)

其他

umi-native-ui

面向 uni-app x 的 UI 组件与 UTS API 集合，提供 Android、iOS、HarmonyOS 平台实现，覆盖消息反馈、弹窗、选择器、表单输入、列表和二维码等场景。

熬夜肝的面向当下现代界面设计风格的UI组件库，希望大家多多支持！

凡是前三名购买者可获取哔哩哔哩年卡（共享账号），观看凡人修仙传！

广告：

• 魔法上网35元/月，有需求的可以联系我(稳定，支持 Clash Verge)。
• 售卖CodeX账号，plus代充180元/月，有需求的可以联系我。
• 售卖Claude Code账号以及代充，有需求的可以联系我。
• vx: 781284440

特性

• 按需使用：函数 API 通过具名导入引用，组件通过 easycom 按名称使用，无需全局注册整套组件库。
• 摇树支持：package.json 已为 Android、iOS、HarmonyOS 声明 treeShaking: true，API 按功能模块拆分。具体裁剪范围与验证方式见下文。
• 平台实现与公共组件结合：弹窗等 API 通过各端 UTS 实现调用平台能力；表单等组件使用 .uvue，部分能力包含平台专用适配。并非所有组件都直接封装系统控件。
• 类型化接口：使用 UTS，提供选项类型、结果类型，以及 toastOptions、dialogOptions、markStyle、switchStyle 等构造函数。
• 可配置样式：按组件提供颜色、尺寸、圆角、勾选标记等配置；部分尺寸支持自动计算，具体单位和默认行为以字段说明为准。
• 无其他 uni_modules 依赖：当前 uni_modules.dependencies 为空，无需安装其他 uni_modules 插件。
• 配套示例：仓库包含组件示例、API 调用代码、字段说明和复杂类型详情页。

平台与环境

以下为当前模块配置声明，并不代表每个字段在所有平台上都有相同效果。

各端系统 API、视觉表现和参数支持可能存在差异。例如，部分 Toast 参数依赖鸿蒙系统 API 版本。接入时请查看对应示例页的字段说明，并在目标平台验证。不将普通 uni-app、Web 或小程序视为已经验证的兼容目标。

快速接入

将本模块完整放入项目的 uni_modules/umi-native-ui 目录。在 uni-app x 项目中按需引用 API 或使用组件。

函数 API

在 .uvue 页面的 UTS 脚本中，从模块根路径具名导入需要的函数：

<template>
  <button @click="notify">显示提示</button>
</template>

<script setup lang="uts">
  import { showToast, toastOptions } from '@/uni_modules/umi-native-ui'

  function notify() : void {
    const options = toastOptions('操作成功')
    options.duration = 2000
    showToast(options)
  }
</script>

优先使用对应的选项构造函数，再按需修改字段。不同 API 的选项结构不同，完整参数见示例页。

主动关闭 Toast

showToast(options) 同步返回 ToastInstance，可通过实例的 close() 提前关闭本次 Toast。不使用返回值的原有代码仍可继续使用，Toast 仍会按 duration 自动消失。

const options = toastOptions('三端原生 Toast')
options.duration = 10000
options.alignment = 4
const toast = showToast(options)

// 业务完成或页面离开时主动关闭
toast.close()

• close(): void 仅关闭该实例对应的 Toast，不会关闭之后创建的其他实例。
• 重复调用、自动消失后调用均安全；显示任务尚未完成时调用，也会记录关闭请求。
• Android 保留新 Toast 替换前一个 Toast 的行为；旧实例关闭不影响新实例。
• 鸿蒙沿用 promptAction.openToast，通过返回的 ID 调用 closeToast；这组系统接口要求 API 18+。ID 异步返回前调用 close()，会在拿到 ID 后关闭，因此可能短暂显示。

实例类型可从模块根路径导入：import { ToastInstance } from '@/uni_modules/umi-native-ui'。

组件

遵循 uni_modules 的 easycom 命名规则，在页面中直接使用组件。以下为 Toggle 示例：

<template>
  <view>
    <umi-toggle v-model:isOn="enabled" />
    <umi-toggle type="checkbox" v-model:isOn="checked" />
  </view>
</template>

<script setup lang="uts">
  const enabled = ref(false)
  const checked = ref(false)
</script>

组件的数据绑定、事件及尺寸规则各不相同，请参照对应示例，勿将 Toggle 的属性直接套用于其他组件。

按需引用与摇树

当前原生 App 三端均已声明支持摇树，但仓库尚未提供未使用代码裁剪的安装包体积对比。 这里的支持指模块配置和代码组织支持构建工具执行裁剪，不承诺未使用功能的所有代码、资源都会被完全移除。

建议使用静态具名导入：

import { showToast, toastOptions } from '@/uni_modules/umi-native-ui'

避免为了统一调用而将整库放入全局对象、动态查找 API 或集中引用全部组件，这会扩大依赖范围，使按需裁剪更难判断。业务代码统一从模块根路径使用公开 API，不直接依赖 utssdk/app-android 等平台实现文件。

最终裁剪效果取决于 HBuilderX / UTS 编译器、平台、构建模式及实际引用关系。若需要确认包体收益，可使用相同工具版本和发行构建配置，分别构建“不引用本模块”“只使用 Toast”“使用多个功能”的项目，对比产物体积及生成代码；开发运行包的体积不宜直接作为发行裁剪效果的依据。

功能清单

函数 API

组件

示例与详细说明

以下链接指向本仓库的配套文件；单独分发插件目录时，需同时参考原仓库中的示例和文档。

• 全部示例与字段说明：运行示例工程，进入对应功能的“示例代码”和“字段说明”页。
• Toggle 示例：Switch、Checkbox、Button 模式及样式配置。
• Toast 示例：基础调用和平台相关参数说明。
• 默认值与自动计算：尺寸、自动值及参数优先级。
• 复杂类型说明：选项对象和结果结构。
• Sheet 说明：弹出层相关用法。