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) => stringCapacitor应用程序在与设备文件不同的协议上提供服务。为了避免这些协议之间的困难，必须重写设备文件的路径。例如，在 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
