Capacitor 入门：Web 应用打包成原生 App
你有一个成型的网站，想要一个手机 App——不重写，怎么搞？Capacitor 就是这个问题的答案。
Capacitor 是什么
Capacitor（Ionic 团队出品）是一个 Web 应用 → 原生 App 的打包桥。它的做法直白：App 里放一个全屏的 WebView，加载你的线上网站，再桥接一层原生能力（状态栏、启动屏、推送等）。本质上你发布的还是那个网站，只是套了个能上应用商店、能点桌面图标的壳。
和两个常见方案对比：
| 方案 | 原理 | 特点 |
|---|---|---|
| React Native / Flutter | 用各自的技术栈重写 UI | 性能好，但要重写整个应用 |
| Cordova | 老一代 WebView 壳 | 思路同 Capacitor，架构已老 |
| Capacitor | 现代 WebView 壳 + 原生插件桥 | 零重写，原生能力按需接入 |
适用场景判断很简单：你的应用本质是「内容与交互」，重度依赖 Web 渲染（博客、资讯、工具站、管理后台），WebView 壳就是性价比之王；如果是游戏、重动画的社交 App，那还是原生或 RN/Flutter。
本站就是活的例子
本站（Clarity）的 Android 壳就是这么做的：clarity-app 里没有任何业务前端代码，只有一个 Capacitor 配置，指向线上站点：
{
"appId": "top.clxhuhhr.app",
"appName": "Clarity",
"webDir": "www",
"server": { "url": "https://你的站点地址" }
}
server.url 指向线上站，WebView 启动即加载——网站更新，App 立刻就是新的，不需要走应用市场发版。业务迭代在 Web 侧自由发布，壳层只在需要原生能力变化时才重新打包。
核心工作流
npm install @capacitor/core @capacitor/cli
npx cap init # 生成配置
npm install @capacitor/android
npx cap add android # 生成原生 Android 工程
npx cap sync # 同步配置与插件到原生工程
npx cap open android # 用 Android Studio 打开，正常打 APK/AAB
npx cap sync 是日常最常用的：改了配置或装了插件，sync 一下再打包。原生工程（android/ 目录）是真实存在的 Gradle 工程——签名、图标、权限、依赖，都在里面按 Android 的规矩配，Capacitor 只是把「WebView + 桥」预置好了。
原生能力：插件机制
纯 WebView 搞不定的事（状态栏颜色、启动屏、震动、推送），通过官方插件接：
npm install @capacitor/status-bar @capacitor/splash-screen
import { StatusBar, Style } from '@capacitor/status-bar';
import { SplashScreen } from '@capacitor/splash-screen';
// 深色主题下状态栏文字调亮
await StatusBar.setStyle({ style: Style.Dark });
// 首屏数据加载完再隐藏启动屏，避免白屏闪一下
await SplashScreen.hide({ fadeOutDuration: 300 });
插件 API 在 Web 端是标准的 TypeScript 接口，还做了平台降级——同样的代码跑在纯浏览器里会走 Web 实现（或安静地不做任何事），所以业务代码不用写 if (isNative) 的分支堆。
值得知道的三个细节
WebView 的性能天花板。现代 Android WebView 跑常规页面非常流畅，但复杂动画、长列表滚动和原生仍有肉眼可辨的差距。壳方案要配合 Web 侧自身的性能优化（虚拟滚动、骨架屏）一起做。
键盘、安全区、返回键。这三个是壳应用的经典适配点：软键盘顶起布局、刘海屏安全区、Android 物理返回键的路由拦截，Capacitor 都有对应配置或插件，但每一项都要真机验证，模拟器看不出来。
离线与加载体验。远程加载意味着弱网时打开慢，可以配启动屏 + 骨架屏兜底；如果要求离线可用，那要把 Web 资源打进 webDir 随包分发，而不是远程加载——两种模式 Capacitor 都支持，看产品取舍。
小结
Capacitor 的价值主张就一句：已有的 Web 资产，最低成本变成 App。它不解决「原生级性能」的问题，它解决「不想重写」的问题。对内容型站点来说，一个能上桌面、带启动屏、有状态栏适配的 App 壳，通常就是全部需求了。