跳转至正文
@capgo/capacitor-auto 设备 API 开源

自动 Capacitor 插件

将 Capacitor 应用与 CarPlay 和 Android Auto 模板界面桥接,实现双向车机通信

安装

bun add @capgo/capacitor-auto bunx cap sync
npm、pnpm 或 yarn
  • npm install @capgo/capacitor-auto
  • pnpm add @capgo/capacitor-auto
  • yarn add @capgo/capacitor-auto

指南

如何在 Capacitor 中使用 Auto

使用 @capgo/capacitor-auto

@capgo/capacitor-auto 将 Capacitor 应用连接到已获批准的 CarPlay 和 Android Auto 模板界面。你的应用向车机屏幕发送一个小型列表模板,车机屏幕再把选中的操作回传给 JavaScript。

它专为驾驶安全、受策略控制的工作流而设计,不会把你的 WebView 镜像到车机中。

安装并同步

npm install @capgo/capacitor-auto
npx cap sync

向车辆发送模板

import { Auto } from '@capgo/capacitor-auto';

await Auto.setRootTemplate({
  title: 'Garage',
  sections: [
    {
      header: 'Doors',
      items: [
        {
          id: 'open-main-door',
          title: 'Open main door',
          subtitle: 'Tap to send the action to the phone app',
          payload: { doorId: 'main' },
        },
      ],
    },
  ],
});

监听驾驶员操作

await Auto.addListener('carAction', async (event) => {
  if (event.id === 'open-main-door') {
    await openGarageDoor(event.payload?.doorId);
  }
});

监控连接状态

const status = await Auto.isAvailable();
console.log(status.available, status.connected, status.platform);

await Auto.addListener('connectionChanged', (event) => {
  console.log('Car connected:', event.connected, event.platform);
});

iOS 配置要求

CarPlay 要求您的 App 类别具备 Apple 批准的 entitlement。请按照 iOS 设置文档中的说明 添加 CarPlay 场景配置,并确保车载 UI 符合 Apple 批准的模板。

Android 配置要求

Android Auto 使用 AndroidX Car App Library。该插件包含 CarAppService,声明了 template 能力,并默认使用 IOT 类别。请查看 Android 设置文档 如果你的应用需要另一个 Android Auto 类别。

设计指南

车载界面只用于简短、可预测的操作:

  • 状态行
  • 一键命令
  • 驾驶安全的确认操作
  • 从手机应用进行简单的状态交接

将复杂流程保留在手机 UI 中,并使用 carAction 事件作为原生 Intent 触发器。

继续阅读:使用 @capgo/capacitor-auto

如果你正在使用 使用 @capgo/capacitor-auto 来规划原生媒体和界面行为,并将其与 @capgo/capacitor-auto 有关 @capgo/capacitor-auto 的实现细节, 快速入门 有关“入门指南”中的实现细节, 使用 @capgo/capacitor-live-activities 用于使用 @capgo/capacitor-live-activities 时的原生能力, @capgo/capacitor-live-activities 关于 @capgo/capacitor-live-activities 中的实现细节,以及 使用 @capgo/capacitor-video-player 有关“使用 @capgo/capacitor-video-player.”中的原生能力

常见问题

Auto plugin 常见问题

如何在 Capacitor 应用中安装 Auto plugin?

运行 "bun add @capgo/capacitor-auto" (或 "npm install @capgo/capacitor-auto"),然后运行 "bunx cap sync" 使 iOS 和 Android 项目同步 native code。最后在你的应用 code 中从 "@capgo/capacitor-auto" 导入即可。

@capgo/capacitor-auto 是否支持 React、Vue 和 Angular?

支持。Auto 是一个 Capacitor 包,因此它适用于任何在 Capacitor 中运行的 Web 框架,包括 Ionic、React、Vue、Angular、Svelte 以及原生 JavaScript。

@capgo/capacitor-auto 支持哪个版本的 Capacitor?

Capgo 插件遵循 Capacitor 的主版本号:请使用与 Capacitor 主版本号一致的插件主版本(例如插件 v8 对应 Capacitor 8)。GitHub README 中的兼容性表列出了仍在维护的版本。

@capgo/capacitor-auto 是免费开源的吗?

是的。code 的源码已在 GitHub 公开,地址为 https://github.com/Cap-go/capacitor-auto/,且可以通过 npm 免费安装。欢迎提交 Bug 报告和 Pull Request。

我可以在不经过 App Store 审核的情况下,更新使用了 Auto 的 code 吗?

安装或升级插件会改动原生 code,因此需要重新做一次商店构建。之后,调用该插件的 JavaScript、HTML 和 CSS 改动就能通过 Capgo live updates 立即发布。

无需等待应用审核,即可自动发布 Auto 变更

只要插件已包含在你的商店版本中,Capgo live updates 就能在几分钟内把 JavaScript、HTML 和 CSS 的改动推送给用户。

开始使用 Capgo