# aidemo

**Repository Path**: zygh2019/aidemo

## Basic Information

- **Project Name**: aidemo
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2026-03-07
- **Last Updated**: 2026-07-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# UniApp + Vue3 + TypeScript 纯净基础项目模板

一个开箱即用的 UniApp 项目模板，支持微信小程序、H5、App 多端开发。

## 技术栈

- **UniApp** - 跨平台应用开发框架
- **Vue 3** - 渐进式 JavaScript 框架（组合式 API）
- **TypeScript** - JavaScript 的超集
- **Pinia** - Vue 状态管理库
- **Vite** - 下一代前端构建工具
- **Sass** - CSS 预处理器

## 项目结构

```
src/
├── api/
│   └── request.ts        # 网络请求封装（拦截器、统一错误处理）
├── stores/
│   └── index.ts          # Pinia 状态管理
├── utils/
│   └── platform.ts       # 多端判断工具
├── components/           # 公共组件
├── pages/
│   └── index/
│       └── index.vue     # 首页
├── static/               # 静态资源
├── App.vue               # 应用入口组件
├── main.ts               # 应用入口文件
├── pages.json            # 页面路由配置
├── manifest.json         # 应用配置
└── env.d.ts              # TypeScript 类型声明
```

## 核心功能

### 1. 网络请求封装

基于 `uni.request` 封装，位于 `src/api/request.ts`：

- ✅ 请求/响应拦截器
- ✅ 统一错误处理
- ✅ Token 自动注入
- ✅ 便捷的 HTTP 方法（GET/POST/PUT/DELETE）

```typescript
import { http } from '@/api/request'

// GET 请求
const data = await http.get('/api/user')

// POST 请求
const result = await http.post('/api/login', { username, password })
```

### 2. 状态管理

使用 Pinia，位于 `src/stores/index.ts`：

- ✅ 组合式 API 风格
- ✅ TypeScript 类型支持
- ✅ 用户信息管理示例

```typescript
import { useUserStore } from '@/stores'

const userStore = useUserStore()
userStore.setToken('token')
console.log(userStore.isLogin)
```

### 3. 多端适配工具

位于 `src/utils/platform.ts`：

- ✅ 平台判断（微信小程序/H5/App）
- ✅ 系统判断（iOS/Android）
- ✅ rpx/px 单位转换

```typescript
import { isWeixin, getPlatform, rpxToPx } from '@/utils/platform'

if (isWeixin()) {
  console.log('当前是微信小程序')
}
```

## 快速开始

### 安装依赖

```bash
npm install
```

### 开发模式

```bash
# 微信小程序
npm run dev:mp-weixin

# H5
npm run dev:h5

# App
npm run dev:app
```

### 生产构建

```bash
# 微信小程序
npm run build:mp-weixin

# H5
npm run build:h5

# App
npm run build:app
```

### 类型检查

```bash
npm run type-check
```

## 微信小程序开发

1. 运行 `npm run dev:mp-weixin`
2. 打开微信开发者工具
3. 导入项目根目录下的 `dist/dev/mp-weixin` 目录
4. 在 `src/manifest.json` 中配置 `mp-weixin.appid`

## H5 开发

1. 运行 `npm run dev:h5`
2. 浏览器访问 `http://localhost:3000`

## 配置说明

### manifest.json

应用配置文件，包含：
- 应用基本信息（名称、版本等）
- 各平台特定配置（微信小程序 appid、H5 路由模式等）

### pages.json

页面路由配置文件，包含：
- 页面路径和样式配置
- 全局样式配置
- TabBar 配置

### vite.config.ts

Vite 构建配置文件，可自定义：
- 开发服务器端口
- 构建优化选项
- 插件配置

## 注意事项

1. **条件编译**：使用 `#ifdef` 和 `#ifndef` 进行平台特定代码编写
2. **rpx 单位**：推荐使用 rpx 作为样式单位，自动适配不同屏幕
3. **API 兼容性**：注意不同平台的 API 差异，查阅 [UniApp 文档](https://uniapp.dcloud.net.cn/)
4. **TypeScript**：充分利用类型系统，提高代码质量

## 依赖版本

- Vue: ^3.4.21
- Pinia: ^2.1.7
- TypeScript: ^5.3.3
- Vite: 5.2.8
- UniApp: 3.0.0-4020920240930001

## License

MIT