跳到主要内容
版本:v5

Capacitor 工作流程

使用 Capacitor 开发与传统网页应用略有不同。要将你的网页应用构建为原生移动应用,需要遵循以下步骤。

构建网页代码

当准备在移动设备上测试网页应用时,需要构建用于分发的网页应用包。如果你使用的是 Create React AppVite 这类工具,构建命令通常是 npm run build;而像 Angular 这样的工具则使用 ng build 命令。无论使用什么命令,都需要先构建用于分发的网页代码,才能与 Capacitor 配合使用。

将网页代码同步到 Capacitor 项目中

网页代码构建完成后,需要将其推送到 Capacitor 原生应用中。可以使用 Capacitor CLI 来"同步"网页代码,并安装/更新所需的原生依赖项。

运行以下命令同步项目:

npx cap sync

执行 npx cap sync复制已构建的网页包到 Android 和 iOS 项目中,同时更新 Capacitor 使用的原生依赖项。

你可以在 Capacitor CLI 参考文档中了解更多关于 sync 命令的信息,或查阅相关文档

信息

如果遇到"找不到网页资源目录"的错误,请更新 Capacitor 配置文件中的 webDir 配置。

测试 Capacitor 应用

将网页包同步到原生项目后,就可以在移动设备上测试应用了。测试方式有多种,最简单的方法是使用 Capacitor CLI 内置命令。

要在 iOS 设备上运行调试版本,可执行:

npx cap run ios

类似地,在 Android 设备上运行调试版本,可执行:

npx cap run android

完成应用迭代和测试后,就可以编译最终的分发包分发给其他移动设备了。

信息

你也可以通过 Xcode 在 iOS 上运行应用,或通过 Android Studio 在 Android 上运行应用。两种方式都适用于开发环境。建议都尝试一下,看看哪种更适合你!

打开原生集成开发环境

如果希望更精细地控制原生项目,可以使用 Capacitor CLI 快速打开原生集成开发环境。

在 Xcode 中打开 iOS Capacitor 的 .xcworkspace 项目,可运行:

npx cap open ios

类似地,要在 Android Studio 中打开 Android Capacitor 项目,可运行:

npx cap open android

打开原生项目可以让你完全掌控应用的原生运行时环境。你可以创建插件添加自定义原生代码,或编译用于发布的应用包

编译原生二进制文件

Capacitor 没有 buildcompile 命令,将来也不会有。执行 sync 后,建议打开目标平台的集成开发环境:iOS 使用 Xcode,Android 使用 Android Studio,来编译原生应用。

要在终端或 CI 环境中编译应用,可以直接使用 gradlexcodebuild。我们也建议使用 Fastlane 这类工具或像 Appflow 这样的云构建工具来自动化处理这些流程。虽然每个应用情况不同,但我们提供了 Capacitor 项目的一般发布流程示例。请阅读我们的 iOSAndroid 发布指南,了解更多关于部署到 Apple App Store 或 Google Play Store 的信息。

更新 Capacitor

更新 Capacitor 运行时非常简单,只需运行 npm install 即可。

npm i @capacitor/core @capacitor/ios @capacitor/android
npm i -D @capacitor/cli

更新 Capacitor 时,需要确保核心库、Android 库和 iOS 库的版本一致。Capacitor 核心库、Android 库和 iOS 库的发布都是同步进行的,这意味着只要同时安装所有库,就不会有问题!

信息

你可以订阅 Capacitor 代码仓库来获取新版本通知。在仓库首页顶部,点击 Watch -> Releases only 即可。