多设备协同真只是“投屏++”吗？看我用 HarmonyOS 把三台设备拼成一台！

你是不是也在想——“鸿蒙这么火，我能不能学会？”
答案是：当然可以！
这个专栏专为零基础小白设计，不需要编程基础，也不需要懂原理、背术语。我们会用最通俗易懂的语言、最贴近生活的案例，手把手带你从安装开发工具开始，一步步学会开发自己的鸿蒙应用。
不管你是学生、上班族、打算转行，还是单纯对技术感兴趣，只要你愿意花一点时间，就能在这里搞懂鸿蒙开发，并做出属于自己的App！
📌 关注本专栏《零基础学鸿蒙开发》，一起变强！
每一节内容我都会持续更新，配图+代码+解释全都有，欢迎点个关注，不走丢，我是小白酷爱学习，我们一起上路 🚀

🧭 前言：从“能用”到“好用”的临门一脚

以前我也做过投屏、远程控制之类的活儿，老问题三板斧：延迟、卡顿、权限地狱。HarmonyOS 上手后，我的直观感受是：原生分布式能力把“跨设备”当成本机调用（对，你没看错，就是“像本地一样用”），这让多设备协同不再是“外挂”。
  为了不空谈，我撸了个真实场景应用：SmartBoard Pro（假名），功能目标一句话——手机拍图 → 平板白板批注 → 电视大屏展示，一条链路全自动协同，且支持“中途换设备、断网重连、权限可控”。

🏗️ 一、系统设计：把三台设备捆成“超级终端”

我们由浅入深拆三层：连接发现 → 数据同步 → 能力虚拟化。

关键模块

• DeviceManager：扫描、拉起、配对、建立信任（设备互认）。
• Distributed KVStore（分布式键值存储）：数据自动同步，我们把“白板页面、图层、批注”都塞进 KV。
• AVSession / MediaController：在电视上“原生播放/展示”，而不是流式投屏，低耦合、低延时。
• （可选）Continuation：把“编辑态能力”迁移到另一台设备继续干活（比如平板编辑更舒服）。

🧰 二、项目脚手架（Stage 模型）

entry/
  src/main/
    ets/
      entryability/EntryAbility.ets
      pages/
        Index.ets        # 设备发现 & 会话启动
        Board.ets        # 白板批注（平板主界面）
        Viewer.ets       # 电视端展示
      common/
        dm.ts            # DeviceManager 封装
        store.ts         # 分布式 KVStore 封装
        session.ts       # AVSession/Controller 封装
        schema.ts        # 数据结构定义
  module.json5
  app.json5

🔐 三、权限与配置（module.json5 / app.json5）

你要是忽略这步，运行时会被系统无情“教育”。

// app.json5（节选）
{
  "app": {
    "bundleName": "com.example.smartboardpro",
    "vendor": "You",
    "versionCode": 1,
    "versionName": "1.0.0",
    "apiReleaseType": "Release"
  }
}

// module.json5（节选）
{
  "module": {
    "abilities": [
      {
        "name": "EntryAbility",
        "type": "page",
        "srcEntry": "./ets/entryability/EntryAbility.ets"
      }
    ],
    "requestPermissions": [
      { "name": "ohos.permission.DISTRIBUTED_DATASYNC" },
      { "name": "ohos.permission.GET_DISTRIBUTED_DEVICE_INFO" },
      { "name": "ohos.permission.DISTRIBUTED_DEVICE_STATE_CHANGE" },
      { "name": "ohos.permission.CAMERA" },
      { "name": "ohos.permission.WRITE_MEDIA" },
      { "name": "ohos.permission.READ_MEDIA" },
      { "name": "ohos.permission.MICROPHONE" } // 若有语音/音频
    ]
  }
}

🧪 四、设备发现与认证（ArkTS 封装）

// ets/common/dm.ts
import deviceManager from '@ohos.distributedDeviceManager';

export class DM {
  private static inst: DM;
  private dm: deviceManager.DeviceManager | undefined;
  private devices: Array<deviceManager.DeviceBasicInfo> = [];

  static get(): DM {
    if (!DM.inst) DM.inst = new DM();
    return DM.inst;
  }

  async init(bundleName: string): Promise<void> {
    if (this.dm) return;
    this.dm = await deviceManager.createDeviceManager(bundleName);
  }

  startDiscover(onFound: (d: deviceManager.DeviceBasicInfo) => void) {
    if (!this.dm) throw new Error('DM not initialized');
    this.dm!.startDeviceDiscovery({
      subscribeId: 1001,
      mode: 0, // 主动发现
      medium: 0, // 软总线自适配
      freq: 2,
      isSameAccount: true,
      isWakeRemote: true,
      capability: 0
    }, (dev) => {
      this.devices.push(dev);
      onFound(dev);
    });
  }

  async authenticate(deviceId: string): Promise<boolean> {
    return new Promise((resolve) => {
      this.dm!.authenticateDevice({
        authType: 1,
        extraInfo: { targetPkgName: '', appName: 'SmartBoardPro' },
        deviceId
      }, (res) => resolve(res?.ret === 0));
    });
  }

  list(): Array<deviceManager.DeviceBasicInfo> { return this.devices; }
}

要点

• isSameAccount=true：同账号设备零摩擦体验；跨账号需更严格的认证流程。
• isWakeRemote=true：发现时可唤醒休眠设备（体验更“像一个系统”）。

🔄 五、分布式数据同步（白板状态实时共享）

白板的每一次笔触、撤销、缩放，都是一条“可重放”的事件，我们塞到 KVStore，靠系统把它广播给所有在线设备。

// ets/common/store.ts
import dataManager from '@ohos.data.distributedKVStore';

type Stroke = {
  id: string;
  color: string;
  width: number;
  points: Array<{ x: number; y: number }>;
  author: string;
  ts: number;
};

export class BoardStore {
  private static inst: BoardStore;
  private kvManager: dataManager.KVManager;
  private kvStore: dataManager.SingleKVStore;

  static async init(appId: string): Promise<BoardStore> {
    if (BoardStore.inst) return BoardStore.inst;
    const kvManager = await dataManager.createKVManager({
      bundleName: appId,
      userInfo: { userId: '0', userType: dataManager.UserType.SAME_USER_ID }
    });
    const kvStore = await kvManager.getKVStore('board', {
      createIfMissing: true,
      encrypt: false,
      backup: true,
      autoSync: true,
      kvStoreType: dataManager.KVStoreType.SINGLE_VERSION,
      securityLevel: dataManager.SecurityLevel.S2
    }) as dataManager.SingleKVStore;

    BoardStore.inst = new BoardStore(kvManager, kvStore);
    return BoardStore.inst;
  }

  private constructor(kvManager: dataManager.KVManager, kvStore: dataManager.SingleKVStore) {
    this.kvManager = kvManager;
    this.kvStore = kvStore;
  }

  onRemoteChange(cb: (event: Stroke) => void) {
    this.kvStore.on('dataChange', (type, entries) => {
      entries.forEach(e => {
        if (e.type === 'put' && e.value) {
          try { cb(JSON.parse(e.value.value.toString()) as Stroke); } catch {}
        }
      });
    });
  }

  async emitStroke(s: Stroke) {
    await this.kvStore.put(`stroke:${s.id}`, JSON.stringify(s));
  }

  async clearBoard() {
    await this.kvStore.clear();
  }
}

为什么用 KVStore？

• 自动处理设备上线/掉线带来的数据补发和一致性；
• 你只需管“业务事件”，同步交给系统去抹平，快乐到飞起。

🖍️ 六、白板页面（平板端主编）

// ets/pages/Board.ets
import { BoardStore } from '../common/store';
import { genId } from '../common/schema';

@Entry
@Component
struct BoardPage {
  @State strokes: any[] = [];
  private store?: BoardStore;

  async aboutToAppear() {
    this.store = await BoardStore.init('com.example.smartboardpro');
    this.store.onRemoteChange((evt) => {
      this.strokes.push(evt);
    });
  }

  private async onDraw(points: Array<{x:number;y:number}>) {
    const stroke = {
      id: genId(),
      color: '#222',
      width: 4,
      points,
      author: 'PadUser',
      ts: Date.now()
    };
    this.strokes.push(stroke);
    await this.store!.emitStroke(stroke);
  }

  build() {
    Column() {
      Text('SmartBoard Pro - Pad Editor').fontSize(20).fontWeight(FontWeight.Bold).margin({ bottom: 12 })

      // 伪代码：替换为你实际的画布组件/自绘 Canvas
      Canvas({ onStroke: (pts)=> this.onDraw(pts) })

      Row() {
        Button('Clear').onClick(()=> this.store?.clearBoard())
      }.justifyContent(FlexAlign.SpaceBetween).margin({ top: 12 })
    }.padding(16)
  }
}

小技巧：白板的“撤销/重做”可以通过维护事件栈完成，而跨设备一致性通过 KVStore 的事件顺序（ts）+ 冲突合并策略解决。

📸 七、手机拍照 → 自动同步到白板（手机端）

// ets/pages/Index.ets（手机端）
import camera from '@ohos.multimedia.camera';
import media from '@ohos.multimedia.media';
import { BoardStore } from '../common/store';

@Entry
@Component
struct PhoneCapture {
  private store?: BoardStore;

  async aboutToAppear() {
    this.store = await BoardStore.init('com.example.smartboardpro');
  }

  async takePhoto() {
    const camMgr = await camera.getCameraManager(); // 简化示例
    const camOutput = await camMgr.takePhoto();     // 实际需完整相机会话流程
    const uri = camOutput?.uri ?? '';
    const imgStroke = {
      id: `img:${Date.now()}`,
      color: '#000',
      width: 0,
      points: [],
      author: 'PhoneUser',
      ts: Date.now(),
      // 在白板协议里，我们用一种“插入图片”的事件
      kind: 'image',
      payload: { uri, x: 100, y: 100, w: 640, h: 360 }
    };
    await this.store!.emitStroke(imgStroke as any);
  }

  build() {
    Column() {
      Text('SmartBoard Pro - Phone Shooter').fontSize(20).fontWeight(FontWeight.Bold)
      Button('Take & Sync').onClick(()=> this.takePhoto()).margin({ top: 16 })
    }.padding(16)
  }
}

为什么不是简单发文件？

• 我们把“插入图片”抽象成白板协议事件，这样平板端能精准定位图片位置和层级；
• KV 广播后，电视端也能随之更新展示（见下一节）。

📺 八、电视端展示：AVSession + 被动渲染

// ets/pages/Viewer.ets（电视端）
import { BoardStore } from '../common/store';

@Entry
@Component
struct TvViewer {
  @State strokes: any[] = [];
  private store?: BoardStore;

  async aboutToAppear() {
    this.store = await BoardStore.init('com.example.smartboardpro');
    this.store.onRemoteChange((evt) => {
      this.applyEvent(evt);
    });
  }

  private applyEvent(evt: any) {
    if (evt.kind === 'image') {
      // 伪代码：将图片资源加载并绘制到大屏 Canvas
      this.strokes.push(evt);
    } else {
      this.strokes.push(evt);
    }
  }

  build() {
    Column() {
      Text('SmartBoard Pro - TV Viewer').fontSize(22).fontWeight(FontWeight.Bold).margin({ bottom: 12 })
      // 伪代码：根据strokes重绘大屏画布
      Canvas({ strokes: this.strokes })
    }.padding(24)
  }
}

为什么用被动渲染？
电视只负责“看”，不负责“改”，避免交互复杂化；
同时让电视能“热插拔”加入，不影响编辑会话的进程。

🔁 九、任务迁移（可选）：平板没电？手机接着画

当你想要把“编辑能力”迁移到另一台设备时，用 Continuation 如下：

// ets/common/continuation.ts（示意）
import continuationManager from '@ohos.app.ability.continuation';

export async function continueEditing() {
  const manager = continuationManager.getContinuationRegisterManager();
  const req = {
    // 过滤规则：只展示平板/手机等
    filter: { deviceType: ['tablet', 'phone'] },
    description: 'Continue editing the board',
    continuationMode: 1 // 手动选择
  };
  const token = await manager.register(req);
  // 触发拉起对端 UIAbility，携带当前会话上下文（白板ID等）
  await manager.startContinuation(token, { boardId: 'current-session' });
}

🧪 十、端到端联调自测清单（含“掉线重连”）

• 同账号三设备：发现 → 认证 → 自动建立信任
• 手机拍照 → 平板白板实时出现图片 → 电视同步展示
• 白板笔触低延迟：目标**< 80ms**（同 Wi-Fi）
• 电视中途加入：自动回放历史事件
• 平板断网/重连：KVStore 自动补发
• 权限弹窗全部命中：相机/麦克风/媒体读写/分布式数据
• 热修复（可选）：仅更新白板协议解析，不动 UI

⚙️ 十一、性能与体验优化清单（血泪教训版）

1. 事件去抖/合并：画笔每 16ms 合批一次，降低同步负担。

2. 图片缩略与延迟加载：先传缩略图，原图后台补齐，电视端渐进式替换。

3. 冲突合并策略：以 ts + author + seq 做稳定排序；撤销操作需要幂等。

4. 弱网降级：KV 超时后切本地队列，网络恢复批量补发。

5. 安全：

   • 限制对端可用能力（比如电视不可发起相机调用）。
   • 对敏感事件（图片/音频）引入一次性确认与可追溯日志（仅本地）。

6. 功耗：

   • 手机端相机/麦克风用完即关；
   • 白板渲染帧率在无操作时降至 20fps。

🧩 十二、常见坑位与解法

• 发现到认证过程卡住？
  多为跨子网、AP 隔离所致；可提示用户使用同一 5G 频段 Wi-Fi 或开启移动互联的近场发现能力。
• KVStore 不触发回调？
  确认 autoSync: true、SecurityLevel 足够、BundleName 与签名一致。
• 电视端渲染锯齿/撕裂？
  大屏重绘建议使用离屏缓冲，合批后再一次性提交。
• 权限弹窗频繁？
  首次体验做引导页统一申请；后续在设置中提供“分布式能力开关”。

🧾 十三、极简“可运行 Demo 汇总”

• 设备发现：DM.init → startDiscover → authenticate
• 实时同步：BoardStore.init → emitStroke/onRemoteChange
• 手机拍照同步：camera.takePhoto → emitStroke(kind=image)
• 电视端展示：订阅 KV 事件重绘
• 任务迁移（可选）：Continuation.startContinuation(boardId)

你可以把上面的代码直接拼出一个 MVP，在 DevEco Studio 下用三台真机联调，体验会非常直观。

🧠 结语：不是“互联”，是“合体”

多设备协同的爽点，从来不在“能连上”，而在“像一台机器一样自然”。HarmonyOS 的分布式能力让我们第一次可以合理地偷懒：把数据交给 KVStore、把连接交给 DeviceManager、把播放交给 AVSession，我们只用把“业务事件”设计好，剩下交给系统跑。
  所以，那句老话我还得用上：“不是一台设备统治一切，而是万物组成一台设备。”
下次灵感来时，别犹豫，直接开一个跨设备的需求吧——毕竟，你已经有了一个“超级终端”。

❤️ 如果本文帮到了你…

• 请点个赞，让我知道你还在坚持阅读技术长文！
• 请收藏本文，因为你以后一定还会用上！
• 如果你在学习过程中遇到bug，请留言，我帮你踩坑！