Wot Design Uni

Wot Design Uni 是一个基于 Vue3 和 TypeScript 开发的高颜值、轻量化的 uni-app 组件库，参照 wot design 的设计规范进行开发。它提供了超过70个高质量组件，覆盖移动端主流场景，支持多平台（微信小程序、支付宝小程序、钉钉小程序、H5、APP等），并具备国际化、主题定制和暗黑模式等功能。这些特性使得 Wot Design Uni 成为开发者快速构建统一 UI 交互项目、提高开发效率的理想选择。

Wot Design Uni 网站截图

功能特点

• 多平台支持：支持微信小程序、支付宝小程序、钉钉小程序、H5、APP 等多个平台。
• 丰富的组件库：提供70+高质量组件，满足移动端主流场景的需求。
• TypeScript 支持：使用 TypeScript 构建，提供良好的组件类型系统，有助于减少开发错误。
• 国际化支持：内置15种语言包，支持国际化配置。
• 主题定制和暗黑模式：支持通过修改 CSS 变量实现主题定制，包括暗黑模式。
• 详细的文档和示例：提供丰富的文档和组件示例，帮助开发者快速上手。

使用步骤

1. 安装依赖：通过 npm 或 yarn 安装 Wot Design Uni。
   bash复制

   npm install wot-design-uni

   或
   bash复制

   yarn add wot-design-uni

2. 配置项目：在项目中引入 Wot Design Uni。
   JavaScript复制

   import { createApp } from 'vue';
   import App from './App.vue';
   import WotDesign from 'wot-design-uni';
   
   createApp(App).use(WotDesign).mount('#app');

3. 使用组件：在页面中直接使用组件。
   vue复制

   <template>
     <wd-button type="primary">主要按钮</wd-button>
   </template>

应用场景

• 移动应用开发：适用于微信小程序、支付宝小程序、钉钉小程序等平台的开发。
• 多语言支持：适合面向多语言用户的应用开发。
• 主题定制：适用于需要个性化主题或暗黑模式的应用。

常见问题及解决办法

1. 环境配置问题：确保 Node.js 版本在 12.x 以上，安装所有依赖包，并正确配置 uni-app 环境。
2. 组件使用问题：检查组件引入路径是否正确，参考文档确保正确使用组件的属性和方法。
3. 国际化配置问题：确保正确引入语言包，并在应用入口文件中配置国际化。
4. Sass 报错：确保 Sass 版本为 1.78.0 及以下。
5. 小程序样式隔离问题：在自定义组件中使用 Wot Design Uni 组件时，需开启 styleIsolation: 'shared' 选项。