Capacitor 是 Ionic 团队开发的现代跨平台打包工具，允许 Web 开发者无需原生基础即可构建 iOS 和 Android 应用。其核心优势包括零框架侵入、使用现代 WebView 提升性能、提供统一原生 API 封装以及支持自定义插件。工作流程涵盖安装依赖、初始化项目、添加平台、同步代码及调用原生功能。相比 Cordova，Capacitor 拥有更完整的原生工程管理和更好的开发体验。适用于快速构建跨平台应用、低成本扩展已有 Web 项目及资源有限的创业团队。需注意高性能场景限制及平台权限配置规范。
不同于某些强绑定框架的工具，Capacitor 对前端技术栈完全无要求。不管是用 React、Vue 还是原生 HTML/CSS/JS 写的项目，都能直接接入打包。
iOS 端采用 WKWebView，Android 端使用 Chromium WebView。相比早期 Cordova 依赖的老旧 WebView，启动速度、渲染效率提升明显。
相机、文件系统、推送通知等常用功能，通过统一的 JS API 暴露，无需编写原生代码。
内置 API 满足不了需求时，支持用 Swift（iOS）或 Kotlin（Android）编写自定义插件，再通过 JS 桥接调用。
一套代码既能打包成 iOS 的 IPA、Android 的 APK/AAB，还能集成生成桌面应用，甚至支持 PWA。
@capacitor/core 包实现 JS 与原生的通信。打包流程：构建 Web 项目 → 同步到原生工程 → 原生 IDE 编译打包 → 发布应用商店。
前提已安装 Node.js（建议 14+），iOS 打包需要 macOS 系统，Android 则 Windows 和 macOS 都可以。
进入 Web 项目根目录，执行以下命令安装 CLI 和核心包：
npm install @capacitor/cli @capacitor/core
初始化 Capacitor 项目
使用 npx 执行初始化命令：
npx cap init [应用名称] [应用ID]
示例完整命令：
npx cap init WeatherApp com.acme.weather
项目配置生成后，会生成 capacitor.config.ts 文件，包含基础配置：
import { CapacitorConfig } from '@capacitor/cli'; const config: CapacitorConfig = { appId: 'com.example.myapp', appName: '我的 Capacitor 应用', webDir: 'dist', bundledWebRuntime: false };
平台添加流程
初始化后需添加目标平台（以 Android 为例）：
npx cap add android
iOS 平台添加命令：
npx cap add ios
配置文件注意事项：
webDir：默认指向 dist 目录，应匹配实际构建输出目录plugins：需要在此处声明使用的 Capacitor 插件server：开发服务器配置项Capacitor 需要基于构建后的 Web 资源打包。
构建 Web 项目
npm run build
添加 Android 平台支持
npx cap add android
添加 iOS 平台支持
npx cap add ios
平台特定注意事项
Android 开发环境要求：确保已安装 Android Studio 和 JDK。构建后的 Web 资源需要同步到 Android 项目：
npx cap sync android
iOS 开发环境要求：需要 Xcode 和 macOS 系统。同步 Web 资源到 iOS 项目：
npx cap sync ios
持续集成建议：在 CI/CD 管道中添加平台同步命令：
npx cap sync
修改 Web 代码后，重新构建并同步到原生工程：
npm run build
npx cap sync
然后打开原生 IDE 进行调试：
npx cap open android
npx cap open ios
首先安装相机插件：
npm install @capacitor/camera
npx cap sync
然后在 Vue 组件中编写代码：
<template>
<div>
<button @click="takePhoto">拍照</button>
<img v-if="imageUrl" :src="imageUrl" alt="拍摄的照片">
</div>
</template>
<script setup>
import { ref } from 'vue';
import { Camera, CameraResultType } from '@capacitor/camera';
const imageUrl = ref('');
const takePhoto = async () => {
try {
const image = await Camera.getPhoto({
quality: 90,
allowEditing: true,
resultType: CameraResultType.Uri
});
imageUrl.value = image.webPath;
} catch (error) {
console.log('拍照失败：', error);
}
};
</script>
相机权限配置
在 capacitor.config.ts 中需要添加相机权限：
{ "plugins": { "Camera": { "useLimitedLibrary": false } } }
结果类型选项
平台兼容性说明
iOS 需要在 Xcode 中配置相机权限，在 Info.plist 中添加：
<key>NSCameraUsageDescription</key>
<string>需要相机权限来拍摄照片</string>
Android 则在 AndroidManifest.xml 中添加相机权限声明。
| 特性 | Cordova | Capacitor |
|---|---|---|
| WebView | 老旧 WebView，性能一般 | 现代 WebView（WKWebView/Chromium），性能优异 |
| 原生项目管理 | 动态生成，不建议手动修改 | 完整原生工程，支持手动优化 |
| 插件生态 | 丰富但部分插件过时 | 较新但增长快，支持 Cordova 插件兼容 |
| 开发体验 | 配置繁琐，依赖 hooks | 配置简单，支持热重载 |
结论：如果是新项目，优先选 Capacitor；如果是旧的 Cordova 项目，也可以通过 Capacitor 兼容迁移。
Capacitor 的出现，让'Web 一次开发，全平台部署'成为现实。它既保留了 Web 开发的高效性，又通过优秀的原生集成能力弥补了 Web 应用的短板。适合前端开发者拓展技术边界，或需要快速交付跨平台应用的场景。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online