Capacitor CLI参考
Capacitor命令行接口(CLI)工具是用来开发Capacitor应用的。点击此处查看安装细节。
Add
给你的项目添加原生平台项目
npx cap add <platform>
输入:
platform
(必须):android
,ios
Cap
查看所有可用的CLI命令和选项。
npx cap [-V] [-h]
选项:
-V, --version
(可选):输出版本号
-h, --help
(可选):输出实用信息。也可以与单独的命令一起使用。
Copy
将web应用程序构建和电容器配置文件复制到原生平台项目中。每次在中对web应用进行更改或更改Capacitor.config.json
中的配置值时运行此程序。
npx cap copy [platform]
输入:
platform
(可选): android
, ios
输出示例:
√ Copying web assets from www to android\app\src\main\assets\public in 2.64s
√ Copying web assets from www to ios/App/public in 450ms
√ Copying native bridge in 7.32ms
√ Copying capacitor.config.json in 3.22ms
√ copy in 2.74s
√ copy in 1.10ms
Create
如果你想重新开始并计划单独添加一个UI/前端框架,那么用一个库存项目结构创建一个新的Capacitor项目。
npx @capacitor/cli create [options] [directory] [name] [id]
输入:
directory
(可选): 创建新项目的文件夹,例如c:\src\myapp
name
(可选): 应用名称id
(可选): 应用包id (java包的格式, 不能有破折号),例如com.example.app
可选项:
--npm-client <npmClient>
: 用于依赖项安装的npm客户端
Doctor
检查每个原生项目的常见错误,并将可用的最新Capacitor依赖项与当前安装的依赖项进行比较。
npx cap doctor [platform]
输入:
platform
(可选): android
, ios
输出示例:
Latest Dependencies:
@capacitor/cli: 2.2.0
@capacitor/core: 2.2.0
@capacitor/android: 2.2.0
@capacitor/ios: 2.2.0
Installed Dependencies:
@capacitor/ios not installed
@capacitor/cli 2.1.0
@capacitor/core 2.1.0
@capacitor/android 2.1.0
Init
在现有的web应用程序中初始化新的Capacitor项目。所有提供的值(App name、App Id、WebDir等)都会写入capacitor.config.json
.
npx cap init [options] [appName] [appId]
输入:
appName
(可选): 应用名称appId
(可选): 应用包id (java包的格式, 不能有破折号),例如com.example.app
可选项:
--web-dir <value>
: 你项目的web构建资源文件目录 (默认是: www
)
--npm-client <npmClient>
: 用于依赖项安装的npm客户端
List
列出所有Cordova和Capacitor的插件。
npx cap ls [platform]
输入:
platform
(可选):android
,ios
输出示例:
Found 1 Capacitor plugin for android:
capacitor-mapbox (0.0.1)
Found 2 Cordova plugins for android:
cordova-plugin-camera
cordova-plugin-splashscreen
Open
在指定的原生IDE(iOS的Xcode、Android的Android Studio)中打开原生项目工作区。打开后,使用原生ide在设备上构建、模拟和运行应用程序。
npx cap open <platform>
输入:
platform(必须):android
,ios
插件生成
创建一个新的自定义电容器插件。这将启动一个向导,提示您输入有关新插件的信息。更多关于开发插件的信息。
# Capacitor CLI already installed in project
npx cap plugin:generate
# Capacitor CLI not installed
npx @capacitor/cli plugin:generate
Serve
在浏览器中打开Capacitor渐进式Web应用程序,使用的是capacitor.config.json
中指定的webDir
目录。
npx cap serve
Sync
相当于同时运行Copy和Update命令。
npx cap sync [options] [platform]
输入:
platform
(可选): android
, ios
可选项:
--deployment
: Podfile.lock文件不会被删除,pod安装将使用 --deployment
选项。
输出示例:
√ Copying web assets from www to android\app\src\main\assets\public in 3.37s
√ Copying native bridge in 5.80ms
√ Copying capacitor.config.json in 2.59ms
√ copy in 3.43s
√ Updating Android plugins in 11.48ms
Found 1 Capacitor plugin for android:
capacitor-mapbox (0.0.1)
√ update android in 105.91ms
√ copy in 409.80μp
√ update web in 6.80μp
Sync finished in 3.563s
Update
更新package.json
中引用的原生插件和依赖。
npx cap update
输入:
platform
(可选): android
, ios
--deployment
: Podfile.lock文件不会被删除,pod安装将使用 --deployment
选项。
配置文件
Capacitor配置文件是用来为Capacitor工具配置高级选项用的。
下面是capacitor.config.json
中所有的可选配置项例子:
{
// The package name for Android and the bundle identifier for iOS.
"appId": "com.company.appname",
// Your app's name.
"appName": "Capacitor Kitchen Sink",
// Sets the directory of your built web assets. This is the directory that will be
// used to run your app in a native environment.
"webDir": "www",
// The JavaScript package manager to use, either npm or yarn.
"npmClient": "npm",
// Whether to use capacitor.js as a bundle that is copied to your web code,
// or require it to be bundled/imported through a typical
// typescript/babel/webpack/rollup workflow.
//
// The starter project sets this to true, but if you're using Ionic or another framework,
// you'll probably want this to be false (default is false)
"bundledWebRuntime": false,
// On Windows, we aren't able to automatically open Android Studio
// without knowing the full path. The default is set to the default
// Android Studio install path, but you may change it manually.
"windowsAndroidStudioPath": "C:\Program Files\Android\Android Studio\bin\studio64.exe",
// A Boolean value that determines whether to hide native logs for iOS and Android. The preference is ignored if it's also declared inside ios or android
// Default is false
"hideLogs": true,
// Server object contains port and url configurations
"server": {
// You can make the app to load an external url (i.e. to live reload)
"url": "http://192.168.1.33:8100",
// You can configure the local hostname, but it's recommended to keep localhost
// as it allows to run web APIs that require a secure context such as
// navigator.geolocation and MediaDevices.getUserMedia.
"hostname": "app",
// It is possible to configure the local scheme that is used. This can be useful
// when migrating from cordova-plugin-ionic-webview, where the default scheme on iOS is ionic.
"iosScheme": "ionic",
"androidScheme": "http",
// Normally all external URLs are opened in the browser. By setting this option, you tell
// Capacitor to open URLs belonging to these hosts inside its WebView.
"allowNavigation": [
"example.org",
"*.example.org",
"192.0.2.1"
]
},
// User agent of Capacitor WebView for iOS and Android, unless also declared inside ios or android objects
"overrideUserAgent": "my custom user agent",
// String to append to the original user agent of Capacitor WebView for iOS and Android,
// unless also declared inside ios or android objects. Only if overrideUserAgent is not set.
"appendUserAgent": "string to append",
// Background color of Capacitor WebView for both iOS and Android unless also declared inside ios or android objects
"backgroundColor": "#ffffffff",
"android": {
// User agent of Capacitor WebView for Android
"overrideUserAgent": "my custom user agent for Android",
// String to append to the original user agent of Capacitor WebView for Android.
"appendUserAgent": "string to append for Android",
// Background color of Capacitor WebView for Android only
"backgroundColor": "#ffffffff",
// On Android, if you are loading the app from a remote/testing server from https
// protocol, you need to enable mixed content mode to allow the WebView to load
// files from different schemes such as capacitor-content:// or capacitor-file://
"allowMixedContent": true,
// Android's default keyboard doesn't allow proper JS key capture
// You can use a simpler keyboard enabling this preference
// Be aware that this keyboard has some problems and limitations
"captureInput": true,
// Enables debugging of web contents (HTML / CSS / JavaScript) loaded into
// any WebViews of this application.
// This flag can be enabled in order to facilitate debugging of web layouts
// and JavaScript code running inside WebViews.
"webContentsDebuggingEnabled": true,
// A Boolean value that determines whether to hide native Android logs or not
// Default is false
"hideLogs": true
},
"ios": {
// User agent of Capacitor WebView for iOS
"overrideUserAgent": "my custom user agent for iOS",
// String to append to the original user agent of Capacitor WebView for iOS.
"appendUserAgent": "string to append for iOS",
// Background color of Capacitor WebView for iOS only
"backgroundColor": "#ffffffff",
// Configure the WebView's UIScrollView's content inset behavior
// Default is never
// Possible values are "automatic", "scrollableAxes", "never" and "always"
// https://developer.apple.com/documentation/uikit/uiscrollview/contentinsetadjustmentbehavior
"contentInset": "always",
// Configure the Swift version to be used for Cordova plugins.
// Default is 5.0
"cordovaSwiftVersion": "4.2",
// Minimum iOS version supported by the project.
// Default is 11.0
"minVersion": "11.3",
// Some Cordova plugins require to configure the linker flags
"cordovaLinkerFlags": ["-ObjC"],
// A Boolean value that determines whether pressing on a link displays a preview of
// the destination for the link.
"allowsLinkPreview": false,
// A Boolean value that determines whether to hide native iOS logs or not
// Default is false
"hideLogs": true
}
}
文章评论