使用 @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需要为您的应用程序类别获取苹果批准的许可。添加CarPlay场景配置，详见 iOS设置文档并将您的汽车UI保留在苹果批准的模板中。

Android要求

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

设计指南

在汽车表面上使用短、可预测的动作：

状态行
一键命令
驾驶员安全确认
从手机应用程序简单地传递状态

将复杂的流程保留在手机 UI 中并使用 carAction 事件作为本机意图触发器。

继续使用 @capgo/capacitor-auto

如果您正在使用 使用@capgo/capacitor-auto 来规划原生媒体和界面行为，连接它使用@capgo/capacitor-auto 了解@capgo/capacitor-auto的实现细节开始使用了解开始使用的实现细节使用@capgo/capacitor-live-activities for the native capability in Using @capgo/capacitor-live-activities, @capgo/capacitor-live-activities for the implementation detail in @capgo/capacitor-live-activities, and 使用@capgo/capacitor-video-player for the native capability in Using @capgo/capacitor-video-player.

自动

Auto教程