企业官网建设流程全解析

• 前端
• UI组件
• 移动开发
• 小程序

wot-design-uni 是一个基于 Vue3 + TypeScript 构建、面向 uni-app 生态的高质量组件库，官方文档定位为「A Beautiful and Lightweight uni-app Component Library」（高颜值、轻量化的 uni-app 组件库），提供 80+ 组件并支持暗黑模式、国际化与自定义主题。本文以 英文官方首页 的能力声明为主线，结合仓库源码（组件目录、语言包、主题配置与 ConfigProvider 实现）逐项拆解其技术架构与实战用法，读完你将掌握 wot-design-uni 的组件体系、主题定制机制、国际化扩展方式与多端适配原理，能够直接在 uni-app 项目中落地使用。

项目定位：一套代码覆盖多端的 uni-app 组件库

wot-design-uni 参照 wot design 的设计规范开发，目标是「给开发者提供统一的 UI 交互，同时提高研发的开发效率」。从仓库元数据看，其核心声明如下：

• 组件库 ID 为wot-design-uni，当前版本 1.14.0，采用 MIT 开源协议（见 uni_modules 包声明）；
• 技术栈为 Vue3 + TypeScript，peerDependencies要求vue >= 3.2.47，仅支持 Vue3（vue2: n）；
• 官方特性列表（英文首页 hero 区与 介绍页 一致）：多平台覆盖、80+ 高质量组件、TypeScript 类型系统、国际化（内置 15 种语言包）、暗黑模式、CSS 变量主题定制、丰富的文档与组件示例、快速上手模板。

在动手使用之前，建议先通读官方 入门指南 与 快速上手 两篇文档，它们与本文互为补充，分别说明项目背景与安装配置细节。

多平台支持：微信、支付宝、钉钉、H5、APP 全覆盖

首页特性第一条即「Multi-Platform Support：Supports WeChat Mini Program, Alipay Mini Program, DingTalk Mini Program, H5, APP, and more platforms」。这一点在组件库的 uni_modules 包声明中得到了精确印证（package.json 的dcloudext.platforms字段）：

• 客户端：App的app-vue支持（app-nvue、app-uvue不支持）；H5-mobile支持 Safari、Android Browser、微信浏览器、QQ 浏览器；H5-pc支持 Chrome、Edge、Firefox、Safari；
• 小程序：微信（y）、阿里（y）、QQ（y）、钉钉（y）；百度、字节跳动、快手、飞书、京东标记为未验证（u）；
• 快应用：华为、联盟标记为未验证（u）。

这一「一套代码多端运行」的能力依托于 uni-app 编译体系：组件全部以view/slot等 uni-app 跨端标签书写，同时通过uni.scss中的主题变量与条件编译插件（见 vite-plugin-uni-conditional-compile）处理平台差异。仓库自带的演示工程（src/pages 与 src/subPages 下的各组件示例页）本身就是跨端可运行的完整 demo，可在微信小程序、支付宝小程序、H5 与 APP 中直接预览。

80+ 组件：从组件目录看组件体系

首页声明提供 80+ 高质量组件、覆盖移动端主流场景。从当前仓库源码结构看，components 目录 下wd-*前缀的组件目录已超过 90 个（含common、composables两个共享目录在内共 102 个目录），覆盖导航、表单、展示、反馈、业务等移动端主流场景，例如：

• 表单类：wd-input、wd-textarea、wd-checkbox、wd-radio、wd-switch、wd-slider、wd-rate、wd-picker、wd-datetime-picker、wd-upload、wd-form；
• 导航类：wd-navbar、wd-tabbar、wd-tabs、wd-sidebar、wd-index-bar、wd-sticky、wd-backtop；
• 展示类：wd-swiper、wd-steps、wd-tag、wd-badge、wd-progress、wd-circle、wd-skeleton、wd-count-down、wd-count-to、wd-table；
• 反馈类：wd-toast、wd-message-box、wd-notify、wd-action-sheet、wd-popup、wd-popover、wd-tooltip、wd-loading、wd-loadmore；
• 业务/扩展类：wd-tour、wd-signature、wd-slide-verify、wd-img-cropper、wd-watermark、wd-video-preview、wd-keyboard、wd-number-keyboard等。

每个组件的目录结构遵循统一的三件套规范（以wd-button为例）：

• wd-button.vue：组件模板与逻辑（见 wd-button.vue）；
• types.ts：props 类型定义与xxxThemeVars主题变量类型（见 wd-config-provider/types.ts）；
• index.scss：样式实现，内含.wot-theme-dark暗黑分支（见 wd-button/index.scss）。

各组件还配套了完善的单元测试（tests/components 下与组件一一对应的*.test.ts），例如 wd-button.test.ts、wd-calendar.test.ts，可作为组件行为与 API 稳定性的参考依据。

组件使用方式：easycom 自动导入

wot-design-uni 组件遵循 uni-app 的easycom规范，安装后即可在页面中直接使用而无需手动 import/register。两种接入方式详见 快速上手：

方案一：配置 pages.json 的 easycom 规则

// pages.json { "easycom": { "autoscan": true, "custom": { "^wd-(.*)": "wot-design-uni/components/wd-$1/wd-$1.vue" } }, // 其余原有内容 "pages": [ /* ...... */ ] }

方案二：基于 vite 的自动导入插件（@uni-helper/vite-plugin-uni-components，推荐 0.0.9 及以上版本，内置WotResolver）：

// vite.config.ts import { defineConfig } from 'vite' import uni from '@dcloudio/vite-plugin-uni' import Components from '@uni-helper/vite-plugin-uni-components' import { WotResolver } from '@uni-helper/vite-plugin-uni-components/resolvers' export default defineConfig({ plugins: [ Components({ resolvers: [WotResolver()] }), uni() ] })

需要注意：uni-app平台不支持全局组件挂载，Message、Toast等命令式组件仍需在 SFC 中显式挂载占位标签，例如<wd-toast></wd-toast>。此外组件库依赖sass，需确保项目内sass版本不高于 1.78.0（Dart Sass 3.0.0 弃用了一批 API，组件库暂未兼容），详见 常见问题。

TypeScript 支持：面向类型安全的组件 API

首页特性明确「Built with TypeScript, providing a robust component type system」。仓库中组件的 props 定义全部以 TS 类型声明，例如wd-config-provider的 types.ts 通过makeStringProp、baseProps等工具函数构造 props，并导出ConfigProviderProps、ConfigProviderThemeVars等可复用的类型。

组件库入口 index.ts 统一导出了useToast、useMessage、useNotify等组合式函数、dayjs时间工具、Locale国际化对象以及ConfigProviderThemeVars类型：

export { useToast } from './components/wd-toast' export { useMessage } from './components/wd-message-box' export * from './components/composables' export * from './components/wd-notify' export { default as dayjs } from './dayjs' export * as CommonUtil from './components/common/util' export * as clickOut from './components/common/clickoutside' export * from './locale' export type { ConfigProviderThemeVars } from './components/wd-config-provider/types'

对于 CLI 工程使用 npm 安装的场景，还需在tsconfig.json中声明全局组件类型以获得 Volar 的类型提示（HBuilderX 工程与 uni_modules 安装方式无需配置）：

// tsconfig.json { "compilerOptions": { "types": ["wot-design-uni/global"] } }

国际化：15+ 语言包与可扩展的 Locale 机制

首页特性标注「Supports internationalization with 15 built-in language packs」。从当前仓库源码看，语言包目录 已包含 16 个语言文件，覆盖中英日韩、俄法德西葡、阿土泰越、维吾尔语及繁中变体等：

zh-CN、zh-HK、zh-TW、en-US、ja-JP、ko-KR、ru-RU、fr-FR、de-DE、es-ES、pt-PT、ar-SA、th-TH、tr-TR、vi-VN、ug-CN。

Locale 运行时实现

国际化核心实现在 locale/index.ts：基于 Vue 的ref/reactive维护当前语言与消息表，对外暴露Locale对象：

const lang = ref<string>('zh-CN') const messages = reactive<Messages>({ 'zh-CN': zhCN }) export const Locale = { messages(): Message { return messages[lang.value] }, use(newLang: string, newMessage?: Message) { lang.value = newLang if (newMessage) { this.add({ [newLang]: newMessage }) } }, add(newMessages: Messages = {}) { deepAssign(messages, newMessages) } } export const useCurrentLang = () => lang

• use(lang, message?)：切换语言；若同时传入消息对象则动态注册新语言包；
• add(messages)：通过deepAssign深合并增量消息，便于在业务层覆盖或扩展组件文案；
• useCurrentLang()：返回当前语言响应式引用，供组件内部联动更新。

语言包内容结构

以 zh-CN.ts 为例，语言包按组件维度组织文案键，且部分键支持函数式插值（如分页、日历的周/月格式、滑动验证提示）：

export default { calendar: { confirm: '确定', weekFormat: (year: number, week: number) => `${year} 第 ${week} 周`, // ... }, calendarView: { rangePrompt: (maxRange: number) => `选择天数不能超过${maxRange}天`, // ... }, loadmore: { loading: '正在努力加载中...', finished: '已加载完毕', retry: '点击重试' }, pagination: { page: (value: number) => `当前页：${value}`, total: (total: number) => `当前数据：${total}条` }, tour: { prev: '上一步', next: '下一步', finish: '完成', skip: '跳过' }, slideVerify: { text: '向右滑动验证', successText: '验证通过' } // ... 覆盖 calendar/picker/upload/tabs 等全部需要文案的组件 }

业务方若需自定义文案，可通过Locale.use(lang, customMessages)或Locale.add(...)在应用层注入，无需改动组件源码。

暗黑模式：一行属性全局生效

首页特性「Dark Mode and Theme Customization」在组件层由wd-config-provider承担。开启方式极为简单——给根节点包裹<wd-config-provider>并设置theme="dark"：

<wd-config-provider theme="dark">...</wd-config-provider>

源码实现链路

1. props 定义：types.ts 中theme类型为ConfigProviderTheme = 'light' | 'dark'，默认值'light'；themeVars为ConfigProviderThemeVars对象，默认{}。
2. 模板渲染：wd-config-provider.vue 在根节点上计算wot-theme-${props.theme}类名，即暗黑模式下根节点会带上wot-theme-dark类。
3. 样式作用域：每个组件的 SCSS 内部都声明了.wot-theme-dark { ... }暗黑分支（例如 wd-button/index.scss、wd-action-sheet/index.scss），当祖先节点携带wot-theme-dark类时自动切换到暗黑配色。
4. 暗黑变量基座：uni.scss 定义了全套暗黑 SCSS 变量，如$-dark-background: #131313、$-dark-background2: #1b1b1b、$-dark-color: #ffffff、$-dark-border-color等；仓库还提供了完整的明暗双主题导航/背景配置示例 theme.json（dark 与 light 两套 navBgColor、bgColor、selectedColor 等）。

动态切换

通过响应式变量动态设置theme即可实现明暗即时切换：

<wd-config-provider :theme="theme">...</wd-config-provider>

export default { setup() { const theme = ref('light') setTimeout(() => { theme.value = 'dark' }, 1000) return { theme } } }

需要注意的是：Wot 的暗黑模式只影响 Wot 组件自身的 UI，不会改动全局文本与背景色；若需要页面整体变暗，官方建议配合如下全局样式（详见 ConfigProvider 文档）：

.wot-theme-dark body { color: #f5f5f5; background-color: black; }

主题定制：CSS 变量驱动的换肤体系

首页特性「Customize CSS variables and component styles for your needs」。Wot 组件通过丰富的 CSS 自定义属性（Custom Properties）组织样式，覆盖变量即可实现主题定制、动态换肤。

主色变量一览

在 variable.scss 中，多个组件共用的主变量以--wot-*形式对外暴露，默认值如下（对应 自定义主题文档 中的色板定义）：

此外还有紫色#8268de、黄色#f0cf1d、蓝色#2bb3ed等辅助色，以及一套 100%/85%/65%/45%/25%/15%/9%/4%/2% 透明度递进的灰色层级（中性色），用于表达文本、背景、边框、分割线的信息层级。主题色默认值定义在小程序端page节点、H5 端:root节点。

方式一：直接覆盖 CSS 变量

在页面样式中覆盖变量即可即时生效，例如将 Button 默认背景改为绿色：

:root, page { --wot-button-normal-bg: green; }

方式二：通过 ConfigProvider 的 themeVars 注入

在根节点包裹<wd-config-provider>，通过theme-vars属性传入主题变量对象，camelCase 键会被自动转换为对应的--wot-前缀 CSS 变量：

<wd-config-provider :theme-vars="themeVars"> <div style="margin: 16px"> <wd-button round block type="primary">Submit</wd-button> </div> </wd-config-provider>

import { ref, reactive } from 'vue' export default { setup() { // buttonPrimaryBgColor 会被转换为 --wot-button-primary-bg-color const themeVars = reactive({ buttonPrimaryBgColor: '#07c160', buttonPrimaryColor: '#07c160' }) return { themeVars } } }

转换规则在 useConfigProvider.ts 中实现：mapThemeVarsToCSSVars将每个键 kebab-case 化并拼上--wot-前缀，最终由wd-config-provider以行内样式形式挂载到根节点。

TypeScript 类型提示

定义themeVars时推荐使用官方导出的ConfigProviderThemeVars类型，可获得全部组件主题变量的完整类型提示：

import type { ConfigProviderThemeVars } from 'wot-design-uni' const themeVars: ConfigProviderThemeVars = { colorTheme: 'red' }

该类型在 types.ts 中按组件维度细分（buttonThemeVars、calendarThemeVars、uploadThemeVars等数十个命名空间），从buttonPrimaryBgColor到toastBg均可精确配置。

全局共享主题：uni-ku-root + App.ku.vue

注意：ConfigProvider只影响其子组件样式，不影响全局根节点。若需全局共享主题配置，官方推荐借助虚拟根组件方案（uni-ku-root），配置方式见 ConfigProvider 文档「Global Sharing」一节，核心思路是：安装@uni-ku/root→ 在 vite.config 中挂载插件 → 创建App.ku.vue根组件，用<wd-config-provider>包住<KuRootView />占位视图 → 通过组合式函数（如useTheme）集中管理theme与themeVars并随处调用切换。

useConfigProvider：JS 层注入配置

在微信小程序等环境，由于原生插槽作用域隔离，插槽内渲染的组件可能访问不到外层ConfigProvider的上下文；使用root-portal将节点移到根节点也可能丢失上下文。为此组件库提供了useConfigProvider组合式函数（文档见 useConfigProvider，实现见 useConfigProvider.ts），可直接在 JS 逻辑中注入主题配置，保证深层嵌套或跨组件树的组件也能正确获得主题样式：

import { useConfigProvider } from '@/uni_modules/wot-design-uni' import { reactive, ref } from 'vue' // 支持 reactive 与 ref 两种形式，支持响应式更新 const themeVars = reactive({ colorTheme: 'red', buttonPrimaryBgColor: '#07c160' }) useConfigProvider({ themeVars })

快速上手模板与生态配套

首页特性「Quick Start Template」提到基于 vitesse-uni-app 深度整合 Wot UI 的快速启动模板 wot-starter，以及「Rich Documentation and Examples」——仓库 docs 目录即为完整文档站源码：中文文档位于 docs/component 与 docs/guide，英文文档位于 docs/en-US/component 与 docs/en-US/guide，每个组件均配有独立文档页与可运行的 demo 工程（src/subPages 下与组件一一对应的示例页）。

快速创建工程的官方命令（详见 CLI & Templates）：

pnpm create uni@latest -t wot-starter <your project name>

此外仓库还沉淀了以下可直接查阅的资料：

• 更新日志：版本演进与功能变更记录；
• 常见问题：sass 版本、easycom、多端兼容等高频问题解答；
• 优秀案例：基于 wot-design-uni 的真实项目集锦；
• 中文侧另有 AI 编程指南，面向 AI 友好的组件库使用场景提供提示词与代码规范参考。

总结

wot-design-uni 以「一套代码、多端运行」为设计目标，通过 80+ 组件、TypeScript 全量类型声明、15+ 内置语言包、CSS 变量主题体系与wd-config-provider全局配置组件，把多端适配、暗黑模式、国际化与换肤这些工程化痛点收敛为声明式的配置与开箱即用的 API。结合本文给出的源码路径（组件三件套结构、locale/index.ts、wd-config-provider、variable.scss），开发者既可以快速接入使用，也能深入源码理解其主题与国际化机制的实现原理，为业务定制与二次开发提供坚实基础。

• 前端
• UI组件
• 移动开发
• 小程序