uView Pro X 1.0.0 发布：全面支持 uni-app x 蒸汽模式，80+ 组件80+精选UI组件，蒸汽模

uView Pro X 1.0.0 已经正式发布，配备了完整的演示工程、文档站和 DCloud 插件市场。

uView Pro X 是 uView Pro 的 uni-app x 版本。App 端跑在蒸汽模式（Vapor）下，按原生渲染的方式工作。首批发布的组件，按基础、表单、数据、反馈、布局、导航、其他分成七类，支持快速复制代码，文档支持中英双语。

如果你正在用 uni-app x 做 App，或者手上有个 uni-app 项目准备迁过去，可以直接拿它搭页面：多主题、暗黑模式、多语言都已经内置，只需要简单配置就能快速写组件。

组件概览

首批上线的组件，按功能分成七类，对应 61 个示例页，文档站左侧菜单和演示工程首页是同一套分类，找组件非常快。

基础组件（8 个）

基础组件基本上是页面里最常出现的原子元素，按钮、图标、图片这些。

组件	说明
`ux-icon` 图标	基于字体的图标集
`ux-image` 图片	淡入动画、加载中、失败提示、圆角
`ux-button` 按钮	多种主题、尺寸、水波纹
`ux-cell` 单元格	列表分组展示
`ux-badge` 角标	数字、圆点、预设类型
`ux-tag` 标签	多种类型、形状、可关闭
`ux-text` 文本	多种格式化模式
`ux-avatar` 头像	图片、文字、性别等级角标

组1.png

表单组件（13 个）

输入、选择、校验都在这一组，登录、注册、资料编辑页面基本都会用到。

组件	说明
`ux-form` 表单	校验、重置、自定义规则
`ux-input` 输入框	多种类型和尺寸
`ux-textarea` 文本域	字数统计、自动高度、边框、禁用
`ux-search` 搜索框	清除、搜索、自定义事件
`ux-select` 列选择器	单列、多列、多列联动
`ux-picker` 选择器	数据外部传入，单列、多列、级联
`ux-rate` 评分	点击、滑动、半星、自定义颜色
`ux-number-box` 步进器	步长、范围限制、禁用
`ux-slider` 滑块	步长、自定义范围、颜色
`ux-switch` 开关	自定义颜色、尺寸、值
`ux-checkbox` 复选框	多选、禁用、自定义颜色
`ux-radio` 单选框	同一组内只能选一个
`ux-keyboard` 键盘	数字、身份证、车牌号

组2-1.png

组2-2.png

数据组件（5 个）

数字滚动、倒计时、进度条这些带动态效果的元素。

组件	说明
`ux-line-progress` 线型进度条	主题、条纹、自定义颜色
`ux-circle-progress` 环形进度条	主题色、自定义尺寸、动态进度
`ux-count-to` 数字滚动	千位分隔、小数、缓动
`ux-count-down` 倒计时	中文、冒号分隔、边框
`ux-swiper` 轮播图	多种指示器、3D 效果、自动播放

组3.png

反馈组件（14 个）

弹窗、提示和状态兜底，数量最多的一组。

组件	说明
`ux-action-sheet` 操作菜单	从底部弹出选项列表
`ux-toast` 提示框	多种主题、位置、加载动画
`ux-notice-bar` 通告栏	水平、垂直滚动
`ux-alert-tips` 警告提示	四种主题，可关闭
`ux-top-tips` 顶部提示	`show()` 弹出，自动收起
`ux-collapse` 折叠面板	手风琴、自定义标题、禁用
`ux-popup` 弹窗	上、下、左、右、中多个方向
`ux-swipe-action` 滑动单元格	左滑唤出操作菜单
`ux-modal` 模态框	消息提示、操作确认、异步关闭
`ux-mask` 遮罩层	弹窗背景遮挡
`ux-loading` 加载	圆圈、花朵两种模式
`ux-loadmore` 加载更多	加载中、没有更多、粗点样式
`ux-empty` 内容为空	内置十余种场景图标
`ux-no-network` 无网络	自动检测网络状态

组4.png

布局组件（6 个）

卡片、宫格、栅格这些搭页面骨架的组件。

组件	说明
`ux-line` 线条	分隔内容块
`ux-card` 卡片	头部、主体、底部插槽，圆角、阴影、边框
`ux-grid` 宫格	列数、边框、对齐方式
`ux-divider` 分割线	区隔内容
`ux-layout` 栅格布局	12 分栏，搭配 `ux-row` / `ux-col` 使用
`ux-section` 区块标题	支持查看更多跳转

组5.png

导航组件（8 个）

顶部和底部的导航、页内切换与分页。

组件	说明
`ux-tabbar` 标签栏	图标、文字、凸起按钮
`ux-back-top` 返回顶部	小圆角、正圆两种形状
`ux-navbar` 导航栏	自定义内容、返回事件、渐变背景
`ux-tabs` 标签页	滚动、徽标、自定义颜色
`ux-subsection` 分段器	按钮、分段模式、动画
`ux-steps` 步骤条	点、数字模式，横竖方向，自定义颜色
`ux-link` 链接	多平台跳转与自定义样式
`ux-pagination` 分页	图标、文字按钮、自定义样式

组6.png

其他组件（7 个）

边角但很实用的辅助件。

组件	说明
`ux-gap` 间隔槽	内容块之间的分隔
`ux-safe-bottom` 底部安全区	适配 iPhone X 等机型
`ux-status-bar` 状态栏	沉浸式适配系统状态栏高度
`ux-transition` 过渡动画	进出场动效统一封装
`ux-skeleton` 骨架屏	页面加载时的占位结构
`ux-full-screen` 全屏引导	遮盖导航栏与标签栏
`ux-config-provider` 配置容器	注入主题、暗黑、语言配置

组7.png

说明：1.0.0 只是首版，不代表组件就齐了，还有一部分组件没有迁过来，后面会按使用频率逐步补齐；也会新增一些面向具体场景的特性组件，每次发布都会同步更新演示工程和文档站，记得及时关注查看。

支持哪些平台

平台	状态
App-Android	已适配，真机验证
App-iOS	已适配
App-鸿蒙	已适配
H5	已适配
微信小程序	已适配

App 端走的是 uni-app x 的蒸汽模式（Vapor）编译：template 和 style 编成字节码直接驱动原生节点，逻辑层跑在 JS 引擎，UTS 代码经 uts2js 转成 JS 后一起运行。

这也是它和 uView Pro 的区别：这版按原生渲染完全重写，不是给旧组件套壳。

App 端 UCSS 不支持伪元素，也不支持 CSS gap。组件内部已经按端分支规避，写页面样式时要避开，具体红线可以在文档站的「注意事项」里。

核心亮点

多主题：换肤不用改组件源码

主题由一组颜色令牌驱动。令牌在运行时同时写入 color 和 CSS 变量，组件只读令牌，所以你注册一套新主题，全库跟着变色。

import { useTheme } from '@/uni_modules/uview-pro-x'

const { currentTheme, themes, setTheme, darkMode, toggleDarkMode, isInDarkMode } = useTheme()

// 切到自定义主题
setTheme('purple')

内置官方蓝主题，可以注册任意多套，选择结果会自动存本地（键 uview-pro-x-theme），下次启动恢复。

暗黑模式：跟随系统或手动切换

同一套令牌体系里还有 darkMode，取值 'auto'、'light'、'dark'。选 auto 时跟随系统，系统切深色就自动进入暗黑态，不用在页面里写判断。

toggleDarkMode()      // 一键切换
setDarkMode('auto')   // 跟随系统
isInDarkMode()        // 当前是否暗黑

切换时会重新算当前主题的暗色调色板，写回全局变量。官方蓝主题自带暗色板，安装完就能用；自定义主题也会按规则生成暗色板。

暗黑模式设置单独持久化，和主题选择互不影响。

多语言：中英双语内置，可扩展

内置 zh-CN、en-US 两套语言包。语言包按命名空间组织，支持占位符替换，组件里的内置文案会跟着语言切换。

import { useLocale } from '@/uni_modules/uview-pro-x'

const { t, locale, setLocale } = useLocale()

setLocale('en-US')

语言选择同样持久化（键 uview-pro-x-locale）。也可以自己写语言包，按需接入，注册进去就能用。

示例与文档一一对应，代码能直接复制

每个组件文档页顶部都有演示入口，扫码或点开就能看到真机上的实际效果；下面每个示例小节贴的代码，和演示工程里跑通的那份是同一段，改个文案就能搬到自己页面里。

属性表、事件表、插槽表也按组件实际类型整理，跟着版本一起改。抄代码、对效果、查参数都在同一个页面，不用来回跳。

原生渲染与强类型

组件本身用 UTS 写。蒸汽模式下 UTS 经 uts2js 转成 JS，和页面代码跑在同一个引擎里（官方文档的原话是「编写 uts 会通过 uts2js 编译器转到 js 引擎下运行」），所以页面用 UTS 还是 TS，JS 都能引用：

页面写法	使用体验
`<script setup lang="uts">`	类型约束最完整，属性名、事件名、插槽名写错，编译阶段就会报出来
`<script setup lang="ts">`	组件照常引用，props 和 events 走声明式边界；类型提示不如 UTS 页面完整，按文档 API 表写更稳

组件的 Props、Events、Slots 都有 UTS 类型定义，统一类型出口在 types/global.uts。UTS 页面能吃到这层校验，TS 页面则要自己多看一眼 API 表。

蒸汽模式对组件有几条硬约束：只能用组合式 API、不支持 mixin、样式只认简单 class 选择器。这版在写法上已经对齐：组件全部是 <script setup lang="uts">，类名走 BEM，没有后代选择器和伪元素，styleIsolation 统一为 app-and-page，对应样式隔离策略 2.0。

演示工程的 manifest.json 里配置 vapor: true 开启蒸汽模式。

版本上，蒸汽模式要求 HBuilderX 5.21+（Android）、5.11+（iOS）、5.0+（鸿蒙）；小程序和 web 目前仍以 VDOM 运行，组件不用改。

零三方运行时依赖

插件库自带的工具函数和 hooks 统一挂在 $u 上，不额外引运行时库。常用的有 $u.addUnit（补单位）、$u.toStyle（样式拼接）、$u.hexToRgba（颜色转换）、$u.deepMerge、$u.test（20 多种正则）。

hooks 常用的有 useTheme、useLocale、useBEM、useRect、useSafeArea、useCountDown、useThrottle 等，主题、国际化、布局测量都能直接用。

组件通过 easycom 按需编译，没用到的组件不会进产物，优化包体积大小。

AI 技能：让助手按规范写页面

这套库配了 Agent Skills 技能包。纸质装进 AI 编程助手后，助手写 ux-* 页面会先查 API 卡片，写完再跑校验器，少凭训练记忆猜属性名。

pnpx skills add uview-pro/skills

技能里包含 77 个组件的 API 卡片、页面脚本与样式红线、三端兼容清单，以及一个 verify-ux-usage.mjs 校验脚本，属性或事件用法不对会直接报 error。Qoder、Claude Code、Cursor、Trae 这类支持 skills 的客户端装上就能用，技能包本身开源在 uview-pro/skills。

为什么选它

uni-app x 生态里能直接用的组件库不多，配套齐全的更少。登录、表单、列表、弹窗、空状态这些常规场景，这版基本都覆盖了，不用每个页面从零拼。主题、暗黑、多语言内置，省掉再配一套方案的时间。

如果你正在把项目迁到 uni-app x，或者准备新开一个 x 项目，界面层能省下大部分时间。

安装

目前只支持通过 DCloud 插件市场导入，不走 npm：

打开 uView Pro X 插件页，选择「导入到 HBuilderX」。
选择目标 uni-app x 项目，完成导入。
插件自动落到项目的 uni_modules/uview-pro-x 目录。

安装后的目录结构：

your-project/
├─ uni_modules/
│  └─ uview-pro-x/
│     ├─ components/        # ux-* 组件
│     ├─ libs/              # 工具函数与 hooks
│     ├─ locale/            # 内置语言包
│     ├─ index.uts          # 库入口
│     ├─ index.scss         # 样式入口
│     └─ theme.scss         # 主题变量
├─ pages.json
├─ main.uts
└─ uni.scss

快速上手

只需配置四步就能跑起来，下面的代码可以直接复制。

第一步，pages.json 配 easycom，让 ux-* 组件自动扫描：

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^ux-(.*)": "@/uni_modules/uview-pro-x/components/ux-$1/ux-$1.uvue"
    }
  }
}

第二步，main.uts 注册组件库。参数全部可省略，不传就用官方蓝主题和 zh-CN：

import App from './App.uvue'
import uViewProX from './uni_modules/uview-pro-x'
import { createSSRApp } from 'vue'

export function createApp() {
  const app = createSSRApp(App)
  app.use(uViewProX, {
    locale: { defaultLocale: 'zh-CN' },
    darkMode: 'auto'
  })
  return { app }
}

第三步，uni.scss 末尾引入主题变量：

@import '@/uni_modules/uview-pro-x/theme.scss';

第四步，页面里直接用：

<template>
  <view class="page">
    <ux-button text="主要按钮" type="primary" @click="onClick" />
    <ux-tag text="标签" type="success" />
  </view>
</template>

<script setup lang="uts">
function onClick(): void {
  uni.showToast({ title: '点击了按钮', icon: 'none' })
}
</script>

<style scoped>
.page {
  display: flex;
  flex-direction: column;
  padding: 16px;
}
</style>

运行方式和普通 uni-app x 项目一致：H5 点「运行到浏览器」，App 连真机或模拟器，微信小程序配好 appid 后「运行到小程序模拟器」。

问题反馈

如果在使用的时候遇到问题，欢迎及时反馈给我：

GitHub：anyup/hello-uview-pro-x，提交问题请带上机型和复现步骤。
Gitee：gitee.com/anyup/hello…
官方文档：x.uviewpro.cn，每个组件页里都有 API 表格和在线预览，中英文都有。
插件市场：DCloud 官方市场安装