记沉

React + Vite 前端项目如何混合开发构建APP

9/18/2025 Capacitor

专为 H5 与原生通信设计的混合开发框架，已经帮你封装好了安卓能力调用，只需几行 JavaScript 就能拍照、获取定位、读取通讯录等。

# ✅ 最佳推荐：Capacitor（由 Ionic 团队开发）

官网：https://capacitorjs.com (opens new window)

# 🔥 为什么推荐 Capacitor？

  • 专为 Web + 原生混合开发设计，完美适配你现有的 React + Vite 项目。
  • 开箱即用的原生 API：相机、GPS、通知、文件系统等，全部封装成 JS 接口。
  • 支持 TypeScript，类型提示清晰，开发体验极佳。
  • 跨平台：一套代码，同时生成安卓和 iOS 应用。
  • 可与 React/Vue/Angular 无缝集成。

# ✅ 使用 Capacitor 的 5 个步骤

# 1. 在你的 React + Vite 项目中安装 Capacitor

npm install @capacitor/core @capacitor/cli

# 2. 初始化 Capacitor

npx cap init

会提示你输入：

  • App 名称（如 MyApp）
  • App ID（如 com.example.myapp）
  • 网页入口（默认 dist 或 build）

# 3. 安装安卓平台支持

npm install @capacitor/android
npx cap add android

这会生成一个原生安卓项目：android/

# 4. 构建你的 React 项目并同步到安卓

# 先打包你的 Vite 项目
npm run build

# 将构建结果同步到安卓项目
npx cap copy

Capacitor 会自动把 dist/ 文件复制到安卓项目的 assets 中。

# 5. 打开安卓项目（可选）

npx cap open android

这会用 Android Studio 打开项目，你可以编译、运行、调试。

# ✅ 如何调用安卓原生能力？（示例）

Capacitor 提供了统一的 JS API，直接调用即可：

# 📸 拍照

import { Camera, CameraResultType } from '@capacitor/camera';

const takePicture = async () => {
  const image = await Camera.getPhoto({
    quality: 90,
    allowEditing: true,
    resultType: CameraResultType.Uri, // 或 base64
  });

  // image.webPath 是图片路径，可用于 <img> 显示
  console.log(image.webPath);
};

# 📍 获取定位

import { Geolocation } from '@capacitor/geolocation';

const getLocation = async () => {
  const position = await Geolocation.getCurrentPosition();
  console.log(position.coords.latitude, position.coords.longitude);
};

# 🔔 发送通知

import { LocalNotifications } from '@capacitor/local-notifications';

await LocalNotifications.requestPermissions();
await LocalNotifications.schedule({
  notifications: [
    {
      title: "提醒",
      body: "该喝水了！",
      id: 1,
      schedule: { at: new Date(Date.now() + 1000 * 5) },
    },
  ],
});

# 📱 其他能力

  • 文件系统（@capacitor/filesystem）
  • 电池状态（@capacitor/battery）
  • 网络状态（@capacitor/network）
  • 传感器（陀螺仪、加速度计）

# ✅ H5 与原生通信（双向）

# 1. H5 调用原生：直接调用 Capacitor API（如上所示）

# 2. 原生调用 H5（监听事件）

// 在 H5 中监听原生事件
import { App } from '@capacitor/app';

App.addListener('appUrlOpen', (data) => {
  console.log('外部链接打开:', data.url);
});

# 🆚 对比其他方案

方案 优点 缺点
Capacitor ✅ 专为 Web 设计，API 丰富，React 友好 需要学习简单配置
Cordova / PhoneGap 老牌框架，插件多 已过时，维护少
React Native + WebView 灵活，可混合开发 需手动封装原生功能
Flutter + WebView 性能好 需学 Dart，H5 通信复杂

💡 结论：Capacitor 是目前最适合你需求的方案。

# ✅ 总结：为什么选 Capacitor？

需求 Capacitor 是否满足
现有 React + Vite 项目 ✅ 直接集成
调用安卓相机、GPS、通知等 ✅ 开箱即用
无需写原生代码 ✅ JS/TS 直接调用
跨平台（安卓 + iOS） ✅ 支持
免费、开源、活跃维护 ✅ Ionic 团队维护

# 🚀 现在就可以开始

# 1. 进入你的 React + Vite 项目
cd your-vite-project

# 2. 安装 Capacitor
npm install @capacitor/core @capacitor/cli

# 3. 初始化
npx cap init

# 4. 添加安卓
npm install @capacitor/android
npx cap add android

# 5. 构建并同步
npm run build
npx cap copy

# 6. 运行
npx cap open android  # 用 Android Studio 打开并运行

# 7. 构建app
npx cap build android  # 需要本地JDK才能构建

几分钟内，你的 H5 页面就能变成一个能调用安卓能力的 App！ 🎉