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) returnawait this.kvStore.put('playback_state', JSON.stringify(state))}async getPlaybackState(): Promise<PlaybackState | null> {if (!this.kvStore) return nullconst 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: stringposition: numberisPlaying: 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：构建与多设备调试

构建 HAP 包：
- Build > Build Hap > Generate Signed Hap。
- 输出 entry.hap 和 form.hap（服务卡片）。
多设备部署：
- 手机/平板：通过 DevEco Studio 直接安装。
- 手表/车机：使用远程调试（Tools > Remote Device）。
- 验证超级终端：确保设备通过华为账户绑定在同一局域网。
测试协同：
- 在手机上播放/暂停音乐，观察手表卡片和车机界面同步。
- 检查日志：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 }))

资源推荐：

总结

通过本篇，你掌握了：

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

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

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

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