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