Wot Design Uni高颜值、轻量化的uni-app组件库 快速入门

一、简介

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>