Capacitor 新一代殽杂使用“神器”
《开源精选》是我们分享Github、Gitee等开源社区中优质项目标栏目，包含武艺、学习、实用与种种幽默的内容。本期保举的Capacitor 允许您使用单一代码库和跨平台 API 在 iOS、Android、Web 等当地运转 Web 使用步骤。
Capacitor 提供了一组一律的、以 Web 为中央的 API，使使用步骤可以尽约莫接近 Web 标准，同时在支持它们的平台上拜候丰厚的本机装备功效。假如它在欣赏器中事情，它约莫在使用 Capacitor 时在挪动使用步骤中事情。使用实用于 iOS 上的 Swift、Android 上的 Java 和实用于 Web 的 JavaScript 的插件 API，可以直接添加本机功效。
Ionic扩展
Ionic Visual Studio Code 扩展可协助您实行开发 Capacitor 使用步骤稀有的种种功效，一切这些功效都无需分开 VS Code 窗口。
集成Capacitor
集成 Capacitor 后，您如今可以使用“在 Web 上运转”、“在 Android 上运转”和“在 iOS 上运转”选项在 Web、Android 和 iOS 上运转您的使用步骤。
扩展
- 将 Capacitor 的依托项添加到您的项目中
- 标志已知的、不兼容的 Cordova 包
- 删除不必要的 Cordova 插件
- 用等效的 Capacitor 插件交换某些 Cordova 插件
设置原生项目
Ionic Visual Studio Code扩展还可以协助您轻松设置与项目干系的 Android 和 iOS 变量。
您可以轻松变动使用步骤的体现称呼、版本号和内里版本号；以及项目中的其他可设置值。
使用 Ionic 扩展，您可以在 Web、Android 和 iOS（即将推出）上运转 VS Code 调试器。
使用 Debug 文件夹下的选项，您可以为 Web 和本机代码设置断点。Web 调试将启动一个单独的可调试的 Web 欣赏器实例（默以为 Google Chrome）。您也可以从设置选项中选择 Microsoft Edge。在 Android 上，webview 实例将列在“Debug”文件夹中，并且可以以与 Web 相似的办法举行调试。
Capacitor事情流程
使用 Capacitor 与使用传统的 Web 使用步骤略有不同。要制造您的网络原生Capacitor使用步骤，您必要实行以下步调。
构建网络
一旦您准备幸而挪动装备上测试您的 Web 使用步骤，您将必要构建您的 Web 使用步骤以举行分发。假如您使用的是Create React App或Vite之类的东西，则该下令将是npm build；而像Angular如此的东西使用下令ng build. 无论您的下令是什么，您都必要构建用于分发的 Web 代码，以便将其与 Capacitor 一同使用。
将 Web 代码同步到你的 Capacitor
一旦 Web 代码构建好用于分发，必要将你的 Web 代码推送到 Web 原生 Capacitor 使用步骤。为此，你可以使用Capacitor CLI来“同步”你的 Web 代码并安装/更新所需的本机依托项。
要同步你的项目，请运转：
npx cap sync
运转npx cap sync会将你以前构建的 Web 包复制到你的 Android 和 iOS 项目，并更新Capacitor 使用的本机依托项。
Capacitor 的 JavaScript API
Capacitor 有几个 JavaScript 函数可用于确保使用步骤在具有相反代码库的多个平台上告捷运转。
全局Capacitor
你可以使用以下代码导入全局 Capacitor 目标：
import { Capacitor } from '@capacitor/core';
该Capacitor目标具有多个功效，可协助你处理在开发 Capacitor 使用步骤时约莫碰到的最稀有的 WebView 到 Native 成绩。
convertFileSrc: (filePath: string) => string
Capacitor使用步骤在与装备文件不同的协议上提供办事。为了制止这些协议之间的困难，必需重写装备文件的途径。比如，在 Android 上，
file:///path/to/device/file必需像
http://localhost/_capacitor_file_/path/to/device/file在 Web 视图中使用之前一样重写。
// file:///path/to/device/photo.jpg
const rawPhotoUri = await Filesystem.writeFile({
path: "myFile.jpg",
data: base64Data,
directory: FilesystemDirectory.Data
});
// http://localhost/path/to/device/photo.jpg
const fixedPhotoUri = Capacitor.convertFileSrc(rawPhotoUri.uri)
getPlatform: () => 'web' | 'ios' | 'android'
获取使用步骤如今运转的平台的称呼。这将前往、 或的值"web"，具体取决于运利用用步骤的装备。"ios""android"。
if (Capacitor.getPlatform() === 'ios') {
console.log('iOS!');
} else if (Capacitor.getPlatform() === 'android') {
console.log('Android!');
} else {
console.log('Web!');
}
isNativePlatform: () => boolean;
反省如今运转的平台对否是原生的。此函数前往一个值，true分析使用步骤是作为当地安装的 Capacitor 使用步骤运转，照旧false经过欣赏器提供办事或作为 PWA 安装。
if (Capacitor.isNativePlatform()) {
console.log("I'm a native app!");
} else {
console.log("I'm a PWA or Web app!");
}
isPluginAvailable: (name: string) => boolean;
反省如今运转的平台上对否有可用的插件。插件称呼用于插件注册表，这意味着它也实用于自界说插件。
const isAvailable = Capacitor.isPluginAvailable('Camera');
if (!isAvailable) {
// Have the user upload a file instead
} else {
// Otherwise, make the call:
const image = await Camera.getPhoto({
resultType: CameraResultType.Uri,
});
}
—END—
开源协议：MIT license
开源地点：
https://github.com/ionic-team/capacitor
