# 移动端打包部署指导文档

## 📋 项目概述

**项目**: 校园管理系统移动端 (mobile/)  
**技术栈**: Vue 2.6.14 + uni-app 2.x + uview-ui 2.0.38  
**打包方式**: Vue CLI 命令行打包（无需HBuilderX）  

---

## 🚀 打包命令详解

### 1. H5网页版打包
```bash
cd mobile/
npm run build:h5
```
**输出目录**: `mobile/dist/build/h5/`  
**部署方式**: 直接部署到Web服务器（如Nginx）

### 2. 微信小程序打包
```bash
cd mobile/
npm run build:mp-weixin
```
**输出目录**: `mobile/dist/build/mp-weixin/`  
**后续操作**: 用微信开发者工具导入该目录

### 3. App打包
```bash
cd mobile/
npm run build:app-plus
```
**输出目录**: `mobile/dist/build/app-plus/`  
**后续操作**: 
- 使用HBuilderX云打包服务
- 或配置本地Android/iOS打包环境

### 4. 其他小程序平台
```bash
# 支付宝小程序
npm run build:mp-alipay

# 百度小程序  
npm run build:mp-baidu

# 字节跳动小程序
npm run build:mp-toutiao

# QQ小程序
npm run build:mp-qq
```

---

## 🔧 生产环境配置调整

### ⚠️ 必须修改的配置项

**文件**: `mobile/src/common/config.js`

#### 1. 服务器地址配置
```javascript
// 后端API服务器地址
serverUrl: 'https://hzdyjsapi.camasort.com'

// API基础路径
baseURL: 'https://hzdyjsapi.camasort.com'

// 前端域名（用于referer）
referer: 'https://hzdyjs.camasort.com/login?redirect=/index'
```

#### 2. 环境判断逻辑
- **开发环境**: 使用`/api`代理转发到`http://localhost:8080`
- **生产环境**: 直接访问`https://hzdyjsapi.camasort.com`

### 🔐 加密配置
- RSA密钥对已配置，与后端保持一致
- 客户端ID: `e5cd7e4891bf95d1d19206ce24a7b32e`
- 租户ID: `000000`

---

## 📦 不同平台部署方案

### 1. H5网页版部署
```bash
# 1. 打包
npm run build:h5

# 2. 部署到服务器
scp -r dist/build/h5/* user@server:/var/www/mobile/

# 3. Nginx配置示例
location /mobile {
    alias /var/www/mobile;
    index index.html;
    try_files $uri $uri/ /mobile/index.html;
}
```

### 2. 微信小程序发布
```bash
# 1. 打包
npm run build:mp-weixin

# 2. 用微信开发者工具打开
# 目录: mobile/dist/build/mp-weixin/

# 3. 在微信开发者工具中：
# - 预览测试
# - 上传代码
# - 提交审核
# - 发布上线
```

### 3. App发布流程
```bash
# 1. 打包
npm run build:app-plus

# 2. 使用HBuilderX云打包：
# - 打开HBuilderX
# - 导入项目: mobile/dist/build/app-plus/
# - 选择发行 -> 原生App-云打包
# - 配置证书和签名
# - 提交打包

# 3. 发布到应用商店：
# - Android: 上传到各大应用市场
# - iOS: 上传到App Store Connect
```

---

## 🔄 CI/CD自动化部署

### GitHub Actions示例
```yaml
name: Mobile Deploy
on:
  push:
    branches: [main]
    paths: ['mobile/**']

jobs:
  build-h5:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '18'
      
      - name: Install dependencies
        run: |
          cd mobile
          npm ci
      
      - name: Build H5
        run: |
          cd mobile
          npm run build:h5
      
      - name: Deploy to server
        run: |
          # 部署到服务器的脚本
          scp -r mobile/dist/build/h5/* ${{ secrets.SERVER_USER }}@${{ secrets.SERVER_HOST }}:/var/www/mobile/
```

---

## 📱 多端测试验证

### 开发环境测试
```bash
# H5开发服务器
npm run dev:h5
# 访问: http://localhost:8081

# 微信小程序开发
npm run dev:mp-weixin  
# 用微信开发者工具打开: mobile/dist/dev/mp-weixin/
```

### 生产环境验证
- **H5版本**: 在浏览器中访问部署地址
- **小程序**: 通过微信扫码体验版二维码
- **App**: 通过TestFlight(iOS)或内测分发(Android)

---

## 🚨 注意事项

### 1. 域名配置
- **后端API**: `https://hzdyjsapi.camasort.com`
- **前端域名**: `https://hzdyjs.camasort.com`
- **确保HTTPS证书有效**

### 2. 跨域处理
- 生产环境后端需要配置CORS允许前端域名
- 或者使用Nginx反向代理统一域名

### 3. 小程序特殊要求
- 微信小程序需要在管理后台配置服务器域名
- 确保API域名在小程序的request合法域名中

### 4. App打包要求
- Android需要签名证书
- iOS需要开发者证书和Provisioning Profile
- 确保manifest.json中的appid已配置

---

## 📞 问题排查

### 常见问题
1. **API请求失败**: 检查生产环境域名配置
2. **加密登录失败**: 验证RSA密钥对是否正确
3. **小程序白屏**: 检查域名是否已添加到合法域名列表
4. **App打包失败**: 检查证书配置和权限设置

### 调试方法
```javascript
// 在config.js中添加调试日志
console.log('当前环境:', process.env.NODE_ENV);
console.log('API地址:', REQUEST_CONFIG.baseURL);
console.log('服务器地址:', REQUEST_CONFIG.serverUrl);
```

---

**📝 文档维护**: 2025-01-03 创建  
**🔄 更新周期**: 每次部署流程变更时更新  
**👥 适用人员**: 开发人员、运维人员