如何实现手机遥控端关机按钮同时关闭TV端和手机端界面

目前家庭电视机主要通过其自带的遥控器进行操控，实现的功能较为单一。例如，当我们要在TV端搜索节目时，电视机在遥控器的操控下往往只能完成一些字母或数字的输入，而无法输入其他复杂的内容。分布式遥控器将手机的输入能力和电视遥控器的遥控能力结合为一体，从而快速便捷操控电视。

分布式遥控器的实现基于OpenHarmony的分布式能力和RPC通信能力，UI使用eTS进行开发。如下图所示，分别用两块开发板模拟TV端和手机端。

1. 分布式组网后可以通过TV端界面的Controller按钮手动拉起手机端的遥控界面，在手机端输入时会将输入的内容同步显示在TV端搜索框，点击搜索按钮会根据输入的内容搜索相关节目。
2. 还可以通过点击方向键（上下左右）将焦点移动到我们想要的节目上，再点击播放按钮进行播放，按返回按钮返回TV端主界面。
3. 同时还可以通过手机遥控端关机按钮同时关闭TV端和手机端界面。

UI效果图如下：

图1 TV端主页默认页面

图2 手机端遥控页面

• 图3 TV端视频播放页面

说明： 本示例涉及使用系统接口，需要手动替换Full SDK才能编译通过

2.搭建OpenHarmony环境

完成本篇Codelab我们首先要完成开发环境的搭建，本示例以RK3568开发板为例，参照以下步骤进行：

1. 获取OpenHarmony系统版本：标准系统解决方案（二进制）。

      以3.1版本为例：

2.搭建烧录环境。

1. 1. 完成DevEco Device Tool的安装
   2. 完成RK3568开发板的烧录

3.搭建开发环境。

1. 1. 开始前请参考工具准备，完成DevEco Studio的安装和开发环境配置。
   2. 开发环境配置完成后，请参考使用工程向导创建工程（模板选择“Empty Ability”），选择JS或者eTS语言开发。
   3. 工程创建完成后，选择使用真机进行调测。

3.分布式组网

本章节以系统自带的音乐播放器为例（具体以实际的应用为准），介绍如何完成两台设备的分布式组网。

1. 硬件准备：准备两台烧录相同的版本系统的RK3568开发板A、B。
2. 开发板A、B连接同一个WiFi网络。

      打开设置-->WLAN-->点击右侧WiFi开关-->点击目标WiFi并输入密码。

3.将设备A，B设置为互相信任的设备。

• 找到系统应用“音乐”。

• 设备A打开音乐，点击左下角流转按钮，弹出列表框，在列表中会展示远端设备的id。选择远端设备B的id，另一台开发板（设备B）会弹出验证的选项框。

• 设备B点击允许，设备B将会弹出随机PIN码，将设备B的PIN码输入到设备A的PIN码填入框中。

1. 配网完毕。

4.代码结构解读

本篇Codelab只对核心代码进行讲解，首先来介绍下整个工程的代码结构：

• MainAbility：
  • model：数据模型。
    • RemoteDeviceModel.ets：获取组网内的设备列表模型。
    • PicData.ets：图片信息数据。
    • PicDataModel.ets：图片信息模型。
    • ConnectModel.ets：连接远端Service和发送消息模型。
  • pages：存放TV端各个页面。
    • TVindex.ets：TV端主页面。
    • VideoPlay.ets：TV端视频播放页面。
• PhoneAbility：存放应用手机控制端主页面。
  • pages/PhoneIndex.ets：手机控制端主页面。
• ServiceAbility：存放ServiceAbility相关文件。
  • service.ts：service服务，用于跨设备连接后通讯。
• resources ：存放工程使用到的资源文件。
  • resources/rawfile：存放工程中使用的图片资源文件。
• config.json：配置文件。

5.实现TV端界面

在本章节中，您将学会开发TV端默认界面和TV端视频播放界面，示意图参考第一章图1和图3所示。

建立数据模型，将图片ID、图片源、图片名称和视频源绑定成一个数据模型。详情代码可以查看MainAbility/model/PicData.ets和MainAbility/model/PicDataModel.ets两个文件。

1. 实现TV端默认页面布局和样式。

• 在MainAbility/pages/TVIndex.ets 主界面文件中添加入口组件。页面布局代码如下：

// 入口组件
@Entry
@Component
struct Index {
  private letters: s