Capacitor 跨平台打包实战：Web 应用构建原生 App

添加目标平台（以 Android 为例）：

npx cap add android

iOS 平台添加命令：

npx cap add ios

步骤 2：构建 Web 项目并添加平台

Capacitor 需要基于构建后的 Web 资源打包。

构建 Web 项目：

npm run build

同步 Web 资源：

npx cap sync android
npx cap sync ios

添加完成后，项目根目录会出现 android 和 ios 两个文件夹。

步骤 3：同步代码与运行调试

修改 Web 代码后，重新构建并同步：

npm run build
npx cap sync

打开原生 IDE 进行调试：

npx cap open android
npx cap open ios

在 IDE 中点击'运行'按钮，即可在模拟器或真机上测试。

步骤 4：调用原生 API（以相机为例）

安装相机插件：

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 中添加 NSCameraUsageDescription。
• Android 需在 AndroidManifest.xml 中添加相机权限声明。

步骤 5：生成安装包

• Android：在 Android Studio 中，通过'Build → Generate Signed Bundle / APK'生成 AAB 或 APK。
• iOS：在 Xcode 中，选择'Product → Archive'，导出 IPA 或上传至 App Store Connect。

四、Capacitor vs Cordova

结论：新项目优先选 Capacitor；旧 Cordova 项目可迁移。

五、适用场景与注意事项

适用场景

• Web 开发者快速构建跨平台应用
• 已有 Web 项目低成本扩展为移动应用
• 小团队或创业项目，缺乏原生开发资源

注意事项

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