liRQ
d9f87f72b5
-实现了`generateCaptcha`函数来创建随机验证码。 -添加了`drawCaptcha`函数，在画布上渲染带有视觉噪声的验证码。 feat:引入数据操作实用程序 -为数据处理创建了“normalizeText”、“filterRows”、“attachSheetName”、“flatenRows”和“buildDuplicates”函数。 -添加了用于记录管理的“createLoginLog”、“createRecord”、“mapMovieToRecord”和“createFolder”函数。 -实现了“buildTree”函数来构建分层数据结构。 feat:实现滚动锁定机制 -添加了“lockScroll”和“unlockScrolls”功能，以管理模式交互期间的后台滚动行为。 feat:创建存储实用程序函数 -引入了从本地存储中读取、写入和删除项目的功能。 chore:设置Vite配置 -配置了使用Vue进行开发的Vite，包括服务器设置和API代理。
241 lines
5.5 KiB
Markdown
241 lines
5.5 KiB
Markdown
# 网盘管理系统 - APP 打包指南
|
||
|
||
## 📱 项目说明
|
||
|
||
这是一个基于 Vue 3 + Capacitor 的跨平台移动应用，支持 Android 和 iOS。
|
||
|
||
## 🛠️ 技术栈
|
||
|
||
- **前端框架**: Vue 3 (Composition API)
|
||
- **构建工具**: Vite
|
||
- **跨平台方案**: Capacitor
|
||
- **UI 样式**: 原生 CSS（移动端适配）
|
||
|
||
## 📦 安装依赖
|
||
|
||
```bash
|
||
npm install
|
||
```
|
||
|
||
## 🚀 开发模式
|
||
|
||
### Web 开发
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
### Android 开发
|
||
```bash
|
||
# 1. 构建 Web 资源
|
||
npm run build
|
||
|
||
# 2. 同步到 Android
|
||
npx cap sync android
|
||
|
||
# 3. 在 Android Studio 中打开
|
||
npx cap open android
|
||
```
|
||
|
||
### iOS 开发（需要 macOS）
|
||
```bash
|
||
# 1. 添加 iOS 平台
|
||
npx cap add ios
|
||
|
||
# 2. 构建并同步
|
||
npm run build
|
||
npx cap sync ios
|
||
|
||
# 3. 在 Xcode 中打开
|
||
npx cap open ios
|
||
```
|
||
|
||
## 🏗️ 打包发布
|
||
|
||
### Android APK 打包
|
||
|
||
#### 方法一：使用 Android Studio（推荐）
|
||
1. 运行 `npx cap open android` 打开 Android Studio
|
||
2. 等待 Gradle 同步完成
|
||
3. 点击菜单 **Build → Build Bundle(s) / APK(s) → Build APK(s)**
|
||
4. APK 文件会生成在 `android/app/build/outputs/apk/debug/` 目录
|
||
|
||
#### 方法二：命令行打包
|
||
```bash
|
||
cd android
|
||
./gradlew assembleDebug
|
||
```
|
||
|
||
APK 位置：`android/app/build/outputs/apk/debug/app-debug.apk`
|
||
|
||
### 发布版本（签名 APK）
|
||
|
||
1. 创建密钥库文件：
|
||
```bash
|
||
keytool -genkey -v -keystore my-release-key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias my-alias
|
||
```
|
||
|
||
2. 在 `android/app/build.gradle` 中配置签名：
|
||
```gradle
|
||
android {
|
||
...
|
||
signingConfigs {
|
||
release {
|
||
storeFile file("../my-release-key.jks")
|
||
storePassword "your-store-password"
|
||
keyAlias "my-alias"
|
||
keyPassword "your-key-password"
|
||
}
|
||
}
|
||
buildTypes {
|
||
release {
|
||
signingConfig signingConfigs.release
|
||
minifyEnabled true
|
||
proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
3. 打包：
|
||
```bash
|
||
./gradlew assembleRelease
|
||
```
|
||
|
||
## 📂 项目结构
|
||
|
||
```
|
||
wangpan/vue/
|
||
├── src/ # 源代码
|
||
│ ├── api/ # API 接口
|
||
│ ├── components/ # Vue 组件
|
||
│ ├── utils/ # 工具函数
|
||
│ ├── App.vue # 主组件
|
||
│ └── main.js # 入口文件
|
||
├── android/ # Android 原生项目
|
||
├── ios/ # iOS 原生项目（macOS）
|
||
├── dist/ # 构建输出
|
||
├── public/ # 静态资源
|
||
├── capacitor.config.json # Capacitor 配置
|
||
└── package.json
|
||
```
|
||
|
||
## 🔧 配置说明
|
||
|
||
### Capacitor 配置 (capacitor.config.json)
|
||
|
||
```json
|
||
{
|
||
"appId": "com.wangpan.app", // APP ID
|
||
"appName": "网盘管理系统", // APP 名称
|
||
"webDir": "dist", // Web 资源目录
|
||
"plugins": {
|
||
"SplashScreen": { // 启动屏配置
|
||
"launchShowDuration": 2000,
|
||
"backgroundColor": "#f8f9fc",
|
||
"showSpinner": false
|
||
},
|
||
"StatusBar": { // 状态栏配置
|
||
"style": "light",
|
||
"backgroundColor": "#6366f1"
|
||
}
|
||
}
|
||
}
|
||
```
|
||
|
||
## 🎨 自定义图标和启动屏
|
||
|
||
### 更换 APP 图标
|
||
|
||
1. 准备图标文件（PNG 格式）：
|
||
- 1024x1024 (Google Play 要求)
|
||
- 512x512
|
||
- 192x192
|
||
- 144x144
|
||
- 96x96
|
||
- 72x72
|
||
- 48x48
|
||
|
||
2. 替换 `android/app/src/main/res/mipmap-*/ic_launcher.png`
|
||
|
||
3. 或使用在线工具生成：https://icon.kitchen/
|
||
|
||
### 更换启动屏
|
||
|
||
1. 准备启动屏图片（PNG 格式）
|
||
2. 替换 `android/app/src/main/res/drawable/splash.png`
|
||
3. 或使用 Cordova 插件自动生成
|
||
|
||
## 🐛 常见问题
|
||
|
||
### 1. Android Studio 无法识别项目
|
||
- 确保已安装 JDK 11+
|
||
- 确保已安装 Android SDK
|
||
- 运行 `npx cap sync android` 重新同步
|
||
|
||
### 2. 白屏问题
|
||
- 检查 `dist/` 目录是否有正确的构建文件
|
||
- 检查 `capacitor.config.json` 中的 `webDir` 配置
|
||
- 查看 Chrome DevTools: `chrome://inspect/#devices`
|
||
|
||
### 3. API 请求失败
|
||
- 确保后端服务已启动
|
||
- 检查 CORS 配置
|
||
- Android 需要配置网络安全策略（允许 HTTP）
|
||
|
||
### 4. 热重载不工作
|
||
- Capacitor 不支持热重载
|
||
- 修改代码后需要重新构建：`npm run build && npx cap sync`
|
||
|
||
## 📱 真机测试
|
||
|
||
### Android 真机调试
|
||
|
||
1. 开启手机的开发者选项和 USB 调试
|
||
2. 连接手机到电脑
|
||
3. 在 Android Studio 中点击 Run 按钮
|
||
4. 或使用命令：
|
||
```bash
|
||
npx cap run android
|
||
```
|
||
|
||
### Chrome 远程调试
|
||
|
||
1. 手机连接电脑
|
||
2. 浏览器访问 `chrome://inspect/#devices`
|
||
3. 选择你的设备进行调试
|
||
|
||
## 🔐 权限配置
|
||
|
||
如果需要访问相机、相册等权限，需要在 `android/app/src/main/AndroidManifest.xml` 中添加：
|
||
|
||
```xml
|
||
<uses-permission android:name="android.permission.CAMERA" />
|
||
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
|
||
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
|
||
```
|
||
|
||
## 📊 性能优化建议
|
||
|
||
1. **图片优化**：使用 WebP 格式，压缩图片
|
||
2. **代码分割**：使用动态导入 `import()`
|
||
3. **懒加载**：路由和组件按需加载
|
||
4. **缓存策略**：合理使用 localStorage 和 IndexedDB
|
||
5. **减少重绘**：避免频繁操作 DOM
|
||
|
||
## 📝 更新日志
|
||
|
||
### v1.0.0 (2026-06-08)
|
||
- ✅ 完成移动端适配
|
||
- ✅ 集成 Capacitor
|
||
- ✅ 支持 Android 打包
|
||
- ✅ 优化触摸交互
|
||
- ✅ 修复验证码拉伸问题
|
||
|
||
## 🤝 贡献指南
|
||
|
||
欢迎提交 Issue 和 Pull Request！
|
||
|
||
## 📄 许可证
|
||
|
||
MIT License
|