6.9 KiB
6.9 KiB
📱 移动端使用指南
✅ 已完成的配置
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. 打开项目
- 启动 HBuilderX
- 文件 → 打开目录
- 选择：
E:\Github\Ai_GirlFriend\xuniYou
3. 安装依赖
在 HBuilderX 终端中执行：
npm install
4. 运行项目
运行到 H5（浏览器）：
- 点击顶部菜单：运行 → 运行到浏览器 → Chrome
运行到微信小程序：
- 先安装微信开发者工具
- 点击：运行 → 运行到小程序模拟器 → 微信开发者工具
- 首次运行需要配置微信开发者工具路径
运行到手机（真机调试）：
- 手机开启开发者模式和 USB 调试
- 连接电脑
- 点击：运行 → 运行到手机或模拟器
方式 2：使用命令行
1. 安装依赖
cd xuniYou
npm install
2. 运行到不同平台
H5（浏览器）：
npm run dev:h5
微信小程序：
npm run dev:mp-weixin
然后在微信开发者工具中打开 xuniYou/unpackage/dist/dev/mp-weixin
Android APP：
npm run dev:app-android
iOS APP：
npm run dev:app-ios
📋 功能说明
主要功能模块
-
登录注册
- 手机号验证码登录
- 微信授权登录
-
创建虚拟恋人
- 选择性格
- 设置外貌
- 选择声音
- AI 生成形象
-
聊天对话
- 文字聊天
- 语音消息
- 图片发送
- 流式回复
- 心声功能
-
换装系统
- 服装商城
- 虚拟试衣
- 形象保存
-
视频功能
- 跳舞视频生成
- 唱歌视频生成
-
社交功能
- 好友系统
- 动态朋友圈
- 点赞评论
-
个人中心
- 用户信息
- 金币充值
- VIP 会员
- 设置
🔧 配置说明
1. API 地址配置
文件：xuniYou/utils/request.js
// 本地开发
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
{
"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：
- 打开项目
- 运行到浏览器（H5）
使用命令行：
cd xuniYou
npm run dev:h5
3. 测试功能
-
注册/登录
- 输入手机号
- 获取验证码
- 登录
-
创建恋人
- 选择性格
- 设置外貌
- 生成形象
-
聊天测试
- 发送文字消息
- 查看 AI 回复
📱 各平台运行说明
H5（浏览器）
优点：
- 最快速的开发调试方式
- 支持热重载
- 可以使用浏览器开发者工具
限制：
- 某些原生功能不可用（如相机、录音等）
- 微信登录需要特殊处理
运行：
npm run dev:h5
微信小程序
优点：
- 完整的微信生态支持
- 用户基数大
- 支付方便
准备工作：
- 注册微信小程序账号
- 获取 AppID
- 下载微信开发者工具
运行：
- HBuilderX：运行 → 运行到小程序模拟器
- 或命令行：
npm run dev:mp-weixin - 在微信开发者工具中打开生成的目录
配置：
- 修改
manifest.json中的appid - 配置服务器域名（需要备案的 HTTPS 域名）
Android APP
优点：
- 完整的原生功能
- 性能最好
- 可以上架应用商店
准备工作：
- 安装 Android Studio
- 配置 Android SDK
- 准备签名证书
运行：
- HBuilderX：运行 → 运行到手机或模拟器
- 或使用云打包
iOS APP
优点：
- 完整的原生功能
- 可以上架 App Store
准备工作：
- Mac 电脑
- Xcode
- Apple 开发者账号
运行：
- HBuilderX：运行 → 运行到手机或模拟器
- 或使用云打包
🐛 常见问题
1. 连接失败
错误： Failed to connect to 192.168.1.141:30101
解决：
- 确保后端服务正在运行
- 检查 IP 地址是否正确
- 检查防火墙设置
- 确保手机和电脑在同一局域网
2. 依赖安装失败
错误： npm install 失败
解决：
# 清理缓存
npm cache clean --force
# 使用淘宝镜像
npm config set registry https://registry.npmmirror.com
# 重新安装
npm install
3. 微信小程序不合法域名
错误： 不在以下 request 合法域名列表中
解决：
- 开发阶段：在微信开发者工具中勾选"不校验合法域名"
- 生产环境：在小程序后台配置服务器域名（需要 HTTPS）
4. 环信 IM 连接失败
错误： easemob-websdk 相关错误
解决：
cd xuniYou
npm install easemob-websdk
📦 打包发布
H5 打包
npm run build:h5
生成目录：xuniYou/unpackage/dist/build/h5
小程序打包
npm run build:mp-weixin
然后在微信开发者工具中上传。
APP 打包
使用 HBuilderX 的云打包功能：
- 发行 → 原生 App-云打包
- 选择平台（Android/iOS）
- 配置证书
- 提交打包
🔐 生产环境部署
1. 修改 API 地址
将 request.js 中的地址改为生产环境：
export const baseURL = 'https://api.yourdomain.com'
export const baseURLPy = 'https://api.yourdomain.com'
2. 配置 HTTPS
- 购买 SSL 证书
- 配置 Nginx 反向代理
- 确保所有 API 都使用 HTTPS
3. 配置域名白名单
- 微信小程序：在小程序后台配置服务器域名
- APP：无需配置
📞 需要帮助？
如果遇到问题：
- 查看控制台日志 - 浏览器 F12 或 HBuilderX 控制台
- 检查网络请求 - 查看 API 调用是否成功
- 确认后端服务 - 访问 http://192.168.1.141:30101/docs
- 查看文档 - uni-app 官方文档：https://uniapp.dcloud.net.cn/
祝你开发顺利！ 🎉