HarmonyOS 5.0.0 或以上：实现跨设备共享 UI 控件（远程组件显示 + 操作同步）

📌 场景介绍

分布式 UI 是鸿蒙系统的一大特色，允许：

• 将 UI 页面从本地拉起到远程设备并显示

• 远程用户可交互（例如：投屏白板、控制台、遥控器）

• 可做“远程可见可控”的协同体验

本篇实现：

• 远程启动共享页面（远端运行本地 UI）

• 实时传递点击事件数据

• 模拟“远程遥控面板”的 UI 联动

🧱 页面结构

/entry/src/main/ets
  └── pages/
       ├── SharedControlPage.ets       // 可远程共享的交互页
       └── RemoteLaunchDemo.ets        // 发起远程 UI 投送页

📍 配置清单支持

在 module.json5 中为 SharedControlPage 配置：

"pages": [
  {
    "src": "pages/SharedControlPage",
    "abilityType": "page",
    "continuationMode": {
      "support": true
    }
  }
]

🧩 SharedControlPage.ets（共享页面）

@Entry
@Component
struct SharedControlPage {
  @State count: number = 0

  build() {
    Column() {
      Text("🎮 分布式遥控页面").fontSize(22).margin(20)
      Text(`当前计数：${this.count}`).fontSize(18).margin(10)
      Button("点我 +1").onClick(() => this.count++).margin(10)
      Text("⚠️ 当前界面运行于远程设备").fontSize(12).fontColor('#999').marginTop(20)
    }
    .padding(20)
    .height('100%')
  }
}

🧩 RemoteLaunchDemo.ets（本机页面，发起远程 UI 显示）

import distributedHardware from '@ohos.distributedHardware.deviceManager'
import missionManager from '@ohos.distributedMissionManager'

@Entry
@Component
struct RemoteLaunchDemo {
  @State deviceList: Array<{ name: string; id: string }> = []
  @State status: string = '等待选择设备'

  aboutToAppear() {
    distributedHardware.createDeviceManager('com.example.harmony', (err, dm) => {
      if (err) return
      dm.on('deviceFound', (device) => {
        const id = device.deviceId
        const name = device.deviceName
        if (!this.deviceList.some(d => d.id === id)) {
          this.deviceList.push({ id, name })
        }
      })
      dm.startDeviceDiscovery({
        subscribeId: 'uiShare',
        capability: 'dvkit',
        isWakeRemote: true,
        medium: 1
      })
    })
  }

  private async sharePageToDevice(deviceId: string) {
    const want = {
      bundleName: 'com.example.harmony',
      moduleName: 'entry',
      abilityName: 'EntryAbility',
      path: 'pages/SharedControlPage',
      deviceId: deviceId
    }

    try {
      const result = await missionManager.continueMission(want)
      this.status = result ? '✅ 页面已投送至远程设备' : '❌ 投送失败'
    } catch (err) {
      this.status = '❌ 错误：' + JSON.stringify(err)
    }
  }

  build() {
    Column() {
      Text("🖥️ 跨设备 UI 投送").fontSize(22).margin(20)
      Text(this.status).fontSize(14).fontColor('#888').margin(10)

      ForEach(this.deviceList, (d) => {
        Button(`共享页面到 ${d.name}`).onClick(() => this.sharePageToDevice(d.id)).margin(6)
      })
    }
    .padding(20)
    .height('100%')
  }
}

✅ 效果说明

• 本地选择设备并发起页面共享

• 远程设备将加载页面，并可以交互操作（如点击按钮）

• 状态值本地不可见，但已完全运行于远程设备环境中

🔧 拓展建议

• 页面携带初始化参数（如远程控制指令、上下文）

• 实现 WebSocket + 分布式 UI 双向交互

• 远程页面操作通过消息同步至本地页面

• 多人同时接入时构建远程会议、白板等高级场景