更新: - deploy.sh: 添加移动端部署命令 * mobile dev - 启动开发服务器 * mobile h5 - 构建H5版本 * mobile mp-weixin - 构建微信小程序 * mobile app - 构建App * 服务启动时显示移动端访问地址 新增: - MOBILE_DEPLOY.md: 移动端部署指南(173行) * 支持平台说明(H5/小程序/App) * 快速部署步骤 * 各平台构建和发布流程 * 配置说明和常见问题 访问地址: - H5: http://localhost/mobile - 开发调试: cd fund-mobile && npm run dev:h5
3.2 KiB
3.2 KiB
移动端部署指南
📱 支持平台
- H5 - 浏览器访问
- 微信小程序 - 微信生态
- App - Android/iOS原生应用
🚀 快速部署
1. 开发调试
cd docker/app
./deploy.sh mobile dev
2. H5部署
构建
./deploy.sh mobile h5
部署到Nginx
构建完成后,将 fund-mobile/dist/build/h5 目录复制到Nginx静态资源目录:
# 复制到Nginx
sudo cp -r ../../fund-mobile/dist/build/h5 /var/www/fund-mobile
# 配置Nginx(已包含在docker-compose.yml中)
# 访问地址:http://localhost/mobile
3. 微信小程序部署
构建
./deploy.sh mobile mp-weixin
发布步骤
- 下载并安装 微信开发者工具
- 打开微信开发者工具
- 选择 "导入项目"
- 选择目录
fund-mobile/dist/build/mp-weixin - 填写小程序AppID(测试号可跳过)
- 点击 "上传" 按钮发布
4. App部署
构建
./deploy.sh mobile app
Android打包
- 打开 HBuilderX
- 导入项目
fund-mobile - 点击 "发行" → "原生App-云打包"
- 选择 Android 证书
- 点击 "打包"
iOS打包
- 需要Mac电脑和Apple开发者账号
- 在 HBuilderX 中选择 "发行" → "原生App-云打包"
- 选择 iOS 证书
- 点击 "打包"
📋 部署命令汇总
| 命令 | 说明 |
|---|---|
./deploy.sh mobile dev |
启动开发服务器 |
./deploy.sh mobile h5 |
构建H5版本 |
./deploy.sh mobile mp-weixin |
构建微信小程序 |
./deploy.sh mobile app |
构建App |
🔧 配置说明
API地址配置
编辑 fund-mobile/src/config/api.ts:
// 开发环境
const API_BASE_URL = 'http://localhost:8080'
// 生产环境(部署后修改为实际地址)
const API_BASE_URL = 'http://your-domain.com'
微信小程序配置
编辑 fund-mobile/src/manifest.json:
{
"mp-weixin": {
"appid": "你的小程序AppID",
"setting": {
"urlCheck": false
}
}
}
📱 访问方式
H5访问
- 浏览器访问:
http://localhost/mobile - 手机扫码访问:部署后生成二维码
微信小程序
- 微信搜索小程序名称
- 扫码体验版二维码
App
- 下载安装APK/IPA文件
- 应用商店搜索下载
🔒 安全说明
- HTTPS:生产环境必须使用HTTPS
- Token存储:使用uni-app安全存储API
- 接口鉴权:所有接口需要JWT Token
- 图片上传:限制文件大小和类型
🐛 常见问题
Q1: H5页面空白
- 检查API地址是否正确
- 查看浏览器控制台错误信息
- 确认后端服务已启动
Q2: 微信小程序无法请求
- 检查小程序后台配置的request合法域名
- 开发阶段可关闭域名校验
- 确保使用HTTPS
Q3: App无法安装
- Android:开启"允许安装未知来源应用"
- iOS:需要信任企业证书
📞 技术支持
- 前端问题:检查uni-app官方文档
- 后端问题:查看Swagger文档 http://localhost:8080/swagger-ui.html
- 部署问题:查看Docker日志
docker-compose logs