# uniapp-vue3-wot

**Repository Path**: hu-yanjun/v3-template

## Basic Information

- **Project Name**: uniapp-vue3-wot
- **Description**: uniapp+vue3+ts 支持主题切换，黑夜模式。一套完整的基础框架。附有文档说明。兼容多端。
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 2
- **Created**: 2025-02-26
- **Last Updated**: 2025-09-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: uni-app, vue3, wotUi

## README

# uniapp-vue3 开发文档


## 一， 核心技术
+ uniapp：使用uniapp-vue3版本搭建
+ pnpm：快速、节省磁盘空间的包管理器(node版本18以上) `安装方法 npm i pnpm`
+ TypeScript：TypeScript 起源于使用JavaScript开发的。由于JavaScript语言本身的局限性，难以胜任大型项目的开发和维护。因此微软开发了TypeScript ，使得其能够胜任大型项目的开发。
+ [luch-request](https://www.quanzhan.co/luch-request/)： luch-request 是一个基于Promise 开发的uni-app跨平台、项目级别的请求库，它有更小的体积，易用的api，方便简单的自定义能力。
+ [Pinia](https://pinia.web3doc.top/)：使用uniapp-vue3内置自带的Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。
+ [Wot Design Uni](https://wot-design-uni.netlify.app/)：`wot-design-uni`组件库基于`vue3`+`Typescript`构建，参照`wot design`的设计规范进行开发，提供 70+高质量组件，支持暗黑模式、国际化和自定义主题，旨在给开发者提供统一的 UI 交互，同时提高研发的开发效率。

### 兼容性
App              | h5 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
| ---------------- | -- | ----- | ------ | ----- | ----- | ----- |
| app-vue app-nvue | √  | √     | √      | √     | √     | √

## 二，环境部署
+ 安装依赖
  > pnpm i
+ HBuider 4.+以上版本
  > 下载地址 https://www.dcloud.io/hbuilderx.html
+ 运行
  > 使用 HBuider 运行

## 三，项目结构
![image.png](https://p3-juejin-sign.byteimg.com/tos-cn-i-k3u1fbpfcp/67e05b5425454bc09a9e379aacf9c8d4~tplv-k3u1fbpfcp-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6:q75.awebp?rk3s=bb34011d&x-expires=1741309313&x-signature=gsOiUwbslOYiBkPdK4sagLkmtx0%3D)

## 四，组件实例
- [Wot Design Uni](https://wot-design-uni.netlify.app/) 组件库
> 示例页面 @/pages/index/index
- [z-paging](https://z-paging.zxlee.cn/)  列表组件
> 示例页面 @/pages/list/index
- [pinia](https://pinia.web3doc.top/)  使用
> 示例页面 @/pages/login/index
-  主题切换
> 示例页面 @/pages/mine/index
-  ts 范型使用
> 示例页面 @/pages/PersonInter/index

## 五，主题切换
> 位置 @/composables

### 切换主题可以使用
```
import { useTheme } from '@/composables/useTheme'
const { theme, toggleTheme } = useTheme()
// theme 获取当前主题 light | dark
// toggleTheme(type) 修改当前主题 type=light | dark
```
### 个性化配置主题
##### 主题配置
1，此处可以覆盖Wot Design Uni 组件样式

2，也可以定义样式 在页面直接引用
```
@/composables/themeStyle.ts

const variateStyle = {
        // light 白天模式下需要覆盖的样式
	light: {
		buttonPrimaryBgColor: '#07c160', // 覆盖Wot Design Uni 组件样式
		buttonPrimaryColor: '#07c160',
                qwer: "#fff" // 自定义样式
	},
        // dark 黑夜模式
	dark: {
		buttonPrimaryBgColor: 'red',
		buttonPrimaryColor: '#07c160',
                qwer: "#000"
	}
}
```
> 使用主题自定义样式
```
import { useTheme } from '@/composables/useTheme'
const { themeVars } = useTheme()
themeVars.qwer // 白天模式下#fff，黑夜模式下"#000"
```
##### 覆盖 原生标签css默认样式
```
@/composables/theme.scss
// 白天模式 
.wot-theme-light {
  min-height: 100% !important;
  color: #565656;
  background-color: #f7f7f7 !important;
}
// 黑夜模式
.wot-theme-dark {
  min-height: 100% !important;
  color: #f9f9f9;
  background-color: #3f3f3f !important;
}
```

### 六，api请求
> 参数可参考 
[luch-request](https://www.quanzhan.co/luch-request/guide/3.x/#%E5%AE%9E%E4%BE%8B%E6%96%B9%E6%B3%95)
```
// 使用 全局请求
let { proxy } = getCurrentInstance()
proxy.$http.get('地址'， {params: {name: '111'}, 其他配置...}) 
proxy.$http.post('地址'，{name: 'qqq'}, {其他配置...}) 
...
```

### 七，通用方法
##### 定义全局方法
```
@/utils/utils.js
export function showToast(data, position = "center") {
	uni.showToast({
		title: data,
		icon: 'none',
		duration: 3000,
		position
	})
}
...
```
##### 使用定义方法
```
let { proxy } = getCurrentInstance()
proxy.$toast.showToast('成功')
```
## gitee 代码
https://gitee.com/hu-yanjun/v3-template.git