闲社服务运行正常AI智能体自动化平台
客户端下载帮助中心服务商入驻
免费注册
技能集市 > AI智能 > capacitor-expert
c

电容器专家

技能标识：capacitor-expert

A comprehensive starting point for AI agents to work with Capacitor. Covers core concepts, CLI, app creation, plugins, framework integration, best practices, storage, security, testing, troubleshooting, upgrading, and Capawesome Cloud (live updates, native builds, app store publishing). Pair with the other Capacitor skills in this collection for deeper topic-specific guidance.

作者：admin | 来源记录：ClawHub
下载
登记来源
ClawHub
版本
V 1.0.0
检测标记
后台标记通过
免费
免费获取
1
收藏
来源与检测标记为平台登记信息，并不代表已展示可复核的检测报告。使用前请核对版本、依赖和所需权限，建议先在隔离环境中运行。
概述
安装方式
版本历史

电容器专家

Capacitor 专家

使用 Capacitor 构建跨平台应用的全面参考指南。涵盖架构、CLI、插件、框架集成、最佳实践以及 Capawesome Cloud。

核心概念

Capacitor 是一个跨平台原生运行时，用于构建可在 iOS、Android 和 Web 上原生运行的 Web 应用。Web 应用在原生 WebView 中运行，Capacitor 通过插件提供通往原生 API 的桥梁。

架构

一个 Capacitor 应用包含三个层次：

  1. 1. Web 层 -- 在原生 WebView（iOS 上为 WKWebView，Android 上为 Android System WebView）中运行的 HTML/CSS/JS 应用。
  2. 原生桥接层 -- 序列化 JS 插件调用，将其路由到原生代码，并以 Promise 形式返回结果。
  3. 原生层 -- 实现原生功能的 Swift/ObjC（iOS）和 Kotlin/Java（Android）代码。

通过桥接层传递的数据必须是 JSON 可序列化的。使用路径而非 base64 传递文件。

项目结构

my-app/
android/ # 原生 Android 项目（提交到版本控制系统）
ios/ # 原生 iOS 项目（提交到版本控制系统）
App/
App/ # iOS 应用源文件
App.xcodeproj/
src/ # Web 应用源代码
dist/ 或 www/ 或 build/ # 构建后的 Web 资源
capacitor.config.ts # Capacitor 配置
package.json

android/ 和 ios/ 目录是完整的原生项目——它们被提交到版本控制，并且可以直接修改。

Capacitor 配置

capacitor.config.ts（推荐）或 capacitor.config.json 控制应用行为：

typescript
import type { CapacitorConfig } from @capacitor/cli;

const config: CapacitorConfig = {
appId: com.example.app,
appName: My App,
webDir: dist,
server: {
// androidScheme: https, // Cap 6+ 中的默认值
},
};

export default config;

详情请参阅应用配置。

创建新应用

快速开始

bash

1. 创建一个 Web 应用（使用 Vite 的 React 示例）


npm create vite@latest my-app -- --template react-ts
cd my-app && npm install

2. 安装 Capacitor

npm install @capacitor/core npm install -D @capacitor/cli

3. 初始化 Capacitor

npx cap init My App com.example.myapp --web-dir dist

4. 构建 Web 资源

npm run build

5. 添加平台

npm install @capacitor/android @capacitor/ios npx cap add android npx cap add ios

6. 同步并运行

npx cap sync npx cap run android npx cap run ios

各框架的 Web 资源目录：

  • - Angular：dist/<项目名>/browser（使用 application builder 的 Angular 17+）
  • React（Vite）：dist
  • Vue（Vite）：dist
  • Vanilla：www

有关完整的引导式创建流程，请参阅 capacitor-app-creation。

Capacitor CLI

所有命令：npx cap 。最重要的命令：

命令用途
npx cap init <name> <id>在项目中初始化 Capacitor
npx cap add <platform>
添加 Android 或 iOS 平台 |
| npx cap sync | 复制 Web 资源 + 更新原生依赖（每次安装插件、更改配置或 Web 构建后运行） |
| npx cap copy | 仅复制 Web 资源（更快，不更新原生依赖） |
| npx cap run | 构建、同步并部署到设备/模拟器 |
| npx cap run -l --external | 使用热重载运行 |
| npx cap open | 在 IDE 中打开原生项目 |
| npx cap build | 构建原生项目 |
| npx cap doctor | 诊断配置问题 |
| npx cap ls | 列出已安装的插件 |
| npx cap migrate | 自动升级到更新的 Capacitor 版本 |

有关完整的 CLI 参考，请参阅 CLI 参考。

框架集成

Capacitor 可与任何 Web 框架配合使用。特定于框架的模式：

Angular

  • - 将 Capacitor 插件封装在 Angular 服务中，以实现依赖注入和可测试性。
  • 插件事件监听器在 NgZone 外部运行——始终在 NgZone.run() 中包装回调。
  • 在 ngOnInit 中注册监听器，在 ngOnDestroy 中移除。

详情请参阅 capacitor-angular。

React

  • - 创建封装 Capacitor 插件的自定义 Hook（useCamera、useNetwork）。
  • 使用 useEffect 进行监听器注册，并附带清理以防止内存泄漏。
  • React 18 严格模式会双重挂载——确保清理函数正常工作。

详情请参阅 capacitor-react。

Vue

  • - 使用 Vue 3 Composition API 创建可组合函数（useCamera、useNetwork）。
  • 在 onMounted 中注册监听器，在 onUnmounted 中移除。
  • Vue 的响应式系统会自动捕获 ref 的变化（无需 NgZone 等效项）。

详情请参阅 capacitor-vue。

插件

插件是 Capacitor 的扩展机制。每个插件都公开一个由原生实现支持的 JS API。

插件来源

  • - 官方（@capacitor/）-- 相机、文件系统、地理定位、偏好设置等。
  • Capawesome（@capawesome/、@capawesome-team/）-- SQLite、NFC、生物识别、实时更新等。
  • 社区（@capacitor-community/）-- AdMob、BLE、SQLite、Stripe 等。
  • Firebase（@capacitor-firebase/）-- 分析、身份验证、消息传递、Firestore 等。
  • MLKit（@capacitor-mlkit/）-- 条码扫描、人脸检测、翻译。
  • RevenueCat（@revenuecat/purchases-capacitor）-- 应用内购买。

安装插件

bash
npm install @capacitor/camera
npx cap sync

安装后，根据插件文档应用任何所需的平台配置（AndroidManifest.xml 中的权限、Info.plist 条目等）。

使用插件

typescript
import { Camera, CameraResultType } from @capacitor/camera;

const photo = await Camera.getPhoto({
quality: 90,
resultType: CameraResultType.Uri,
});

有关完整的插件索引（160+ 插件）和设置指南，请参阅 capacitor-plugins。

插件开发

创建具有原生 iOS（Swift）和 Android（Java/Kotlin）实现的自定义 Capacitor 插件：

  1. 1. 使用 npm init @capacitor/plugin@latest 搭建脚手架。
  2. 在 src/definitions.ts 中定义 TypeScript API。
  3. 在 src/web.ts 中实现 Web 层。
  4. 在 ios/Sources/ 中实现 iOS 插件。
  5. 在 android/src/main/java/ 中实现 Android 插件。
  6. 使用 npm run verify 进行验证。

关键规则：

  • - src/index.ts 中的 registerPlugin() 名称必须与 iOS 上的 jsName 和 Android 上的 @CapacitorPlugin(name = ...) 匹配。
  • iOS 方法需要 @objc，并且必须在 pluginMethods（CAPBridgedPlugin）中列出。
  • Android 方法需要 @PluginMethod() 注解，并且必须是 public。

有关完整详情，请参阅 [capacitor-plugin-development

标签

skill ai

通过对话安装

以下为平台配置的接入选项，并非逐项实测通过。能否安装取决于客户端支持、技能来源和运行环境：

OpenClaw WorkBuddy QClaw Kimi Claude

方式一：安装 SkillHub 和技能

帮我安装 SkillHub 和 capacitor-expert-1776031692 技能

方式二：设置 SkillHub 为优先技能安装源

设置 SkillHub 为我的优先技能安装源，然后帮我安装 capacitor-expert-1776031692 技能

通过命令行安装

skillhub install capacitor-expert-1776031692

下载

⬇ 下载 capacitor-expert v1.0.0（免费）

文件大小: 7.2 KB | 发布时间: 2026-4-13 09:38

v1.0.0 最新 2026-4-13 09:38
Initial release of capacitor-expert — a comprehensive reference for building cross-platform apps with Capacitor.

- Covers Capacitor core concepts, architecture, and project structure
- Includes detailed guidance on CLI commands and app creation
- Explains integration with Angular, React, and Vue frameworks
- Describes plugin usage, categories, and development best practices
- Provides links to deeper, topic-specific skills for advanced workflows

相关推荐

s

self-improvement

Captures learnings, errors, and corrections to enable continuous improvement. Use when: (1) A command or operation fails unexpectedly, (2) User corrects Claude ('No, that's wrong...', 'Actually...'), (3) User requests a capability that doesn't exist, (4) An external API or tool fails, (5) Claude realizes its knowledge is outdated or incorrect, (6) A better approach is discovered for a recurring task. Also review learnings before major tasks.

AI智能
s

self-improvement

Captures learnings, errors, and corrections to enable continuous improvement. Use when: (1) A command or operation fails unexpectedly, (2) User corrects Claude ('No, that's wrong...', 'Actually...'), (3) User requests a capability that doesn't exist, (4) An external API or tool fails, (5) Claude realizes its knowledge is outdated or incorrect, (6) A better approach is discovered for a recurring task. Also review learnings before major tasks.

AI智能
s

self-improvement

Captures learnings, errors, and corrections to enable continuous improvement. Use when: (1) A command or operation fails unexpectedly, (2) User corrects Claude ('No, that's wrong...', 'Actually...'), (3) User requests a capability that doesn't exist, (4) An external API or tool fails, (5) Claude realizes its knowledge is outdated or incorrect, (6) A better approach is discovered for a recurring task. Also review learnings before major tasks.

AI智能
s

self-improvement

Captures learnings, errors, and corrections to enable continuous improvement. Use when: (1) A command or operation fails unexpectedly, (2) User corrects Claude ('No, that's wrong...', 'Actually...'), (3) User requests a capability that doesn't exist, (4) An external API or tool fails, (5) Claude realizes its knowledge is outdated or incorrect, (6) A better approach is discovered for a recurring task. Also review learnings before major tasks.

AI智能
返回顶部