指南
如何在 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.”中的原生能力