Capacitor 实战指南：将 Web 项目打包为跨平台应用

添加平台

根据目标平台添加对应的原生工程：

# 添加 Android 平台
npx cap add android

# 添加 iOS 平台
npx cap add ios

添加完成后，项目根目录会出现 android 和 ios 文件夹，即完整的原生工程。

同步与调试

修改 Web 代码后，需重新构建并同步到原生工程：

npm run build
npx cap sync

随后打开原生 IDE 进行调试：

npx cap open android # Android Studio
npx cap open ios     # Xcode

在 IDE 中点击运行按钮，即可在模拟器或真机上查看效果。CI/CD 管道中也建议添加 npx cap sync 确保每次构建后平台项目保持更新。

调用原生 API（相机示例）

下面演示如何在 Web 项目中调用相机功能。首先安装相机插件：

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>

权限与兼容性配置

iOS 权限配置 需在 Info.plist 中添加相机使用说明：

<key>NSCameraUsageDescription</key>
<string>需要相机权限来拍摄照片</string>

Android 权限配置 需在 AndroidManifest.xml 中添加相机权限声明。

结果类型选项 CameraResultType 提供三种返回格式：

• Uri: 返回图片路径（适用于显示）
• Base64: 返回 base64 字符串（适用于上传）
• DataUrl: 带前缀的 base64 字符串

生成安装包

调试完成后，生成正式安装包：

• Android：在 Android Studio 中，通过'Build → Generate Signed Bundle / APK'生成 AAB（Google Play 推荐）或 APK。
• iOS：在 Xcode 中，选择'Product → Archive'，然后通过 App Store Connect 上传，或导出 IPA 用于测试。

选型对比

结论：如果是新项目，优先选 Capacitor；如果是旧的 Cordova 项目，也可以通过 Capacitor 兼容迁移。

注意事项

• 高性能游戏或复杂动画场景，建议用原生或 Flutter，WebView 仍有性能瓶颈。
• 不同平台的 WebView 存在细微差异，需做兼容性测试。
• 原生权限配置是必做步骤，否则 API 无法正常调用。
• 发布应用商店时，需遵循各平台的规范（如图标尺寸、隐私政策等）。