跳到主要内容
版本:v2

将 Capacitor 与 Ionic 一起使用

将 Capacitor 安装到 Ionic 项目中

Capacitor 可以轻松地直接安装到任何 Ionic 项目(1.0-4.x+)中。

新建 Ionic 项目

ionic start myApp tabs --capacitor
cd myApp

现有 Ionic 项目

cd myApp
ionic integrations enable capacitor

使用应用信息初始化 Capacitor

注意:npx 是 npm 5 或更高版本中提供的一个新实用程序,它执行本地二进制文件/脚本以避免全局安装。

npx cap init [appName] [appId]

其中 appName 是您的应用名称,appId 是您应用的域标识符(例如:com.example.app)。

注意:使用原生 IDE 在初始配置后更改这些属性。

构建您的 Ionic 应用

在添加任何原生平台之前,您必须至少构建一次 Ionic 项目。

ionic build

这将创建 www 文件夹,Capacitor 已在 capacitor.config.json自动配置 将其用作 webDir

添加平台

npx cap add ios
npx cap add android

项目根目录下会创建 androidios 文件夹。这些是完全独立的原生项目制品,应被视为您的 Ionic 应用的一部分(即,将它们检入版本控制,在它们自己的 IDE 中编辑等)。

打开 IDE 以构建、运行和部署

npx cap open ios
npx cap open android

原生 iOS 和 Android 项目将在其标准 IDE(分别为 Xcode 和 Android Studio)中打开。使用这些 IDE 来运行和部署您的应用。

使用 Capacitor 同步您的应用

每次执行构建(例如 ionic build)更改了您的 web 目录(默认:www)后,您需要将这些更改复制到您的原生项目中:

npx cap copy

使用 Cordova 和 Ionic Native 插件

Capacitor 支持 Cordova 和 Ionic Native 插件。请参阅 使用 Cordova 插件 指南了解更多信息。

想立即开始在 Ionic 应用中使用 Capacitor?查看此指南