202 lines
10 KiB
Plaintext
202 lines
10 KiB
Plaintext
|
||
╔═══════════════════════════════════════════════════════════════════════════╗
|
||
║ uni-app 项目打包流程图 ║
|
||
╚═══════════════════════════════════════════════════════════════════════════╝
|
||
|
||
|
||
┌─────────────────────────────────────────────────────────────────────────┐
|
||
│ 第一步：编译代码 │
|
||
└─────────────────────────────────────────────────────────────────────────┘
|
||
|
||
命令：npm run build:app
|
||
│
|
||
├─ 编译 Vue 组件
|
||
├─ 打包资源文件
|
||
├─ 处理样式和脚本
|
||
└─ 生成中间产物
|
||
│
|
||
▼
|
||
unpackage/dist/build/app-plus/
|
||
├─ app-service.js (业务逻辑)
|
||
├─ app.css (样式文件)
|
||
├─ manifest.json (配置文件)
|
||
└─ pages/ (页面文件)
|
||
|
||
⚠️ 注意：到这一步还没有 APK 文件！
|
||
|
||
|
||
┌─────────────────────────────────────────────────────────────────────────┐
|
||
│ 第二步：生成安装包（必须选择一种方式） │
|
||
└─────────────────────────────────────────────────────────────────────────┘
|
||
|
||
╔═══════════════════════════════════════════════════════════════════════╗
|
||
║ 方式 A：HBuilderX 云打包（推荐） ║
|
||
╚═══════════════════════════════════════════════════════════════════════╝
|
||
|
||
1. 下载 HBuilderX
|
||
https://www.dcloud.io/hbuilderx.html
|
||
│
|
||
▼
|
||
2. 打开项目
|
||
HBuilderX → 文件 → 打开目录
|
||
│
|
||
▼
|
||
3. 云端打包
|
||
菜单 → 发行 → 原生App-云打包
|
||
│
|
||
├─ 选择平台：Android / iOS
|
||
├─ 配置证书：公共测试证书（快速）
|
||
└─ 点击打包
|
||
│
|
||
▼
|
||
4. 云端处理（5-10分钟）
|
||
├─ 集成原生代码
|
||
├─ 编译原生项目
|
||
├─ 签名打包
|
||
└─ 生成 APK/IPA
|
||
│
|
||
▼
|
||
5. 下载安装包
|
||
📦 your-app.apk (Android)
|
||
📦 your-app.ipa (iOS)
|
||
|
||
✅ 优点：简单、快速、无需配置
|
||
⏱️ 耗时：15-20 分钟
|
||
|
||
|
||
╔═══════════════════════════════════════════════════════════════════════╗
|
||
║ 方式 B：离线打包（高级） ║
|
||
╚═══════════════════════════════════════════════════════════════════════╝
|
||
|
||
1. 下载离线 SDK
|
||
https://nativesupport.dcloud.net.cn/
|
||
│
|
||
▼
|
||
2. 配置原生环境
|
||
Android: Android Studio + JDK
|
||
iOS: Xcode (仅 Mac)
|
||
│
|
||
▼
|
||
3. 集成编译产物
|
||
复制 unpackage/dist/build/app-plus
|
||
到 SDK 的资源目录
|
||
│
|
||
▼
|
||
4. 原生打包
|
||
Android Studio → Build → Generate APK
|
||
Xcode → Archive → Export IPA
|
||
│
|
||
▼
|
||
5. 获得安装包
|
||
📦 app-release.apk
|
||
📦 app-release.ipa
|
||
|
||
⚠️ 需要：原生开发环境、SDK 配置
|
||
⏱️ 耗时：首次配置需要 1-2 小时
|
||
|
||
|
||
┌─────────────────────────────────────────────────────────────────────────┐
|
||
│ 完整流程对比 │
|
||
└─────────────────────────────────────────────────────────────────────────┘
|
||
|
||
┌──────────────────┬──────────────────┬──────────────────────────────┐
|
||
│ 方式 │ 难度 │ 适用场景 │
|
||
├──────────────────┼──────────────────┼──────────────────────────────┤
|
||
│ HBuilderX 云打包 │ ⭐ 简单 │ 快速测试、日常开发、发布 │
|
||
│ 离线打包 │ ⭐⭐⭐⭐⭐ 复杂 │ 需要自定义原生功能、企业项目 │
|
||
└──────────────────┴──────────────────┴──────────────────────────────┘
|
||
|
||
|
||
┌─────────────────────────────────────────────────────────────────────────┐
|
||
│ 常见误区 │
|
||
└─────────────────────────────────────────────────────────────────────────┘
|
||
|
||
❌ 错误认知：
|
||
"npm run build:app 应该生成 APK"
|
||
|
||
✅ 正确理解：
|
||
"npm run build:app 只编译代码，不生成 APK"
|
||
"需要额外的打包步骤才能生成安装包"
|
||
|
||
|
||
┌─────────────────────────────────────────────────────────────────────────┐
|
||
│ 推荐流程（最快） │
|
||
└─────────────────────────────────────────────────────────────────────────┘
|
||
|
||
第 1 步：下载 HBuilderX (5 分钟)
|
||
│
|
||
▼
|
||
第 2 步：打开项目 (1 分钟)
|
||
│
|
||
▼
|
||
第 3 步：云端打包 (1 分钟操作)
|
||
│
|
||
▼
|
||
第 4 步：等待打包 (5-10 分钟)
|
||
│
|
||
▼
|
||
第 5 步：下载 APK (1 分钟)
|
||
│
|
||
▼
|
||
✅ 完成！获得可安装的 APK
|
||
|
||
总耗时：约 15-20 分钟
|
||
|
||
|
||
┌─────────────────────────────────────────────────────────────────────────┐
|
||
│ 其他平台打包 │
|
||
└─────────────────────────────────────────────────────────────────────────┘
|
||
|
||
H5 平台（Web）：
|
||
npm run build:h5
|
||
│
|
||
▼
|
||
unpackage/dist/build/h5/
|
||
│
|
||
▼
|
||
上传到 Web 服务器
|
||
│
|
||
▼
|
||
✅ 完成！可通过浏览器访问
|
||
|
||
|
||
微信小程序：
|
||
npm run build:mp-weixin
|
||
│
|
||
▼
|
||
unpackage/dist/build/mp-weixin/
|
||
│
|
||
▼
|
||
微信开发者工具导入
|
||
│
|
||
▼
|
||
上传代码
|
||
│
|
||
▼
|
||
✅ 完成！提交审核
|
||
|
||
|
||
╔═══════════════════════════════════════════════════════════════════════╗
|
||
║ 总结 ║
|
||
╚═══════════════════════════════════════════════════════════════════════╝
|
||
|
||
1. npm run build:app 只是第一步（编译）
|
||
2. 必须使用 HBuilderX 或离线 SDK 才能生成 APK
|
||
3. 推荐使用 HBuilderX 云打包，最简单快速
|
||
4. 这是 uni-app 的正常工作方式，不是 bug
|
||
|
||
╔═══════════════════════════════════════════════════════════════════════╗
|
||
║ 需要帮助？ ║
|
||
╚═══════════════════════════════════════════════════════════════════════╝
|
||
|
||
📖 查看详细文档：
|
||
- README_BUILD.md（推荐）
|
||
- BUILD_GUIDE.md
|
||
|
||
🚀 运行辅助脚本：
|
||
npm run build:app-help
|
||
|
||
🌐 访问官方文档：
|
||
https://uniapp.dcloud.net.cn/
|
||
|