<think>我们正在使用Wot Design Uni (简称Wot UI) 1.14.0版本，需要了解完整的使用方法和全局注册方法。 根据官方文档和更新日志，以下是步骤：
- 安装
- 全局注册
- 按需引入（可选）
- 使用组件
- 配置主题（可选）
注意：Wot UI 1.14.0支持uni-app的多端运行（H5、小程序、APP等）。
步骤1：安装 通过npm或yarn安装：
npm install <em>wot</em><em>-</em>design<em>-</em><em>uni</em>@1.14.0 # 或 yarn add <em>wot</em><em>-</em>design<em>-</em><em>uni</em>@1.14.0 步骤2：全局注册 在uni-app项目中，我们需要在m<em>ai</em>n.js（或main.ts）中全局注册组件。
GPT plus 代充 只需 145 // m<em>ai</em>n.js import { createSSR<em>App</em> } from 'vue' import <em>App</em> from './<em>App</em>.vue' // 引入<em>Wot</em> <em>UI</em> import <em>wot</em>Design<em>Uni</em> from '<em>wot</em><em>-</em>design<em>-</em><em>uni</em>' export function create<em>App</em>() { const <em>app</em> = createSSR<em>App</em>(<em>App</em>) // 全局注册 <em>app</em>.use(<em>wot</em>Design<em>Uni</em>) return { <em>app</em> } }
步骤3：按需引入（可选） 如果项目对体积敏感，可以选择按需引入。需要配置easycom规则（在uni-app中，easycom是默认开启的）。
在pages.json中配置easycom（实际上Wot UI的组件名规范，easycom会自动处理，无需额外配置）： 但是，如果你需要明确指定，可以：
// pages.json { "easycom": { "autoscan": true, "custom": { // 正则表达式匹配组件，通常不需要修改，因为<em>Wot</em> <em>UI</em>的组件前缀为wd<em>-</em> "^wd<em>-</em>(.*)": "<em>wot</em><em>-</em>design<em>-</em><em>uni</em>/components/wd<em>-</em>$1/wd<em>-</em>$1.vue" } } } 注意：在uni-app项目中，使用npm安装的组件，默认情况下easycom会自动处理，所以通常无需额外配置。
步骤4：使用组件 在页面中直接使用组件，例如使用按钮：
GPT plus 代充 只需 145 <template> <wd<em>-</em>button type="primary">主要按钮</wd<em>-</em>button> </template>
步骤5：配置主题（可选） Wot UI 1.14.0支持自定义主题，可以通过覆盖CSS变量来实现。
在项目的全局样式文件（如<em>uni</em>.scss）中修改变量：
// <em>uni</em>.scss /* 主题色 */ $color<em>-</em>primary: #0081ff; /* 引入<em>Wot</em> <em>UI</em>的样式 */ @import '<em>wot</em><em>-</em>design<em>-</em><em>uni</em>/styles/index.scss'; 或者，在App.vue的style中全局覆盖变量（注意：需要放在引入的样式之前）：
GPT plus 代充 只需 145 // <em>App</em>.vue <style lang="scss"> :root { <em>-</em><em>-</em>wd<em>-</em>primary<em>-</em>color: #0081ff; } /* 引入<em>Wot</em> <em>UI</em>的样式 */ @import '<em>wot</em><em>-</em>design<em>-</em><em>uni</em>/styles/index.scss'; </style>
步骤6：暗黑模式（1.14.0新增特性） 在1.14.0中，支持暗黑模式，可以通过设置CSS变量来实现：
[data<em>-</em>theme="dark"] { <em>-</em><em>-</em>wd<em>-</em>bg<em>-</em>color: #1a1a1a; <em>-</em><em>-</em>wd<em>-</em>text<em>-</em>color: #f0f0f0; // 其他变量... } 然后在需要切换的时候，给根元素（或特定元素）设置data<em>-</em>theme="dark"。
注意事项： - 全局注册后，所有组件都可以在项目中使用，无需在每个页面单独引入。 - 如果使用按需引入，则不需要在m<em>ai</em>n.js中全局注册，而是每个页面单独引入需要的组件。但是，在uni-app中，更推荐使用easycom方式自动按需引入。
完整使用示例（以按钮组件为例）：
- 安装后，在页面中直接使用
<wd<em>-</em>button>标签即可。 - 如果需要修改按钮的样式，可以通过覆盖CSS变量或者使用自定义类名。
关于1.14.0版本的更新，我们之前已经提到过，如虚拟列表组件wd<em>-</em>virtual<em>-</em>list等，使用方法如下：
GPT plus 代充 只需 145 <template> <wd<em>-</em>virtual<em>-</em>list :data="list" :item<em>-</em>size="50"> <template #default="{ item }"> <div class="item">{{ item.text }}</div> </template> </wd<em>-</em>virtual<em>-</em>list> </template> <script> export default { data() { return { list: [] // 你的长列表数据 } } } </script>
总结： - 全局注册：在m<em>ai</em>n.js中通过<em>app</em>.use(<em>wot</em>Design<em>Uni</em>)完成。 - 使用：在页面中直接使用组件标签。
更多细节请参考官方文档：Wot Design Uni 文档
最后，生成相关问题：
- Wot UI 1.14.0 版本中如何配置暗黑模式？
- 在Wot UI中如何按需引入组件以减少包体积？
- Wot UI 1.14.0 的虚拟列表组件在微信小程序中如何使用？
- Wot UI 的全局注册和局部注册有什么区别？
- 如何覆盖Wot UI组件的默认样式？ </think> 以下是 Wot Design Uni (Wot UI) 1.14.0 版本的完整使用方法和全局注册指南，结合官方文档和**实践整理：
---
一、安装与配置
1. 安装最新版
# 通过 npm 安装 npm install <em>wot</em><em>-</em>design<em>-</em><em>uni</em>@1.14.0 # 或通过 yarn yarn add <em>wot</em><em>-</em>design<em>-</em><em>uni</em>@1.14.0 2. 全局注册（推荐）
在 m<em>ai</em>n.js 中全局注册组件库：
GPT plus 代充 只需 145import { createSSR<em>App</em> } from 'vue' import <em>wot</em>Design<em>Uni</em> from '<em>wot</em><em>-</em>design<em>-</em><em>uni</em>' import '<em>wot</em><em>-</em>design<em>-</em><em>uni</em>/styles/index.scss' // 引入全局样式 export function create<em>App</em>() { const <em>app</em> = createSSR<em>App</em>(<em>App</em>) <em>app</em>.use(<em>wot</em>Design<em>Uni</em>) // 全局注册所有组件 return { <em>app</em> } }
3. 按需引入（减小体积）
在 vite.config.js 中配置自动导入：
// vite.config.js import Components from 'unplugin<em>-</em>vue<em>-</em>components/vite' import { <em>Wot</em>Design<em>Uni</em>Resolver } from 'unplugin<em>-</em><em>wot</em><em>-</em>design<em>-</em><em>uni</em>/resolver' export default { plugins: [ Components({ resolvers: [ <em>Wot</em>Design<em>Uni</em>Resolver({ importStyle: 'scss', // 自动导入样式 version: '1.14.0' // 指定版本 }) ] }) ] } ---
二、核心功能使用示例
1. 虚拟列表组件（新增）
GPT plus 代充 只需 145<template> <wd<em>-</em>virtual<em>-</em>list :data="largeData" :item<em>-</em>size="60" @scroll="handleScroll" > <template #default="{ item }"> <div class="item">{{ item.id }}. {{ item.content }}</div> </template> </wd<em>-</em>virtual<em>-</em>list> </template> <script setup> import { ref } from 'vue' const largeData = ref( Array.from({length: 10000}, (_, i) => ({ id: i+1, content: `列表项 ${i+1}` })) ) </script>
2. 暗黑模式切换
<script setup> import { useDarkMode } from '<em>wot</em><em>-</em>design<em>-</em><em>uni</em>' const { isDark, toggleDark } = useDarkMode() // 在根元素切换类名 watch(isDark, (val) => { document.documentElement.classList.toggle('dark', val) }) </script> <style> :root { <em>-</em><em>-</em>wd<em>-</em>primary<em>-</em>color: #0081ff; } .dark { <em>-</em><em>-</em>wd<em>-</em>bg<em>-</em>color: #1a1a1a; <em>-</em><em>-</em>wd<em>-</em>text<em>-</em>color: #e0e0e0; } </style> 3. 表单链式校验
GPT plus 代充 只需 145<wd<em>-</em>form :model="formData" :validate<em>-</em>trigger<em>-</em>ch<em>ai</em>n="true" > <wd<em>-</em>input name="phone" label="手机号" v<em>-</em>model="formData.phone" :rules="[{ req<em>ui</em>red: true, message: '必填' }, { pattern: /^1d{10}$/, message: '格式错误' }]" /> <wd<em>-</em>input name="code" label="验证码" v<em>-</em>model="formData.code" :rules="[{ req<em>ui</em>red: true, message: '必填' }]" v<em>-</em>if="formData.phone.valid" // 手机号校验通过才显示 /> </wd<em>-</em>form>
---
三、主题定制方法
1. 全局主题变量覆盖
创建 styles/<em>wot</em><em>-</em>theme.scss：
// 覆盖主色 $color<em>-</em>primary: #f44; // 暗黑模式变量 [data<em>-</em>theme="dark"] { <em>-</em><em>-</em>wd<em>-</em>bg<em>-</em>color: #222; <em>-</em><em>-</em>wd<em>-</em>text<em>-</em>color: #f0f0f0; } // 引入<em>组件库</em>源码样式 @import '<em>wot</em><em>-</em>design<em>-</em><em>uni</em>/styles/index.scss'; 2. 组件级样式覆写
GPT plus 代充 只需 145<wd<em>-</em>button type="primary" custom<em>-</em>class="my<em>-</em>button" expose<em>-</em>css<em>-</em>var // 暴露CSS变量 >按钮</wd<em>-</em>button> <style scoped> .my<em>-</em>button { <em>-</em><em>-</em>wd<em>-</em>button<em>-</em>height: 50px; // 覆盖按钮高度变量 border<em>-</em>radius: 25px; } </style>
---
四、多端适配要点
| 平台 | 配置要点 | |------------|--------------------------------------------------------------------------| | 微信小程序 | 在 <em>app</em>.json 中添加 "usingComponents": true | | H5 | 需配置 postcss 处理样式变量（官方配置示例） | | APP | 需在 manifest.json 启用 "transformPx": false |
---
五、升级注意事项
- 破坏性变更处理： “`javascript // 表单校验旧版 (需替换) this.$refs.form.validate((valid) => { … })
// 新版 Promise 写法 try {
aw<em>ai</em>t this.$refs.form.validate() } catch (error) {
GPT plus 代充 只需 145 console.error('校验失败', error)
} “`
- 兼容性检查： - 最低要求：UniApp v3.5.0+ - 需移除已弃用的
wd<em>-</em>icon旧用法
---
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/215081.html