Capacitor 实战：从 Web 应用到移动 App 的打包流程

在真机或模拟器上跑

用以下命令打开对应的 IDE：

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

在 IDE 里点「运行」就能在模拟器或真机上试了。

调用原生功能：以相机为例

先装插件：

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 里声明相机权限。

打包成安装文件

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

跟 Cordova 比一下

如果是新项目，直接上 Capacitor 吧。手里有旧 Cordova 项目的话也可以考虑迁过去。

什么时候适合用，该注意什么

适用场景很清楚：

• 想快速把 Web 应用变成跨平台移动 App
• 已经有 Web 项目，想低成本扩展移动端
• 团队缺原生开发的人，但前端底子不错

也有一些坑要心里有数：

• 高性能游戏或复杂动画，建议直接原生或 Flutter
• 不同平台 WebView 细节有差异，测试得做足
• 原生权限配置不能省，否则 API 可能静默失败
• 上架应用商店要遵守各平台的规范（图标尺寸、隐私政策等）

![imageUrl]