1.操作前准备和说明

（1）安装APP调试IDE——Android Studio 安装与配置完全指南_android studio配置-CSDN博客  用于真机或模拟机调试APP，这里推荐真机调试。

（2）调试真机需作准备：开启开发者模式、打开USB调试和USB安装

（3）准备一个已完成的react项目，且能正常运行，这里我让cursor用react框架写了一个极简的web前端E:\cursor\cursor-demo-app，且能正常web运行。

1. 在项目中进行打包和构建

（1） 进入项目目录

（2）安装 Capacitor

在项目根目录下执行：

npm install @capacitor/core @capacitor/cli     #用于构建跨平台原生应用

（3）初始化 Capacitor

npx cap init cursorDemoApp com.example.cursordemoapp

cursorDemoApp 是 App 名称，可以自定义

com.example.cursordemoapp 是包名，建议用反向域名格式

（4）构建 React 项目

npm run build

这会生成 build/ 目录，里面是静态网页资源

1. 添加 Android 平台

      npm install @capacitor/android   #安装 Android 平台依赖

npx cap add android   #这会在项目下生成 android/ 文件夹

（6）同步前端资源到原生项目

注：这部分可以关联web项目和Android Studio中的工程目录，当web项目更改时，执行重构指令后可以把更改同步到Android Studio中

npx cap sync android  #每次 build 后都要执行

（7）用 Android Studio 打开原生项目

手动用 Android Studio 打开 E:\cursor\cursor-demo-app\android 文件夹，打开后会自动安装依赖，这里要打开梯子。

后续联调步骤总结：

构建前端：npm run build

同步资源：npx cap sync android

重新用 Android Studio 打开原生项目

3.真机运行

（1）在Android Studio中完成配置

勾选Google USB driver，点击应用自动安装，记住安装的位置 ，我的安装位置为E:\Android\SDK\extras\google\usb_driver。

1. 用USB将手机连接至电脑，在手机上点击允许传输文件，接下来打开电脑的设备管理器：

识别到手机，右键

选择更新驱动程序，浏览我的电脑，选择刚才的文件路径：E:\Android\SDK\extras\google\usb_driver。安装即可

（3）这时在Android studio中即可选择手机

（4）点击run app，等待编译、安装和自动启动 App。

正常启动的话手机会弹出如下窗口：

安装后即可打开：查看正常