# uniapp-multi-platform

**Repository Path**: caojingCode/uniapp-multi-platform

## Basic Information

- **Project Name**: uniapp-multi-platform
- **Description**: UniApp多平台开发框架 - Vue3+TypeScript+Pinia，支持Android/iOS/HarmonyOS，内置15+功能演示
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2025-07-10
- **Last Updated**: 2025-07-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# UniApp 多平台应用开发框架

一个功能完整的 UniApp 项目框架，**真正实现一套代码，多端运行**。已在 Android、iOS、HarmonyOS 平台验证通过。

## 🌟 核心亮点

- 🚀 **即时可体验** - 内置15+功能演示，打开即可测试各种移动端能力
- 📱 **真正多端** - Android、iOS、HarmonyOS、H5、小程序全支持
- 💪 **开箱即用** - 网络请求、状态管理、本地存储、TypeScript 全套配置完成
- 🛠️ **丰富工具** - 从基础工具到设备API，涵盖移动开发常用场景
- 📝 **完整类型** - 全量 TypeScript 支持，智能提示和错误检查

## 📱 功能演示（首页体验）

打开应用首页即可实际体验以下功能：

**核心框架能力**
- ✅ 网络请求（拦截器、错误处理、Token管理）
- ✅ 状态管理（Pinia响应式数据）
- ✅ 本地存储（支持过期时间、智能清理）
- ✅ TypeScript（完整类型定义和智能提示）

**设备信息获取**
- ✅ 设备详情（品牌、型号、系统版本、屏幕参数）
- ✅ 网络状态（实时监控WiFi/4G/5G状态）
- ✅ 电池信息（电量百分比、充电状态）
- ✅ 屏幕亮度（获取当前亮度值）

**媒体与交互**
- ✅ 相机拍照（调用系统相机）
- ✅ 图片选择（相册多选、自动压缩）
- ✅ 二维码扫描（支持二维码和条形码）
- ✅ 设备震动（长震动、短震动反馈）

**系统集成**
- ✅ GPS定位（获取经纬度、精度、海拔）
- ✅ 剪贴板（读写剪贴板内容）
- ✅ 文件操作（读写文件、缓存管理）

> 💡 每个功能都能**实际运行和测试**，不是简单的功能列表！

## 🏗️ 项目架构

```
uniapp-multi-platform/
├── src/
│   ├── api/                # API接口管理
│   │   └── index.ts       # 用户、应用、文件、业务接口定义
│   ├── assets/            # 静态资源
│   │   ├── images/       # 图片资源
│   │   ├── icons/        # 图标资源
│   │   └── styles/       # 样式文件
│   ├── components/        # 组件库
│   │   └── common/       # 通用组件
│   │       ├── EmptyState.vue     # 空状态页面
│   │       └── LoadingSpinner.vue # 加载动画
│   ├── pages/            # 页面文件
│   │   ├── index/       # 首页（功能演示）
│   │   └── user/        # 用户中心
│   ├── store/           # 状态管理（Pinia）
│   │   ├── app.ts      # 应用全局状态
│   │   └── user.ts     # 用户状态
│   ├── types/           # TypeScript类型定义
│   │   └── uni.d.ts    # UniApp API类型扩展
│   └── utils/           # 工具函数库
│       ├── request.ts  # 网络请求封装
│       ├── storage.ts  # 本地存储工具
│       └── common.ts   # 通用工具函数
├── App.vue              # 应用根组件
├── main.ts             # 应用入口
├── pages.json          # 页面路由配置
├── manifest.json       # 应用配置
├── uni.scss           # 全局样式变量
└── tsconfig.json      # TypeScript配置
```

## 🛠️ 开发环境

**必需环境**
- Node.js >= 16
- npm >= 8  
- HBuilderX（推荐）或 VS Code

**可选工具**
- Android Studio（Android开发）
- Xcode（iOS开发）
- 华为DevEco Studio（HarmonyOS开发）

## 🚀 快速开始

### 1. 安装依赖
```bash
npm install
```

### 2. 启动开发（选择平台）
```bash
# H5端（浏览器预览）
npm run dev:h5

# APP端（手机调试）
npm run dev:app

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

# 支付宝小程序  
npm run dev:mp-alipay
```

### 3. 打包发布
```bash
# H5端
npm run build:h5

# APP端
npm run build:app

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

## 💡 核心工具使用

### 网络请求
```typescript
import { userApi, appApi } from '@/api/index'

// 用户登录
const userInfo = await userApi.login({ username, password })

// 获取应用配置
const config = await appApi.getConfig()

// 文件上传
const uploadResult = await userApi.uploadAvatar(filePath)
```

### 本地存储（支持过期）
```typescript
import Storage from '@/utils/storage'

// 保存用户登录信息（7天过期）
Storage.set('userToken', token, 7 * 24 * 3600)

// 保存临时数据（30分钟过期）
Storage.set('tempData', data, 30 * 60)

// 获取数据（过期自动返回null）
const token = Storage.get('userToken')

// 永久存储
Storage.set('userSettings', settings)
```

### 状态管理
```typescript
import { useAppStore, useUserStore } from '@/store'

const appStore = useAppStore()
const userStore = useUserStore()

// 获取系统信息
await appStore.initApp()

// 用户操作
await userStore.login(username, password)
await userStore.logout()

// 响应式数据
console.log('当前网络:', appStore.networkType)
console.log('登录状态:', userStore.isLoggedIn)
```

### 通用工具函数
```typescript
import { 
  debounce, 
  throttle, 
  formatDate, 
  formatFileSize,
  showToast,
  showConfirm 
} from '@/utils/common'

// 防抖搜索
const search = debounce((keyword) => {
  // 搜索逻辑
}, 300)

// 格式化
const time = formatDate(new Date(), 'YYYY-MM-DD HH:mm')
const size = formatFileSize(1024000) // "1000.00 KB"

// 用户交互
showToast('操作成功')
const confirmed = await showConfirm('确定删除吗？')
```

## 🎨 样式系统

### 全局样式变量（uni.scss）
```scss
// 颜色
$uni-color-primary: #409EFF;
$uni-color-success: #67C23A;
$uni-color-warning: #E6A23C;
$uni-color-error: #F56C6C;

// 文字
$uni-text-color: #333;
$uni-text-color-grey: #999;

// 背景
$uni-bg-color: #fff;
$uni-bg-color-grey: #f8f8f8;
```

### 工具类（global.scss）
```vue
<template>
  <!-- 布局 -->
  <view class="flex flex-center">居中布局</view>
  <view class="flex flex-between">两端对齐</view>
  
  <!-- 间距（数字 × 8px） -->
  <view class="m-2 p-3">外边距16px，内边距24px</view>
  <view class="mt-1 mb-2">上边距8px，下边距16px</view>
  
  <!-- 文字 -->
  <text class="text-center text-primary">居中的主色文字</text>
  <text class="text-lg">大号文字</text>
  
  <!-- 颜色 -->
  <text class="text-success">成功绿色</text>
  <text class="text-warning">警告橙色</text>
</template>
```

## 📱 平台兼容性

| 功能 | Android | iOS | HarmonyOS | H5 | 微信小程序 |
|------|---------|-----|-----------|----| -------| 
| 基础功能 | ✅ | ✅ | ✅ | ✅ | ✅ |
| 相机拍照 | ✅ | ✅ | ✅ | ⚠️ | ✅ |
| GPS定位 | ✅ | ✅ | ✅ | ⚠️ | ✅ |
| 文件操作 | ✅ | ✅ | ✅ | ⚠️ | ✅ |
| 设备信息 | ✅ | ✅ | ✅ | ⚠️ | ✅ |

> ⚠️ H5端部分功能受浏览器安全限制

## 📋 开发规范

### 代码检查
```bash
# ESLint检查
npm run lint

# TypeScript类型检查
npm run type-check
```

### 提交规范
```bash
feat: 新增功能
fix: 修复bug  
docs: 文档更新
style: 代码格式
refactor: 代码重构
test: 测试相关
chore: 构建/工具
```

## 🔧 故障排除

### 常见问题

**Q: 编译报错 "Cannot find module"**
```bash
# 清除依赖重新安装
rm -rf node_modules package-lock.json
npm install
```

**Q: 手机运行白屏**
```bash
# 检查基座是否更新
# HBuilderX -> 运行 -> 运行到手机或模拟器 -> 制作自定义调试基座
```

**Q: 网络请求失败**
```typescript
// 检查request.ts中的baseURL配置
// 确认服务器地址和跨域设置
```

## 🤝 贡献指南

欢迎提交 Issue 和 Pull Request！

1. Fork 本仓库
2. 创建功能分支: `git checkout -b feature/新功能`
3. 提交更改: `git commit -m 'feat: 添加新功能'`  
4. 推送分支: `git push origin feature/新功能`
5. 提交 Pull Request

## 📄 开源协议

MIT License © 2024

## 🙏 技术栈致谢

- [Vue 3](https://vuejs.org/) - 渐进式JavaScript框架
- [UniApp](https://uniapp.dcloud.io/) - 跨平台应用开发框架  
- [Pinia](https://pinia.vuejs.org/) - Vue状态管理
- [TypeScript](https://www.typescriptlang.org/) - JavaScript类型支持
- [Axios](https://axios-http.com/) - HTTP请求库