跳到主要内容
版本:v7

Capacitor Web API

Capacitor提供了一系列JavaScript工具函数,帮助开发者使用同一套代码在多个平台上成功运行应用。使用时只需导入Capacitor并调用所需的工具函数:

Capacitor对象

Capacitor对象包含多个实用工具函数。虽然可以通过window.Capacitor访问,但现代JavaScript应用推荐使用导入方式:

import { Capacitor } from '@capacitor/core';

convertFileSrc(...)

convertFileSrc: (filePath: string) => string;

将设备文件路径转换为Web视图友好的路径。

由于Capacitor应用与设备文件使用不同的协议提供服务,为避免协议冲突,需要重写设备文件路径。例如在Android平台,file:///path/to/device/file需要被重写为http://localhost/_capacitor_file_/path/to/device/file才能在Web视图中使用。

// 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;

获取当前运行平台的名称:webiosandroid

if (Capacitor.getPlatform() === 'ios') {
// iOS平台专属逻辑
}

isNativePlatform()

isNativePlatform: () => boolean;

检查当前运行平台是否为原生平台(iosandroid)。

if (Capacitor.isNativePlatform()) {
// 原生平台专属逻辑
}

isPluginAvailable(...)

isPluginAvailable: (name: string) => boolean;

检查指定插件在当前平台是否可用。插件名称需与插件注册表中的一致,因此也适用于自定义插件。

const isAvailable = Capacitor.isPluginAvailable('Camera');

if (!isAvailable) {
// 插件不可用时改用文件上传方案
} else {
// 插件可用时调用相机功能
const image = await Camera.getPhoto({
resultType: CameraResultType.Uri,
});
}