ARTICLE DETAIL

资讯详情

深耕编程入门与网站建设的一线实战洞察。

不装 Android Studio,也能把 Vue / React 一键打成 APK:开源工具 lw.Web2Android

不装 Android Studio,也能把 Vue / React 一键打成 APK:开源工具 lw.Web2Android 目录lw.Web2Android一、lw.Web2Android 是什么二、为什么还要做一个 Web → APK 工具三、lw.Web2Android 的思路不太一样四、实际使用有多简单生成 Android APK五、它不是简单地把网页塞进 file://六、企业内网项目也考虑到了七、还有一个经常被忽略的问题APK 签名Package Name → Signing Identity八、生成的不仅仅是一个 APK九、和 Capacitor、Cordova、PWABuilder 有什么区别你的项目到底需要什么十、什么时候应该选 Capacitor推荐 Capacitor。十一、什么时候适合 PWABuilder / BubblewrapPWAPWABuilder / Bubblewrap 非常合适。十二、什么时候适合 lw.Web2Android给我一个 APK。十三、它尤其适合这些项目1. 企业内部系统2. Android 工业平板3. 展示类 App4. 前端 Demo 快速交付十四、为什么没有做 Native Bridge暂时不想做。Small. Native. Focused.十五、真正想解决的问题只有一个Web → APK Packer十六、项目目前仍然很年轻十七、写在最后lw.Web2AndroidWeb → APK下载不装 Android Studio也能把 Vue / React 一键打成 APK开源工具 lw.Web2Android做 Web 开发的人大概都遇到过这样的需求一个已经写好的 HTML、Vue、React 或 Vite 项目客户突然说“能不能顺便给我打一个 Android APK”如果只是把现有网页放到 Android 里运行这件事听起来似乎很简单。但真正开始做你很快就会发现事情变成了Android Studio、SDK、JDK、Gradle、Manifest、签名证书、zipalign、apksigner……原本只是想把网页变成 APK。最后却不得不搭建一整套 Android 开发环境。于是我做了一个小工具lw.Web2Android一个专门解决Web → Android APK这件事的轻量级开源工具。它的目标很简单不做 Android Studio 的替代品不做跨平台大框架也不试图把 Web 变成“原生 Android”。只把“一个已经完成的 Web 项目可靠地打成 APK”这件事做好。一、lw.Web2Android 是什么lw.Web2Android 可以将普通 HTML / CSS / JavaScript 项目VueReactVite 构建后的静态目录其他前端框架生成的静态 Web已经部署好的在线网址直接打包成一个可以安装的 Android APK。目前提供 Windows 10/11 x64 原生 GUI 和 CLI。最重要的是最终用户不需要安装 Android Studio不需要自己安装 Gradle也不需要配置完整 Android SDK 和完整 JDK。首次使用时在 GUI 中初始化一次最小工具链即可。程序会在用户接受 Android SDK License 后从官方源下载锁定版本的必要组件以后直接复用。(GitHub)截至 2026 年 8 月 18 日当前公开版本为v0.2.3。GitHub Releases 已提供 Windows x64 发行包。(GitHub)二、为什么还要做一个 Web → APK 工具其实类似的技术并不少。我们已经有Android Studio、Cordova、Capacitor、PWABuilder、Bubblewrap……这些项目都很成熟。问题在于它们解决的问题并不完全等于“我只想把一个网页打成 APK”。比如 Capacitor本身定位就是一个 Web 与原生平台融合的运行时。它可以让 JavaScript 调用 Java/Kotlin 原生能力还有丰富的插件体系。这非常强大。但相应地它的 Android App 也是一个标准 Android 工程。Capacitor 官方文档明确说明Android 应用通过 Android Studio 配置和管理。通常需要npm install capacitor/android npx cap add android npx cap open android随后进入 Android Studio 继续管理 Android 项目。(Capacitor)如果你的目标是摄像头、蓝牙、定位、推送、原生插件、深度系统集成……Capacitor 非常合适。但如果你的需求只是“这是我的 Vue dist帮我生成一个 APK。”那么整套 Android Project 对一些用户来说就显得有些重了。三、lw.Web2Android 的思路不太一样lw.Web2Android 没有在每次打包时重新创建一个 Android Gradle 工程然后Java/Kotlin ↓ Gradle ↓ Android Gradle Plugin ↓ DEX ↓ APK而是提前准备一个非常小的 Android Runtime。Runtime 编译完成后直接保存为预编译的classes.dex真正打包用户项目的时候流水线变成Manifest res ↓ AAPT2 ↓ resources.apk ↓ Web Assets 配置文件 预编译 classes.dex ↓ APK Assembler ↓ zipalign ↓ apksigner ↓ Signed APK也就是说每次生成 APK不需要重新编译 Android Java Runtime。Web 项目本身也不会交给 Gradle。这是 lw.Web2Android 和很多传统 Hybrid App 构建方案在设计思想上的一个明显区别。(GitHub)四、实际使用有多简单以一个 Vite 项目为例。首先npm run build得到dist/然后打开lw.Web2Android.GUI.exe选择本地网页然后填写应用名称 Package Name Version Name Version Code再选择dist/点击生成 Android APK即可。GUI 目前还提供横屏 / 竖屏 / 自动方向全屏本地网页在线网址HTTP 内网支持输出目录后台构建完整流程就是Web 项目 ↓ 前端 build ↓ 选择 dist ↓ 填写应用信息 ↓ 生成 APK项目 README 中给出的 GUI 流程也是 5 个主要步骤。(GitHub)五、它不是简单地把网页塞进 file://这一点是我在设计时比较在意的。有些最简单的 WebView 套壳程序会直接file:///android_asset/index.html加载网页。lw.Web2Android 没有采用这种方式。本地页面通过 AndroidXWebViewAssetLoader加载页面拥有类似https://appassets.androidplatform.net这样的 HTTPS 风格 Origin。因此本地 Web 仍然尽量按照正常浏览器的OriginCORSCookieHTTP / HTTPS规则运行。同时lw.Web2Android 当前不提供addJavascriptInterfaceNative Bridge来绕过浏览器安全边界。(GitHub)这也是项目目前很重要的原则Web 就尽量按照 Web 的规则运行。而不是不断给网页增加几十个私有 Native API。六、企业内网项目也考虑到了还有一种很常见的场景前端是 VueVue / React后台则可能是Spring Boot ASP.NET Django FastAPI Node.js服务器就在公司局域网。例如http://192.168.x.x:9000这种场景在工控、MES、仓储、设备管理、内部 OA 中其实非常普遍。lw.Web2Android 提供允许 HTTP仅建议可信内网模式。既可以直接打开一个内网 URL也可以把 Vue 的dist放进 APK再访问内网 API。当然在正式互联网环境中仍然建议优先使用 HTTPS项目文档也明确提示HTTP 流量可能被同网络设备监听或篡改。(GitHub)七、还有一个经常被忽略的问题APK 签名很多“网页转 APK”Demo 第一次生成 APK 很简单。真正麻烦的是第二次。Android 应用升级要求Package Name 相同 签名身份一致如果第一次 APK 使用证书 Acom.example.app Certificate A第二次却变成com.example.app Certificate B那么新的 APK 就无法正常覆盖安装旧版本。所以 lw.Web2Android 没有每次随机生成一个新的证书。而是按照Package Name → Signing Identity保存签名身份。例如com.example.demo第一次生成 APK 时建立签名身份。以后1.0.0 1.1.0 1.2.0 2.0.0只要 Package Name 不变就继续复用同一个证书。这样才是一个真正可以长期维护的 Android App。当前实现使用 RSA 3072 签名身份在 Windows 本地通过 DPAPI 保护私钥同时支持导出密码保护的 PFX/P12 做离线备份。(GitHub)这件事情看起来不像“一键打包”那么吸引眼球但如果真的拿它做长期项目我认为签名身份管理比再增加十个按钮更重要。八、生成的不仅仅是一个 APK一次成功构建后除了MyApp-1.0.0-android.apk还会生成APK.sha256 *.release.json *-RELEASE.md分别用于文件完整性校验机器可读发行信息人类可读发行记录项目自身的 Windows Release 同样提供 SHA256SUMS。这意味着这个工具的目标并不是“能生成 APK 就行。”而是希望逐渐把Build → Sign → Verify → Release这条链路做好。(GitHub)九、和 Capacitor、Cordova、PWABuilder 有什么区别这里需要说明lw.Web2Android 并不是要替代它们。这些项目解决的是不同问题。简单做一个对比方案更适合什么Android Studio / Android 工程Native 能力本地静态 Web在线网站Android Studio 原生开发完整原生 App是★★★★★可实现可实现CapacitorWeb 原生混合应用是★★★★★★★★★★★★★★Cordova成熟 Hybrid App需要 Android 工具链★★★★★★★★★★★★★PWABuilder / BubblewrapPWA 发布到 Android / Google PlayTWA 工具链以 Web 能力为主主要面向 PWA★★★★★lw.Web2Android已有 Web 快速生成 APK不要求用户维护 Android 工程刻意保持轻量★★★★★★★★★★Capacitor 官方说明其 Android App 通过 Android Studio 管理并支持 JavaScript 与 Java/Kotlin 原生代码通信。(Capacitor)Cordova 当前 Android 文档则列出了 Android SDK、JDK、Gradle 等构建要求其 Android 项目使用 Gradle 构建。(Apache Cordova)Bubblewrap 采用 Trusted Web Activity 技术把 PWA 运行在支持 TWA 的浏览器环境中网站所有权通常通过 Digital Asset Links 验证。如果验证失败会退回 Custom Tab。(Chrome for Developers)PWABuilder 的 Android 打包底层也使用 Bubblewrap/TWA并且更偏向“把一个已有 PWA 发布到 Android 应用商店”的场景。(PWA Builder Blog)因此它们之间并不存在简单的“谁更好”。真正应该问的是你的项目到底需要什么十、什么时候应该选 Capacitor如果你的应用需要蓝牙 GPS 摄像头深度控制 推送通知 原生文件系统 Native SDK 支付 SDK 大量 Android API那么推荐 Capacitor。因为这些本来就是它的优势。十一、什么时候适合 PWABuilder / Bubblewrap如果你已经有一个完善的PWA并且网站已经部署在线配置 Web App Manifest配置 Service Worker拥有自己的域名希望通过 TWA 发布到 Google Play那么PWABuilder / Bubblewrap 非常合适。TWA 本身就是为了让 PWA 在 Android 中获得接近独立应用的体验而设计的。(Chrome for Developers)十二、什么时候适合 lw.Web2Android如果你的需求是我已经有一个 Vue 项目。或者我已经有一个 React 项目。或者我有一个内部管理系统。甚至只是我有一个 index.html。然后你希望给我一个 APK。而且我不想为了这件事安装 Android Studio。那么这正是 lw.Web2Android 想解决的场景。十三、它尤其适合这些项目我认为下面几类需求会比较适合1. 企业内部系统例如MES WMS 设备管理 生产看板 仓库管理 内部 OA 数据采集本来就是 Web 系统只是希望员工手机或 Android 平板以 App 形式启动。2. Android 工业平板很多工业项目最终运行在10 寸 Android 平板 工业 PDA 手持终端 触摸屏前端其实完全可以使用 Vue / React 开发。如果不需要大量 Android 原生能力就没有必要把整个团队拖进 Android 开发体系。3. 展示类 App例如产品展示 电子手册 离线说明书 展厅终端 教育课件 交互 Demo静态资源直接打入 APK 即可。4. 前端 Demo 快速交付有时一个 Web Demo 已经开发完成。客户只说一句“给我一个 APK我装到手机看看。”这可能就是 lw.Web2Android 最典型的使用场景。十四、为什么没有做 Native Bridge有人可能会问为什么不加 JS 调 Android为什么不加几十个插件为什么不支持蓝牙、定位、扫码、NFC、推送不是不能做。而是暂时不想做。因为一旦开始增加这些能力Camera Bridge Bluetooth Bridge GPS Bridge File Bridge Notification Bridge Native Plugin System项目很快就会变成另一个 Hybrid App Framework。而 Capacitor、Cordova 已经在这个方向积累了多年。再做一套意义并不大。所以 lw.Web2Android 目前更愿意坚持Small. Native. Focused.小。原生。专注。十五、真正想解决的问题只有一个Web 技术今天已经足够强大。很多管理系统、工具软件、内部平台甚至工业软件其 UI 本来就是HTML CSS JavaScript Vue React问题并不一定是“怎么重新写一个 Android App”而可能只是“怎么把我已经写好的东西以 Android App 的形式交付”lw.Web2Android 就是在尝试回答这个问题。它不是新的前端框架。不是新的 Android 框架。也不是 Android Studio。甚至严格来说它都不想成为一个“大工具”。它只是一个Web → APK Packer选择网页。填写应用信息。点击生成。得到 APK。事情到这里结束。十六、项目目前仍然很年轻需要强调的是lw.Web2Android 目前仍处在0.x 阶段。当前版本是 v0.2.3。(GitHub)现在已经完成的核心能力包括本地 Web → APK在线 URL → APKWindows 原生 GUICLI最小 Android 工具链初始化预编译 Android RuntimeAPK 资源组装zipalignapksignerPackage Name 签名身份复用PFX/P12 密钥备份SHA256Release Metadata构建日志Runtime 日志React/Vite 真实项目 CI 验证项目 CI 还会实际构建真实 React/Vite 项目并继续验证 APK 的签名、对齐、内部资源、Runtime 入口和签名身份复用而不仅仅检查 C 是否能够编译。(GitHub)后续还有很多细节值得继续完善。但我的目标不会是功能越来越多。而是功能保持克制但现有功能越来越可靠。十七、写在最后我越来越觉得软件并不一定功能越多越好。有时候真正好用的工具反而应该有明确边界。lw.Web2Android 的边界就是你负责把 Web 做好。剩下的 APK 打包、Android Runtime、资源组装、签名和发行让工具处理。如果未来它最终能够做到下载 ↓ 解压 ↓ 选择 Web ↓ 点击生成 ↓ 得到 APK同时保持稳定 轻量 可重复 可升级 可验证那我认为它就已经完成自己的使命了。如果你正好有一个HTML / Vue / React / Vite 项目又正好需要Android APK可以试试lw.Web2AndroidGitHub 项目https://github.com/lxw112190/lw.Web2Android欢迎 Star、Issue也欢迎实际项目测试和反馈。如果你发现某个真实 Web 项目打包后运行异常也非常欢迎提交最小复现。比起继续增加几十个功能我现在更希望把Web → APK这一件小事认真做好。下载完整发布包下载
返回列表