更新记录

1.0.1（2026-10-26）

• 优化README.md，添加组件说明
• 添加官方文档链接
• 添加示例演示入口

1.0.0（2026-10-26）

首个正式版本，作为后续迭代的功能基线。

组件

首批 76 个 ux-* 组件（含子组件）完成从 uView Pro 到 uni-app x 的迁移，按 7 个分类提供 61 个组件示例页：

• 基础（8 个示例页）：ux-icon、ux-image、ux-button、ux-cell-group / ux-cell-item、ux-badge、ux-tag、ux-text、ux-avatar
• 表单（13 个示例页）：ux-form / ux-form-item、ux-input、ux-textarea、ux-select、ux-picker、ux-rate、ux-search、ux-number-box、ux-keyboard / ux-number-keyboard / ux-car-keyboard、ux-checkbox / ux-checkbox-group、ux-radio / ux-radio-group、ux-switch、ux-slider
• 数据展示（5 个示例页）：ux-line-progress、ux-circle-progress、ux-count-to、ux-count-down、ux-swiper
• 反馈（14 个示例页）：ux-action-sheet、ux-toast、ux-notice-bar（含 ux-row-notice、ux-column-notice）、ux-alert-tips、ux-top-tips、ux-collapse / ux-collapse-item、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-grid-item、ux-divider、ux-row / ux-col、ux-section
• 导航（8 个示例页）：ux-tabbar、ux-back-top、ux-navbar、ux-tabs、ux-subsection、ux-steps / ux-step、ux-link、ux-pagination
• 其他（7 个示例页）：ux-gap、ux-safe-bottom、ux-status-bar、ux-transition、ux-skeleton、ux-full-screen、ux-config-provider；另有 ux-overlay、ux-sticky、ux-waterfall 等基础能力组件

工具与 Hooks

• 9 个工具函数示例页：addUnit、test、toStyle、color、trim、debounce、throttle、deepClone、deepMerge
• 3 个组合式 Hooks：useDebounce、useThrottle、useLocale
• 全局 $u 工具集与 useTheme / useLocale 等能力开箱可用

样式与主题

• 组件样式基于 UCSS 重写，仅使用 flex 布局，适配 App / H5 / 微信小程序
• 组件专属类名统一由 useBEM 生成（ux- 前缀），样式隔离，避免与业务类名冲突
• 主题变量集中在 theme.scss（$u-*），支持多主题与暗黑模式

国际化

• 内置中文 / 英文语言包，通过 ux-config-provider 与 useLocale 全局切换

文档

• 中英文双语文档站上线，包含组件说明、示例源码与 API 表
• 组件页内嵌 H5 在线预览，可直接在文档中交互体验

平台兼容性

uni-app x(5.03)

其他

uView Pro X

uView Pro 的 uni-app x 版本 —— 基于 uni-app x 构建的跨端 UI 组件库。80+ 高质量组件、完整的主题 / 国际化 / 工具 / Hooks 体系，配套多主题、暗黑模式、国际化，一套代码支持 App（Android / iOS / 鸿蒙）、H5、微信小程序。

官方文档

演示与体验

H5 （浏览器扫码）	小程序 （微信扫码）	APP（安卓） （浏览器扫码）

AI 辅助开发

uView Pro X 提供配套的 Agent Skills 技能包，安装后 AI 编程助手（Qoder、Claude Code、Cursor 等支持 skills 的客户端）即可掌握本库的页面编写规范、UTS / UCSS 约束、多语言与多主题接入配方、三端兼容避错清单：

pnpx skills add uview-pro/skills

安装后在 AI 助手中直接描述需求（例如「用 uview-pro-x 写一个带主题切换的登录页」），助手会按技能内的规范生成可编译的页面代码，并校验 ux-* 组件的属性用法。

交流反馈

微信 （微信扫码）	Q-Q （Q-Q扫码）	源码咨询 （微信扫码）

核心特性

组件总览

标签名 = ux- + 组件名，例如 ux-icon、ux-button。

安装

前置条件：支持 uni-app x 的 HBuilderX（或其他可编译 uni-app x 项目的环境）。

在 DCloud 插件市场 打开本插件，点击「下载插件并导入 HBuilderX」；也可在 HBuilderX 的插件市场面板搜索 uview-pro-x 安装。

导入后组件库位于项目的 uni_modules/uview-pro-x/ 目录，easycom 规则随包生效。

快速上手

1. 配置 easycom（pages.json）

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

配置完成后，ux- 开头的组件无需手动 import，直接写标签即可使用。

2. 注册插件（main.uts）

注册插件后即可使用国际化、多主题等能力；全部参数可选，不传则使用默认值。

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

export function createApp() {
  const app = createSSRApp(App)
  app.use(uViewProX, {
    // 国际化：注册语言包并指定默认语言
    locale: {
      locales: [zhCN, enUS],
      defaultLocale: 'zh-CN'
    }
  })
  return { app }
}

3. 开始使用

<template>
  <view class="page">
    <ux-input v-model="keyword" placeholder="请输入关键词" border />
    <ux-button type="primary" text="提交" @click="onSubmit" />
    <ux-tag text="新" type="error" />
  </view>
</template>

<script setup lang="uts">
  import { $u } from '@/uni_modules/uview-pro-x'

  const keyword = ref('')

  const onSubmit = () => {
    if (!$u.test.mobile('***')) {
      uni.showToast({ title: '请输入正确的手机号', icon: 'none' })
      return
    }
    console.log('提交内容：' + keyword.value)
  }
</script>

进阶用法

$u 全局工具对象

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

内置 Hooks

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

另有 useBEM、useStyle、useParent、useChildren、useConfig 等为组件内部工具，二次开发组件时可参考。

主题与暗黑模式

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

const { setTheme, setDarkMode, toggleDarkMode, isInDarkMode } = useTheme()

setTheme('purple')       // 切换主题（名称需已注册：内置 'uviewpro' 或自定义主题）
setDarkMode('dark')      // 'light' | 'dark' | 'auto'（跟随系统）
toggleDarkMode()         // 亮暗一键切换

自定义多主题：在 app.use(uViewProX, { theme: [...] }) 中传入主题数组（与内置官方蓝合并，同名覆盖）：

app.use(uViewProX, {
  theme: [
    {
      name: 'purple',
      label: '霞光紫',
      color: { primary: '#7c3aed' }
    }
  ]
})

国际化

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

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

t('uModal.title')        // 翻译
setLocale('en-US')       // 运行时切换语言（自动持久化）

自定义语言包在注册插件时传入 locale.locales 合并（同名覆盖）：

app.use(uViewProX, {
  locale: {
    locales: [zhCN, enUS, zhTW],   // zhTW 为自定义语言包
    defaultLocale: 'zh-CN'
  }
})