HarmonyOS 超级终端与服务卡片创建：打造无缝多设备交互体验

HarmonyOS 超级终端与服务卡片开发：打造无缝多设备交互体验 #星光不负码向未来#

参与#星光不负码上未来#征文活动

欢迎继续探索 HarmonyOS 进阶系列！在上篇《HarmonyOS 分布式与 AI 集成》中，我们实现了跨设备同步的智能备忘录应用。本篇将深入探讨 HarmonyOS 的超级终端（Super Device） 和 服务卡片（Service Widget），通过一个 跨设备协作的音乐播放器应用，展示如何利用超级终端实现设备间无缝连接，并通过服务卡片提供快捷交互入口，带来流畅的鸿蒙生态体验。

本文基于 HarmonyOS NEXT API 12+，使用 ArkTS 和 DevEco Studio 2025，结合 超级终端 API 和 服务卡片框架，实现音乐播放器的多设备协同和卡片化交互。让我们开始吧！

---

前置准备

工具	版本要求	下载链接
DevEco Studio	2025.1+	华为开发者官网
JDK	17	内置于 DevEco Studio
HarmonyOS 设备	手机/平板/手表/车机	华为 Mate 60 / MatePad / Watch 4 / AITO M9
模拟器	API 12+	DevEco Studio 内置
HMS Core SDK	6.13+	自动集成

项目结构：

music-player-app
├── entry/src/main/ets
│   ├── MainAbility
│   │   ├── pages
│   │   │   ├── Player.ets
│   │   │   └── Settings.ets
│   │   ├── services
│   │   │   └── MusicSyncService.ets
│   │   └── widgets
│   │       └── MusicWidget.ets
│   └── resources
│       └── base
│           └── media
│               └── icon.png
├── module.json5
└── build-profile.json5

安装环境：

• 安装 DevEco Studio：从 华为开发者官网 下载。
• 配置模拟器：Tools > Device Manager > Create Simulator（支持手机/平板/手表）。
• 验证：运行默认 “Hello World” 项目，确保模拟器或设备正常连接。

---

步骤 1：配置超级终端权限

在 module.json5 中添加超级终端和媒体相关权限：

{
  "module": {
    "name": "entry",
    "type": "entry",
    "mainElement": "MainAbility",
    "deviceTypes": [
      "phone",
      "tablet",
      "wearable",
      "car"
    ],
    "requestPermissions": [
      {
        "name": "ohos.permission.DISTRIBUTED_DEVICE_STATE_CHANGE",
        "reason": "$string:permission_device_state_reason",
        "usedScene": {
          "abilities": ["MainAbility"],
          "when": "always"
        }
      },
      {
        "name": "ohos.permission.MEDIA_LOCATION",
        "reason": "$string:permission_media_reason"
      }
    ],
    "metaData": {
      "customizeData": [
        {
          "name": "Widget",
          "value": "com.example.musicplayerapp.widgets.MusicWidget"
        }
      ]
    }
  }
}

说明：

• DISTRIBUTED_DEVICE_STATE_CHANGE：监听设备连接状态。
• MEDIA_LOCATION：访问音乐文件。
• metaData：注册服务卡片。

---

步骤 2：实现超级终端协同（分布式设备管理）

在 MusicSyncService.ets 中实现设备发现与音乐播放同步：

// entry/src/main/ets/MainAbility/services/MusicSyncService.ets
import deviceManager from '@ohos.distributedHardware.deviceManager'
import distributedData from '@ohos.data.distributedData'
import { BusinessError } from '@kit.BasicServicesKit'
class MusicSyncService {
private deviceManager: deviceManager.DeviceManager | null = null
private kvStore: distributedData.KVStore | null = null
private readonly STORE_ID = 'music_player_store'
async init(context: any): Promise<void> {
  try {
  // 初始化设备管理
  this.deviceManager = await deviceManager.createDeviceManager(context.bundleName)
  this.deviceManager.on('deviceStateChange', (data) => {
  console.info(`Device ${data.deviceId} ${data.deviceState === 1 ? 'online' : 'offline'}`)
  })
  // 初始化分布式存储
  const kvManager = distributedData.createKVManager({ context, bundleName: context.bundleName })
  this.kvStore = await kvManager.getKVStore(this.STORE_ID, {
  createIfMissing: true,
  autoSync: true
  })
  } catch (error) {
  console.error(`Init failed: ${(error as BusinessError).message}`)
  }
  }
  async syncPlaybackState(state: PlaybackState): Promise<void> {
    if (!this.kvStore) return
    await this.kvStore.put('playback_state', JSON.stringify(state))
    }
    async getPlaybackState(): Promise<PlaybackState | null> {
      if (!this.kvStore) return null
      const state = await this.kvStore.get('playback_state')
      return state ? JSON.parse(state) : null
      }
      async getAvailableDevices(): Promise<deviceManager.DeviceInfo[]> {
        if (!this.deviceManager) return []
        return await this.deviceManager.getTrustedDeviceList()
        }
        }
        interface PlaybackState {
        trackId: string
        position: number
        isPlaying: boolean
        }
        export const musicSyncService = new MusicSyncService()

亮点：

• 动态监听设备状态，实时更新可用设备列表。
• 使用 KVStore 同步播放状态（如曲目、进度、播放/暂停）。

---

步骤 3：实现音乐播放器 UI

在 Player.ets 中实现响应式播放器界面：

// entry/src/main/ets/MainAbility/pages/Player.ets
import media from '@ohos.multimedia.media'
import router from '@ohos.router'
@Entry
@Component
struct Player {
@State playbackState: PlaybackState = { trackId: 'track1', position: 0, isPlaying: false }
@State devices: deviceManager.DeviceInfo[] = []
private audioPlayer: media.AVPlayer | null = null
aboutToAppear() {
musicSyncService.init(this.context)
this.loadDevices()
this.initPlayer()
this.loadPlaybackState()
}
async loadDevices() {
this.devices = await musicSyncService.getAvailableDevices()
}
async loadPlaybackState() {
const state = await musicSyncService.getPlaybackState()
if (state) {
this.playbackState = state
}
}
async initPlayer() {
this.audioPlayer = await media.createAVPlayer()
this.audioPlayer.on('play', () => {
this.playbackState.isPlaying = true
musicSyncService.syncPlaybackState(this.playbackState)
})
this.audioPlayer.on('seekDone', (position) => {
this.playbackState.position = position
musicSyncService.syncPlaybackState(this.playbackState)
})
}
build() {
Column() {
Text(`Now Playing: ${this.playbackState.trackId}`)
.fontSize(20)
.fontWeight(FontWeight.Bold)
.margin(10)
Progress(this.playbackState.position, 100)
.width('80%')
.margin(10)
Row() {
Button(this.playbackState.isPlaying ? 'Pause' : 'Play')
.fontSize(18)
.backgroundColor(this.playbackState.isPlaying ? '#F44336' : '#4CAF50')
.onClick(() => {
this.playbackState.isPlaying ? this.audioPlayer?.pause() : this.audioPlayer?.play()
})
Button('Settings')
.fontSize(18)
.backgroundColor('#2196F3')
.onClick(() => {
router.pushUrl({ url: 'pages/Settings' })
})
}
.justifyContent(FlexAlign.SpaceBetween)
.width('100%')
List() {
ForEach(this.devices, (device: deviceManager.DeviceInfo) => {
ListItem() {
Text(device.deviceName)
.fontSize(16)
}
})
}
.margin(10)
}
.width('100%')
.padding(20)
.backgroundColor('#F5F5F5')
}
}

说明：

• 使用 @ohos.multimedia.media 播放音频。
• 响应式 UI，支持手机、平板、车机等设备。

图源：华为开发者社区 - 音乐播放器 UI 示例

---

步骤 4：实现服务卡片

在 MusicWidget.ets 中实现桌面服务卡片：

// entry/src/main/ets/MainAbility/widgets/MusicWidget.ets
import formBindingData from '@ohos.app.form.formBindingData'
@Component
struct MusicWidget {
@State playbackState: PlaybackState = { trackId: 'track1', position: 0, isPlaying: false }
build() {
Column() {
Text(this.playbackState.trackId)
.fontSize(14)
.fontWeight(FontWeight.Medium)
Button(this.playbackState.isPlaying ? 'Pause' : 'Play')
.fontSize(12)
.width(80)
.height(30)
.onClick(() => {
this.playbackState.isPlaying = !this.playbackState.isPlaying
musicSyncService.syncPlaybackState(this.playbackState)
})
}
.width(160)
.height(100)
.backgroundColor('#FFFFFF')
}
}
export default {
onCreate() {
const formData = {
trackId: 'track1',
isPlaying: false
}
return formBindingData.createFormBindingData({ data: formData })
},
onUpdate(formId: string) {
// 更新卡片状态
},
onDestroy(formId: string) {
// 清理资源
}
}

说明：

• 服务卡片支持桌面快捷交互。
• 通过 formBindingData 动态更新卡片内容。

---

步骤 5：构建与多设备调试

1. 构建 HAP 包：

   • Build > Build Hap > Generate Signed Hap。
   • 输出 entry.hap 和 form.hap（服务卡片）。

2. 多设备部署：

   • 手机/平板：通过 DevEco Studio 直接安装。
   • 手表/车机：使用远程调试（Tools > Remote Device）。
   • 验证超级终端：确保设备通过华为账户绑定在同一局域网。

3. 测试协同：

   • 在手机上播放/暂停音乐，观察手表卡片和车机界面同步。
   • 检查日志：Tools > Logcat，过滤 “MusicSyncService”。

---

进阶与最佳实践

• 性能优化：

  • 缓存播放状态：

    @StorageLink('playbackCache') playbackState: PlaybackState

• 错误处理：

  • 添加重试机制：

    async syncPlaybackState(state: PlaybackState, retries: number = 3): Promise<void> {
      for (let i = 0; i < retries; i++) {
      try {
      await this.kvStore.put('playback_state', JSON.stringify(state))
      return
      } catch (error) {
      console.error(`Retry ${i + 1}: ${(error as BusinessError).message}`)
      }
      }
      }

• 卡片动态更新：

  • 使用 FormProvider 推送更新：

    import FormProvider from '@ohos.app.form.FormProvider'
    FormProvider.updateForm(formId, formBindingData.createFormBindingData({ data }))

• 资源推荐：

  • 华为开发者官网 - 超级终端
  • Gitee - HarmonyOS 开源项目
  • B站教程：“HarmonyOS 超级终端开发实战”

---

总结

通过本篇，你掌握了：

• 超级终端：实现手机、手表、车机间的音乐播放同步。
• 服务卡片：提供桌面快捷交互入口。
• 多设备适配：响应式 UI 适配不同设备。

下一期预告：《HarmonyOS 云服务与推送通知》——让你的应用随时与用户保持连接！

有问题？欢迎在评论区交流！喜欢请点赞分享～

（最后更新：2025 年 10 月 24 日）