要把 H5 项目打包成 APP，一般有 3 条主流方案：UniApp / Cordova / Capacitor。下面给你一个最清晰、最实用的对比和完整打包流程，你直接照着做就行（阿杰我会用你最常用的 UniApp + HBuilderX 方案先讲）。

✅ 方案一：UniApp（最简单、最稳定）——强烈推荐

UniApp 可以把你的 H5 网页封装成 App，支持 iOS、Android，一键打包最省事。

步骤 1：准备环境

  1. 下载 HBuilderX（必须是 App 开发版）：
    https://www.dcloud.io/hbuilderx.html
  2. 安装 Android SDK（HBuilderX 会自动引导）

步骤 2：创建 uni-app + 放入你的 H5 文件

如果你已有 H5 项目（纯 HTML/CSS/JS），你需要：

/uni-app 项目根目录
  /uni_modules
  /pages
  /static
  ...
  /hybrid/html   ← 把你的 H5 放这里

然后在页面用 <web-view> 加载：

&lt;template>
  &lt;view class="container">
    &lt;web-view src="/hybrid/html/index.html">&lt;/web-view>
  &lt;/view>
&lt;/template>

步骤 3：运行调试

在 HBuilderX 顶部菜单：

运行 → 运行到手机或模拟器 → 选择 Android/iOS

步骤 4：打包 App

菜单：

发行 → 原生 App-云打包

填写应用名、包名、图标即可。

等待完成后：

  • Android 会得到 .apk
  • iOS 会得到 .ipa（需要苹果开发者账号）

优点

  • 不需要改太多代码
  • 支持 WebView + 原生插件
  • 最省事、最适合快速上线

✅ 方案二：Apache Cordova（传统方案）

如果你想保留原生插件生态，可以用 Cordova。

步骤

npm install -g cordova
cordova create myapp
cd myapp
cordova platform add android

将你的 H5 放进：

www/

然后打包：

cordova build android

✅ 方案三：Ionic + Capacitor（现代方案）

Capacitor 更现代，更接近原生，适合 React / Vue / TS 的 H5 项目。

步骤

npm i @capacitor/core @capacitor/cli
npx cap init
npx cap add android
npx cap copy
npx cap open android  ← 打开 Android Studio

然后用 Android Studio 打包 APK。

🧩 应该选择哪种？

技术推荐指数适用情况
UniApp⭐⭐⭐⭐⭐最简单、快速、稳定，H5 → App 推荐首选
Capacitor⭐⭐⭐⭐使用 Vue/React 构建的 H5 项目
Cordova⭐⭐⭐老项目兼容需要