# 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**: 3
- **Forks**: 3
- **Created**: 2025-02-26
- **Last Updated**: 2025-12-18

## 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/)**：一个基于Promise开发的uni-app跨平台、项目级别的请求库，具有更小的体积、易用的API、方便简单的自定义能力。
- **[Pinia](https://pinia.web3doc.top/)**：uniapp-vue3内置的Pinia是Vue的存储库，允许跨组件/页面共享状态。
- **[Wot Design Uni](https://wot-design-uni.netlify.app/)**：基于`vue3`+`Typescript`构建的组件库，参照`wot design`的设计规范进行开发，提供70+高质量组件，支持暗黑模式、国际化和自定义主题，旨在提高开发效率并提供统一的UI交互。

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

## 二、环境部署
- **安装依赖**
  ```bash
  pnpm i
  ```
- **HBuider版本**
  - 需要HBuider 4.+以上版本
  - 下载地址：[HBuider下载](https://www.dcloud.io/hbuilderx.html)
- **运行**
  - 使用HBuider运行项目

## 三、项目结构
项目结构图请参考：[项目结构图](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`

### 切换主题可以使用
```ts
import { useTheme } from '@/composables/useTheme'
const { theme, toggleTheme } = useTheme()
// theme 获取当前主题 light | dark
// toggleTheme(type) 修改当前主题 type=light | dark
```

### 个性化配置主题
#### 主题配置
1. 此处可以覆盖Wot Design Uni组件样式
2. 也可以定义样式，在页面直接引用

```ts
// @/composables/themeStyle.ts

const variateStyle = {
  // light 白天模式下需要覆盖的样式
  light: {
    buttonPrimaryBgColor: '#07c160', // 覆盖Wot Design Uni组件样式
    buttonPrimaryColor: '#07c160',
    qwer: "#fff" // 自定义样式
  },
  // dark 黑夜模式
  dark: {
    buttonPrimaryBgColor: 'red',
    buttonPrimaryColor: '#07c160',
    qwer: "#000"
  }
}
```

> 使用主题自定义样式
```ts
import { useTheme } from '@/composables/useTheme'
const { themeVars } = useTheme()
themeVars.qwer // 白天模式下为#fff，黑夜模式下为#000
```

#### 覆盖原生标签CSS默认样式
```scss
// @/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)

```ts
// 使用全局请求
let { proxy } = getCurrentInstance()
proxy.$http.get('地址', { params: { name: '111' }, 其他配置...) 
proxy.$http.post('地址', { name: 'qqq' }, { 其他配置... }) 
```

## 七、通用方法
### 定义全局方法
```ts
// @/utils/utils.js
export function showToast(data, position = "center") {
  uni.showToast({
    title: data,
    icon: 'none',
    duration: 3000,
    position
  })
}
```

### 使用定义方法
```ts
let { proxy } = getCurrentInstance()
proxy.$toast.showToast('成功')
```

## 八、代码仓库
- **Gitee地址**：[https://gitee.com/hu-yanjun/v3-template.git](https://gitee.com/hu-yanjun/v3-template.git)