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/
|
|||
|
|
|