Capacitor 跨平台打包工具实战指南

构建 Web 项目：

npm run build

同步 Web 资源到原生工程：

npx cap sync

步骤 4：调试运行

打开原生 IDE 进行调试：

# Android
npx cap open android
# iOS
npx cap open ios

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

步骤 5：调用原生 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 中添加相机权限声明。

步骤 6：生成安装包

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

四、Capacitor vs Cordova

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

五、适用场景与注意事项

适用场景

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

注意事项

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