Ai_GirlFriend/移动端使用指南.md

# 📱 移动端使用指南

## ✅ 已完成的配置

### API 地址已更新
- **PHP 后台**: http://192.168.1.141:30100
- **Python API**: http://192.168.1.141:30101

配置文件：`xuniYou/utils/request.js`

---

## 🎯 移动端项目说明

### 项目类型
**uni-app** - 跨平台移动应用框架

### 支持平台
- ✅ H5（浏览器）
- ✅ 微信小程序
- ✅ Android APP
- ✅ iOS APP

### 项目位置
```
xuniYou/
```

---

## 🚀 启动方式

### 方式 1：使用 HBuilderX（推荐）

**HBuilderX** 是 uni-app 官方 IDE，功能最完整。

#### 1. 下载 HBuilderX
https://www.dcloud.io/hbuilderx.html

#### 2. 打开项目
1. 启动 HBuilderX
2. 文件 → 打开目录
3. 选择：`E:\Github\Ai_GirlFriend\xuniYou`

#### 3. 安装依赖
在 HBuilderX 终端中执行：
```bash
npm install
```

#### 4. 运行项目

**运行到 H5（浏览器）：**
- 点击顶部菜单：运行 → 运行到浏览器 → Chrome

**运行到微信小程序：**
1. 先安装微信开发者工具
2. 点击：运行 → 运行到小程序模拟器 → 微信开发者工具
3. 首次运行需要配置微信开发者工具路径

**运行到手机（真机调试）：**
1. 手机开启开发者模式和 USB 调试
2. 连接电脑
3. 点击：运行 → 运行到手机或模拟器

---

### 方式 2：使用命令行

#### 1. 安装依赖
```cmd
cd xuniYou
npm install
```

#### 2. 运行到不同平台

**H5（浏览器）：**
```cmd
npm run dev:h5
```
访问：http://localhost:8080

**微信小程序：**
```cmd
npm run dev:mp-weixin
```
然后在微信开发者工具中打开 `xuniYou/unpackage/dist/dev/mp-weixin`

**Android APP：**
```cmd
npm run dev:app-android
```

**iOS APP：**
```cmd
npm run dev:app-ios
```

---

## 📋 功能说明

### 主要功能模块

1. **登录注册**
   - 手机号验证码登录
   - 微信授权登录

2. **创建虚拟恋人**
   - 选择性格
   - 设置外貌
   - 选择声音
   - AI 生成形象

3. **聊天对话**
   - 文字聊天
   - 语音消息
   - 图片发送
   - 流式回复
   - 心声功能

4. **换装系统**
   - 服装商城
   - 虚拟试衣
   - 形象保存

5. **视频功能**
   - 跳舞视频生成
   - 唱歌视频生成

6. **社交功能**
   - 好友系统
   - 动态朋友圈
   - 点赞评论

7. **个人中心**
   - 用户信息
   - 金币充值
   - VIP 会员
   - 设置

---

## 🔧 配置说明

### 1. API 地址配置

文件：`xuniYou/utils/request.js`

```javascript
// 本地开发
export const baseURL = 'http://192.168.1.141:30100'      // PHP 后台
export const baseURLPy = 'http://192.168.1.141:30101'    // Python API

// 生产环境（部署后修改为实际域名）
// export const baseURL = 'https://api.yourdomain.com'
// export const baseURLPy = 'https://api.yourdomain.com'
```

### 2. 微信小程序配置

文件：`xuniYou/manifest.json`

```json
{
  "mp-weixin": {
    "appid": "wx87fdb468bb2d141a",  // 修改为你的小程序 AppID
    ...
  }
}
```

### 3. 环信 IM 配置

文件：`xuniYou/EaseIM/config/index.js`

配置环信 IM 的 AppKey 等信息。

---

## 🧪 测试步骤

### 1. 确保后端服务运行

```
✓ PHP 后台：http://192.168.1.141:30100
✓ Python API：http://192.168.1.141:30101
```

### 2. 启动移动端

**使用 HBuilderX：**
1. 打开项目
2. 运行到浏览器（H5）

**使用命令行：**
```cmd
cd xuniYou
npm run dev:h5
```

### 3. 测试功能

1. **注册/登录**
   - 输入手机号
   - 获取验证码
   - 登录

2. **创建恋人**
   - 选择性格
   - 设置外貌
   - 生成形象

3. **聊天测试**
   - 发送文字消息
   - 查看 AI 回复

---

## 📱 各平台运行说明

### H5（浏览器）

**优点：**
- 最快速的开发调试方式
- 支持热重载
- 可以使用浏览器开发者工具

**限制：**
- 某些原生功能不可用（如相机、录音等）
- 微信登录需要特殊处理

**运行：**
```cmd
npm run dev:h5
```

---

### 微信小程序

**优点：**
- 完整的微信生态支持
- 用户基数大
- 支付方便

**准备工作：**
1. 注册微信小程序账号
2. 获取 AppID
3. 下载微信开发者工具

**运行：**
1. HBuilderX：运行 → 运行到小程序模拟器
2. 或命令行：`npm run dev:mp-weixin`
3. 在微信开发者工具中打开生成的目录

**配置：**
- 修改 `manifest.json` 中的 `appid`
- 配置服务器域名（需要备案的 HTTPS 域名）

---

### Android APP

**优点：**
- 完整的原生功能
- 性能最好
- 可以上架应用商店

**准备工作：**
1. 安装 Android Studio
2. 配置 Android SDK
3. 准备签名证书

**运行：**
1. HBuilderX：运行 → 运行到手机或模拟器
2. 或使用云打包

---

### iOS APP

**优点：**
- 完整的原生功能
- 可以上架 App Store

**准备工作：**
1. Mac 电脑
2. Xcode
3. Apple 开发者账号

**运行：**
1. HBuilderX：运行 → 运行到手机或模拟器
2. 或使用云打包

---

## 🐛 常见问题

### 1. 连接失败

**错误：** `Failed to connect to 192.168.1.141:30101`

**解决：**
1. 确保后端服务正在运行
2. 检查 IP 地址是否正确
3. 检查防火墙设置
4. 确保手机和电脑在同一局域网

### 2. 依赖安装失败

**错误：** `npm install` 失败

**解决：**
```cmd
# 清理缓存
npm cache clean --force

# 使用淘宝镜像
npm config set registry https://registry.npmmirror.com

# 重新安装
npm install
```

### 3. 微信小程序不合法域名

**错误：** 不在以下 request 合法域名列表中

**解决：**
- 开发阶段：在微信开发者工具中勾选"不校验合法域名"
- 生产环境：在小程序后台配置服务器域名（需要 HTTPS）

### 4. 环信 IM 连接失败

**错误：** `easemob-websdk` 相关错误

**解决：**
```cmd
cd xuniYou
npm install easemob-websdk
```

---

## 📦 打包发布

### H5 打包

```cmd
npm run build:h5
```

生成目录：`xuniYou/unpackage/dist/build/h5`

### 小程序打包

```cmd
npm run build:mp-weixin
```

然后在微信开发者工具中上传。

### APP 打包

使用 HBuilderX 的云打包功能：
1. 发行 → 原生 App-云打包
2. 选择平台（Android/iOS）
3. 配置证书
4. 提交打包

---

## 🔐 生产环境部署

### 1. 修改 API 地址

将 `request.js` 中的地址改为生产环境：

```javascript
export const baseURL = 'https://api.yourdomain.com'
export const baseURLPy = 'https://api.yourdomain.com'
```

### 2. 配置 HTTPS

- 购买 SSL 证书
- 配置 Nginx 反向代理
- 确保所有 API 都使用 HTTPS

### 3. 配置域名白名单

- 微信小程序：在小程序后台配置服务器域名
- APP：无需配置

---

## 📞 需要帮助？

如果遇到问题：

1. **查看控制台日志** - 浏览器 F12 或 HBuilderX 控制台
2. **检查网络请求** - 查看 API 调用是否成功
3. **确认后端服务** - 访问 http://192.168.1.141:30101/docs
4. **查看文档** - uni-app 官方文档：https://uniapp.dcloud.net.cn/

---

**祝你开发顺利！** 🎉