使用 @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需要您的应用程序类别的Apple批准许可。添加CarPlay场景配置，描述在 iOS设置文档并保持您的汽车UI在Apple批准的模板中。

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 Using @capgo/capacitor-video-player for the native capability in Using @capgo/capacitor-video-player.

自动

Auto教程