把前端项目变成真正的手机应用,Capacitor 是一条能走通的路。它由 Ionic 团队维护,不限制你的技术栈,React、Vue、Angular 甚至原生 HTML/CSS/JS 项目都能接进去。
为什么选 Capacitor
- 不挑框架:没有侵入性,现有项目直接集成。
- 现代 WebView:iOS 用 WKWebView,Android 用 Chromium WebView,复杂页面的滑动帧率比早期 Cordova 方案稳得多。
- 原生 API 统一到 JS:相机、文件系统、推送通知等能力通过
@capacitor/core暴露,不用自己写 Swift 或 Kotlin。 - 可以自己扩展:内置 API 不够用?用 Swift(iOS)或 Kotlin(Android)写自定义插件,JS 桥接就能调。
- 全平台覆盖:一套代码能出 iOS IPA、Android APK/AAB,还支持 Electron 桌面应用和 PWA。
底层是怎么跑的
Capacitor 分三层:
- Web 层:你的前端项目跑在原生应用的 WebView 里。
- 桥接层:
@capacitor/core负责 JS 和原生之间的通信。 - 原生层:生成的 Xcode 工程(iOS)和 Android Studio 工程(Android),里面装着 WebView 容器以及插件代码。
整体流程很直:构建 Web 项目 → 同步到原生工程 → 用原生 IDE 编译打包 → 发布到应用商店。
把 Web 项目打成 App 的具体操作
先保证 Node.js(14+)装好了。iOS 打包只能在 macOS 上做,Android 则 Windows / macOS 都行。
安装和初始化
在项目根目录:
npm install @capacitor/cli @capacitor/core
然后初始化,把占位符换成自己的:
npx cap init [应用名称] [应用 ID]
比如:
npx cap init WeatherApp com.acme.weather
这一步会生成 capacitor.config.ts,里面的 webDir 默认指向 dist,记得跟实际构建输出目录对上。
添加平台
以 Android 为例:
npx cap add android
iOS 同理:
npx cap add ios
项目根目录下会多出 android 和 ios 两个文件夹。
构建并同步
先正常 build 你的 Web 项目:
npm run build
然后把资源同步到原生工程:
npx cap

