Capacitor Web API
Capacitor 提供了几个 JavaScript 实用工具,有助于确保应用在多个平台上使用相同的代码库成功运行。要使用它们,导入 Capacitor 然后调用所需的实用函数:
Capacitor 对象
Capacitor 对象是多个实用函数的容器。它可以通过 window.Capacitor 访问,但对于现代 JavaScript 应用,推荐的方式是导入它:
import { Capacitor } from '@capacitor/core';
convertFileSrc(...)
convertFileSrc: (filePath: string) => string;
将设备文件路径转换为 Web View 友好的路径。
Capacitor 应用使用的协议与设备文件不同。为避免这些协议之间的困难,必须重写设备文件的路径。例如,在 Android 上,file:///path/to/device/file 必须重写为 http://localhost/_capacitor_file_/path/to/device/file,然后才能在 Web View 中使用。
// file:///path/to/device/photo.jpg
const savedPhotoFile = await Filesystem.writeFile({
path: "myFile.jpg",
data: base64Data,
directory: FilesystemDirectory.Data
});
// http://localhost/path/to/device/photo.jpg
const savedPhoto = Capacitor.convertFileSrc(savedPhotoFile.uri),
document.getElementById("savedPhoto").src = savedPhoto;
<img id="savedPhoto" />
getPlatform()
getPlatform: () => string;
获取应用当前运行平台的名称:web、ios、android。
if (Capacitor.getPlatform() === 'ios') {
// 执行某些操作
}
isNativePlatform()
isNativePlatform: () => boolean;
检查当前运行的平台是否为本机平台(ios、android)。
if (Capacitor.isNativePlatform()) {
// 执行某些操作
}
isPluginAvailable(...)
isPluginAvailable: (name: string) => boolean;
检查插件在当前运行的平台上是否可用。插件名称用于插件注册表,这意味着它也适用于自定义插件。
const isAvailable = Capacitor.isPluginAvailable('Camera');
if (!isAvailable) {
// 让用户上传文件代替
} else {
// 否则,进行调用:
const image = await Camera.getPhoto({
resultType: CameraResultType.Uri,
});
}