Capacitor简介 #

应用类型
    ├── 原生应用
    │   ├── iOS: Swift/Objective-C
    │   └── Android: Kotlin/Java
    │
    ├── 混合应用
    │   ├── Capacitor ← 我们在这里
    │   └── Cordova
    │
    └── Web应用
        ├── PWA
        └── SPA

┌─────────────────────────────────────────────────────┐
│                   Web Application                    │
│         (React / Vue / Angular / Vanilla)           │
├─────────────────────────────────────────────────────┤
│                   Capacitor Runtime                  │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐  │
│  │   Plugins   │  │   Bridge    │  │   Config    │  │
│  └─────────────┘  └─────────────┘  └─────────────┘  │
├─────────────────────────────────────────────────────┤
│              Platform Native Layer                   │
│  ┌─────────────┐  ┌─────────────┐  ┌─────────────┐  │
│  │    iOS      │  │  Android    │  │     Web     │  │
│  │  (WKWebView)│  │(WebView)    │  │ (Browser)   │  │
│  └─────────────┘  └─────────────┘  └─────────────┘  │
└─────────────────────────────────────────────────────┘

// JavaScript调用原生代码
import { Camera, CameraResultType } from '@capacitor/camera';

const takePhoto = async () => {
    const image = await Camera.getPicture({
        quality: 90,
        allowEditing: true,
        resultType: CameraResultType.Uri
    });
    return image;
};

// 插件定义
import { registerPlugin } from '@capacitor/core';

const MyPlugin = registerPlugin('MyPlugin');

// 使用插件
await MyPlugin.doSomething();

// capacitor.config.json
{
    "appId": "com.example.app",
    "appName": "My App",
    "webDir": "dist",
    "server": {
        "iosScheme": "https"
    }
}

前端层
    ├── React / Vue / Angular
    ├── TypeScript
    └── CSS / Tailwind / SCSS

构建层
    ├── Vite / Webpack
    ├── npm / yarn / pnpm
    └── ESLint / Prettier

Capacitor层
    ├── @capacitor/core
    ├── @capacitor/cli
    └── @capacitor/*-plugins

原生层
    ├── iOS: Swift / Objective-C
    ├── Android: Kotlin / Java
    └── Web: Service Worker

1. 创建项目
   └── npm init @capacitor/app

2. 开发Web应用
   └── 使用任意前端框架

3. 添加平台
   └── npx cap add ios/android

4. 同步资源
   └── npx cap sync

5. 原生开发
   └── 在Xcode/Android Studio中开发

6. 测试调试
   └── 模拟器/真机测试

7. 构建发布
   └── App Store / Google Play

# 开发模式 - 热重载
npm run dev

# 构建生产版本
npm run build

# 同步到原生项目
npx cap sync

# 在模拟器运行
npx cap run ios
npx cap run android