一、简介
Wot Design Uni是一个基于Vue3和TypeScript开发的高颜值、轻量化的uni-app组件库。它提供了超过70个高质量组件，这些组件覆盖了移动端的主流场景，使得开发者能够更加高效地进行移动应用的开发。
以下是Wot Design Uni的一些主要特点：
-
多平台支持：Wot Design Uni支持微信小程序、支付宝小程序、钉钉小程序、H5、APP等多个平台，这为开发者提供了极大的便利。
-
组件丰富：包含超过70个高质量组件，涵盖了各种常用的UI元素和功能，满足不同应用场景的需求。
-
TypeScript支持：使用TypeScript进行构建，提供了良好的组件类型系统，有助于减少开发中的错误和提高代码的可维护性。
-
国际化支持：内置了6种语言包，支持国际化，方便开发面向不同语言用户的应用。
-
文档和示例：提供了丰富的文档和组件示例，为开发者提供了稳定的技术支持和参考。
-
主题定制和暗黑模式：支持修改CSS变量以及组件的样式自定义，包括暗黑模式，使得应用能够更好地适应不同的设计需求。
Wot Design Uni的安装和使用也相当便捷，提供了unimodules和npm两种安装方式。使用unimodules安装简单直接，而npm安装则需要一些额外的配置。此外，它还支持通过配置easycom来简化组件的引入和使用过程。
官网链接:
Wot Design Uni | 一个基于Vue3+TS开发的uni-app组件库，提供70+高质量组件，支持暗黑模式、国际化和自定义主题。
二、插件下载和使用（HBuilder X）
下载链接：
wot-design-uni 基于vue3+Typescript的高颜值组件库 - DCloud 插件市场
在pages.json中添加：
// pages.json
{
"easycom": {
"autoscan": true,
"custom": {
"^wd-(.*)": "wot-design-uni/components/wd-$1/wd-$1.vue"
}
},
// 此为本身已有的内容
"pages": [
// ......
]
}三、实战演示
使用Wot Design Uni组件库，仿写一下抖音的登录界面
效果展示：
我个人写代码的时候尽量不使用组件库，除非有一些实现效果，通过使用组件库里的组件可以更加便捷的实现，我才会使用
例如下面代码部分：
wd-icon组件使用，是因为获取指定的图标
wd-checkbox组件的使用，是因为不知道checkbox如何变成圆形的按钮，所以就直接使用该组件啦
代码部分：
<template>
<view class="layout">
<text :style="{fontSize:'40rpx',paddingTop:'120rpx'}">登录后,体验完整功能</text>
<text :style="{fontSize:'26rpx',padding:'5rpx',color:'#9c9c9c'}" >未注册的手机号码验证通过后将自动注册</text>
<div class="input-form">
<div>
<text :style="{fontWeight:'600'}">+86</text>
<wd-icon name="caret-down-small" size="22px"></wd-icon>
</div>
<span :style="{color:'#d1d1d1',fontSize:'10rpx'}">|</span>
<input :style="{paddingLeft:'15rpx'}" v-model="phone" type="number" placeholder="请输入手机号码" :maxlength="11"/>
</div>
<button class="button-submit">验证并登录</button>
<view class="agree-protocol">
<div class="checkbox-container">
<wd-checkbox v-model="agreeProtocol" @change="handleAgreeProtocol"/>
</div>
<text>
<text>已经阅读并同意</text>
<text :style="{color:'#089df7'}" >用户协议</text>
<text>和</text>
<text :style="{color:'#089df7'}" >隐私政策</text>
<text>以及</text>
<text :style="{color:'#089df7'}" >运营服商服务协议</text>，
<text>运营商将对你提供的手机号进行验证</text>
</text>
</view>
</view>
</template>
<script setup>
import {ref} from 'vue';
const phone = ref('');
const agreeProtocol = ref(false);
const handleInputPhone = ()=>{
}
const handleAgree = ()=>{
agreeProtocol.value = ! agreeProtocol.value;
}
</script>
<style lang="scss">
.layout{
width: 100%;
height: 100vh;
padding: 60rpx;
display: flex;
flex-direction: column;
.input-form{
display: flex;
align-items: center;
margin-top: 70rpx;
border: #e8e8e8 solid 1rpx;
border-radius: 15rpx;
padding: 20rpx;
}
.button-submit{
margin-top: 45rpx;
width: 90%;
border-radius: 20rpx;
color: #ffffff;
background-color: #fa7890;
}
.agree-protocol{
display: flex;
flex-direction: row;
align-items: center;
margin-top: 60rpx;
.checkbox-container {
margin-right: 5px;
height: 80%;
}
}
}
</style>
