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

anyup2026-10-28 17:05

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 头像 图片、文字、性别等级角标

表单组件（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 键盘 数字、身份证、车牌号

数据组件（5 个）

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

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

反馈组件（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 无网络 自动检测网络状态

布局组件（6 个）

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

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

导航组件（8 个）

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

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

其他组件（7 个）

边角但很实用的辅助件。

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

说明：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 变量，组件只读令牌，所以你注册一套新主题，全库跟着变色。

ts 复制代码 
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 时跟随系统，系统切深色就自动进入暗黑态，不用在页面里写判断。

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

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

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

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

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

ts 复制代码 
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 卡片，写完再跑校验器，少凭训练记忆猜属性名。

bash 复制代码 
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：

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

安装后的目录结构：

text 复制代码 
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-* 组件自动扫描：

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

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

ts 复制代码 
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 末尾引入主题变量：

scss 复制代码 
@import '@/uni_modules/uview-pro-x/theme.scss';

第四步，页面里直接用：

vue 复制代码 
<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 后「运行到小程序模拟器」。

问题反馈

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

相关推荐
输出输入1 小时前
学习前端主流书单推荐
前端
apollo_qwe1 小时前
大模型 API 接通了，AI 聊天页面为什么还是不好用？
前端·vue.js·人工智能
爱勇宝1 小时前
你可能成不了技术大佬，然后呢？
前端·后端·程序员
mck352 小时前
别再把整个代码库塞进 Prompt 了！我做了一个按需拉取的 MCP 代码上下文引擎（附 59 任务实测）
ai编程
疯华整猫2 小时前
从 MVP 到 MVI，从 Java 到 Kotlin：老项目升级的避坑指南
前端
徐小夕@趣谈前端2 小时前
Web 端 OFD 编辑器踩坑记：从“只能预览”到“在线改”
前端·编辑器
前端小万3 小时前
想做个人副业别乱买服务器！我的 5 个月真实开销分享
前端·后端·github
yz_aiks3 小时前
Obsidian安装使用教程：核心插件配置与图片自动上传、Claude Code插件实战
ai编程·开发工具·效率工具·笔记软件·obsidian
TimeFine3 小时前
AI 编码工作流的设计
android·ai编程
热门推荐
01如何新建文件夹？ 电脑新建文件夹的4种方法02国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）03历年考研数学一、数学二、数学三真题试卷及答案PDF04GitHub 镜像站点05几个好用的ip纯净度检测网站06昇腾910B系列芯片完全指南：四款型号对比、服务器选型与大模型部署实战07苹果iPA游戏软件资源下载网站08CVE-2026-91403 高危漏洞预警：Java JSSE 信任链被攻破 全场景修复方案与Linux系统级彻底清理实操09蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接10微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新