夜雨聆风学习资料网

ARTICLE · 1178216

网页变手机 App:我的新工具 ApkPacker,把 HTML 一键打包成安卓 APK

网页变手机 App:我的新工具 ApkPacker,把 HTML 一键打包成安卓 APK

网页变手机 App:我的新工具 ApkPacker,把 HTML 一键打包成安卓 APK

上一篇分享的 HtmlPacker 能把网页打包成 Windows exe,有读者问:能不能打包成手机 App?于是,ApkPacker 来了。

为什么做这个工具

HtmlPacker 发布之后,收到最多的反馈是同一个问题:

"能不能在安卓手机上跑?"

确实,很多网页应用的最终归宿不是电脑桌面,而是手机:给客户演示的 H5、内部使用的小工具、做私域用的小应用……但"网页 → 手机 App"这条路,对非安卓开发者来说门槛很高——装 Android Studio、配 JDK、学 Gradle、折腾签名,每一步都能劝退一批人。

ApkPacker 要解决的,就是把这条路压缩成"选文件 → 点按钮 → 拿到 APK"。

它是什么

ApkPacker 是一个 Windows 桌面程序(单文件绿色软件),可以把HTML 文件或整个前端项目文件夹一键打包成Android 安装包(APK)。

生成的 APK 可以直接安装到安卓手机,以全屏 WebView 运行你的 HTML 应用——对使用者来说,它和一个原生 App 没有区别:桌面有图标、点开全屏、返回键可后退。

所有打包均在本地完成,文件不上传任何服务器。

适用场景

  1. H5 交付:给客户的移动端演示、活动页,打包成 APK 直接安装,告别"请用浏览器打开这个链接"。
  2. 前端作品上手机:Vue / React 构建产物(dist/ 目录)打包成 App,作品集多一个移动端形态。
  3. 内部工具 App 化:公司内部使用的网页小工具,打包后发到工作群,同事装上即用。
  4. 快速验证:不想为一个临时需求学整套安卓开发时,1 分钟出包。

功能一览

  • 支持单个 HTML 文件或整个前端项目文件夹(默认入口 index.html,可自定义)
  • 自定义应用名称、包名(如 com.example.myapp,可自动生成)、版本号、PNG 图标
  • 首次打包自动下载并缓存 Android 构建环境(JDK 17 + Android SDK + Gradle,约 1GB),之后打包直接复用缓存,秒级出包
  • 打包日志实时滚动输出,出错原因一目了然
  • 产出 debug 签名 APK,无需任何签名配置即可安装使用
  • 卡密激活:打包出的 APK 首次启动需输入卡密在线校验,本机绑定设备指纹,失效自动回到激活页

使用步骤(3 步)

第 1 步:选择 HTML 输入

  • 选文件:单个 .html;
  • 选文件夹:整个前端项目(如 Vue / React 构建产物 dist/ 目录),默认入口为文件夹下的 index.html。

第 2 步:填写应用信息(均有默认值,可留空)

选项
说明
输出目录
APK 保存位置,默认为输入路径同级的 apk_out
应用名称
手机桌面上显示的名字
包名
应用唯一标识,默认自动生成
版本号
如 1.0、1.2.3
入口页
文件夹打包时的启动页面
图标 PNG
自定义应用图标(正方形 PNG)

第 3 步:开始打包

点击"开始打包",日志区实时显示构建过程。首次打包需联网下载约 1GB 的工具链(几分钟到十几分钟,视网速而定),下载一次永久复用;之后打包只需几十秒。完成后点"打开 APK 位置"即可拿到 APK。

安装到手机

  1. 把 APK 传到手机(微信文件传输、数据线、网盘均可);
  2. 点击安装,按提示允许"安装未知来源应用";
  3. 安装完成,像普通 App 一样使用。

📌 生成的 APK 使用 Android 调试证书签名,适合自用 / 内测分发。如需上架应用商店,可用 SDK 自带的 apksigner / keytool 换成自己的 keystore 重新签名。

HTML 项目注意事项(重要)

  • 路径用相对路径:资源引用请使用 ./xxx,绝对路径 /xxx 在手机端可能加载失败;
  • Vue / React 项目:构建时将 base 设为 './'(Vue Router 使用 hash 模式),再对 dist/ 目录打包;
  • 本地存储可用:localStorage / IndexedDB 均正常使用,数据保存在 App 内;
  • 不支持后端接口:纯静态运行,如需网络 API 请确保目标服务器允许跨域。

技术方案说明(写给开发者)

  • 打包原理:按模板生成一个极简 Android 工程——单个 Java MainActivity,零第三方依赖;HTML 资源放入 app/src/main/assets/www/,由 WebView 通过自定义域名 https://appassets.local/ 加载,避开 file:// 协议下 ES Module / fetch 的跨域限制,现代前端工程无需改造即可运行。
  • 工具链管理:JDK 17 + Android SDK + Gradle 在首次打包时自动下载,缓存在 %LOCALAPPDATA%\ApkPacker\toolchain\,断点续传,一次下载永久复用。
  • 产物形态:ApkPacker 自身是 PyInstaller onefile exe,单文件绿色软件;因为 APK 构建走 Gradle/Java 而非外部 Python,所以不需要像 HtmlPacker 那样内嵌 Python 环境,体积更轻。

常见问题(FAQ)

Q:需要安装吗?Mac 能用吗?Windows 无需安装,双击即用。Mac 目前不支持。

Q:我的 HTML 文件安全吗?纯本地打包,文件不会上传任何服务器。

Q:首次打包为什么这么久?首次需下载约 1GB 的 JDK / Android SDK / Gradle 工具链(缓存一次永久复用),之后打包只需几十秒。

Q:打包失败怎么办?看日志区红色错误行。常见原因:入口页不存在、包名格式非法(需 a.b.c 形式小写字母)、首次下载工具链时网络中断(重新点击开始打包会断点续传)。

Q:手机装上后页面空白?多半是资源用了绝对路径或前端路由非 hash 模式,按上文"注意事项"调整后重新打包即可。

Q:杀毒软件报毒?PyInstaller 打包的程序容易被误报,加入白名单即可。

写在最后

从 HtmlPacker 到 ApkPacker,目标是一致的:让"网页变应用"这件事,不需要先成为客户端开发者。

电脑端用 HtmlPacker 出 exe,手机端用 ApkPacker 出 APK——一套网页代码,两个平台覆盖。后续计划评估 iOS 侧的可行性(受苹果签名机制限制,实现成本较高,欢迎评论区聊聊你的需求场景)。


获取方式

  1. 关注本公众号,回复关键词 「ApkPacker」,获取下载链接;

使用中遇到任何问题,或有功能建议,也欢迎通过公众号后台留言反馈,我会逐一回复。

相关学习资料