当前位置:   article > 正文

OpenHarmony开发实战:分布式遥控器(ArkTS)_openharmony分布式组网

openharmony分布式组网

目前家庭电视机主要通过其自带的遥控器进行操控,实现的功能较为单一。例如,当我们要在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. 完成DevEco Device Tool的安装
    2. 完成RK3568开发板的烧录
  3. 搭建开发环境。

    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码填入框中。

    配网完毕。

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 主界面文件中添加入口组件。页面布局代码如下:

      1. // 入口组件
      2. @Entry
      3. @Component
      4. struct Index {
      5. private letters: string[] = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9']
      6. private source: string
      7. @State text: string = ''
      8. @State choose: number = -1
      9. build() {
      10. Flex({ direction: FlexDirection.Column }) {
      11. TextInput({text: this.text, placeholder: 'Search' })
      12. .onChange((value: string) => {
      13. this.text = value
      14. })
      15. Row({space: 30}) {
      16. Text('Clear')
      17. .fontSize(16)
      18. .backgroundColor('#ABB0BA')
      19. .textAlign(TextAlign.Center)
      20. .onClick(() => {
      21. this.text = ''
      22. })
      23. .clip(true)
      24. .borderRadius(10)
      25. Text('Backspace')
      26. .fontSize(16)
      27. .backgroundColor('#ABB0BA')
      28. .textAlign(TextAlign.Center)
      29. .onClick(() => {
      30. this.text = this.text.substring(0, this.text.length - 1)
      31. })
      32. .clip(true)
      33. .borderRadius(10)
      34. Text('Controller')
      35. .fontSize(16)
      36. .backgroundColor('#ABB0BA')
      37. .textAlign(TextAlign.Center)
      38. .onClick(() => {
      39. ......
      40. })
      41. .clip(true)
      42. .borderRadius(10)
      43. }
      44. Grid() {
      45. ForEach(this.letters, (item) => {
      46. GridItem() {
      47. Text(item)
      48. .fontSize(20)
      49. .backgroundColor('#FFFFFF')
      50. .textAlign(TextAlign.Center)
      51. .onClick(() => {
      52. this.text += item
      53. })
      54. .clip(true)
      55. .borderRadius(5)
      56. }
      57. }, item => item)
      58. }
      59. .rowsTemplate('1fr 1fr 1fr 1fr')
      60. .columnsTemplate('1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr')
      61. .columnsGap(8)
      62. .rowsGap(8)
      63. .width('75%')
      64. .height('25%')
      65. .margin(5)
      66. .backgroundColor('#D2D3D8')
      67. .clip(true)
      68. .borderRadius(10)
      69. Grid() {
      70. ForEach(this.picItems, (item: PicData) => {
      71. GridItem() {
      72. PicGridItem({ picItem: item })
      73. }
      74. }, (item: PicData) => item.id.toString())
      75. }
      76. .rowsTemplate('1fr 1fr 1fr')
      77. .columnsTemplate('1fr 1fr')
      78. .columnsGap(5)
      79. .rowsGap(8)
      80. .width('90%')
      81. .height('58%')
      82. .backgroundColor('#FFFFFF')
      83. .margin(5)
      84. }
      85. .width('98%')
      86. .backgroundColor('#FFFFFF')
      87. }
      88. }
    • 其中PicGridItem将PicItem的图片源和图片名称绑定,实现代码如下:

      1. // 九宮格拼图组件
      2. @Component
      3. struct PicGridItem {
      4. private picItem: PicData
      5. build() {
      6. Column() {
      7. Image(this.picItem.image)
      8. .objectFit(ImageFit.Contain)
      9. .height('85%')
      10. .width('100%')
      11. .onClick(() => {
      12. ......
      13. })
      14. })
      15. Text(this.picItem.name)
      16. .fontSize(20)
      17. .fontColor('#000000')
      18. }
      19. .height('100%')
      20. .width('90%')
      21. }
      22. }
  2. 实现TV端视频播放界面。

    • 在MainAbility/pages/VideoPlay.ets 文件中添加组件。页面布局代码如下:

      1. import router from '@system.router'
      2. @Entry
      3. @Component
      4. struct Play {
      5. // 取到Index页面跳转来时携带的source对应的数据。
      6. private source: string = router.getParams().source
      7. build() {
      8. Column() {
      9. Video({
      10. src: this.source,
      11. })
      12. .width('100%')
      13. .height('100%')
      14. .autoPlay(true)
      15. .controls(true)
      16. }
      17. }
      18. }
    • 在MainAbility/pages/TVIndex.ets中,给PicGridItem的图片添加点击事件,点击图片即可播放PicItem的视频源。实现代码如下:

      1. Image(this.picItem.image)
      2. ......
      3. .onClick(() => {
      4. router.push({
      5. uri: 'pages/VideoPlay',
      6. params: { source: this.picItem.video }
      7. })
      8. })

6.实现手机遥控端界面

在本章节中,您将学会开发手机遥控端默认界面,示意图参考第一章图2所示。

  • PhoneAbility/pages/PhoneIndex.ets 主界面文件中添加入口组件。页面布局代码如下:

    1. @Entry
    2. @Component
    3. struct Index {
    4. build() {
    5. Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {
    6. Row() {
    7. Image($rawfile('TV.png'))
    8. .width(25)
    9. .height(25)
    10. Text('华为智慧屏').fontSize(20).margin(10)
    11. }
    12. // 文字搜索框
    13. TextInput({ placeholder: 'Search' })
    14. .margin(20)
    15. .onChange((value: string) => {
    16. if (connectModel.mRemote){
    17. ......
    18. }
    19. })
    20. Grid() {
    21. GridItem() {
    22. // 向上箭头
    23. Button({ type: ButtonType.Circle, stateEffect: true }) {
    24. Image($rawfile('up.png')).width(80).height(80)
    25. }
    26. .onClick(() => {
    27. ......
    28. })
    29. .width(80)
    30. .height(80)
    31. .backgroundColor('#FFFFFF')
    32. }
    33. .columnStart(1)
    34. .columnEnd(5)
    35. GridItem() {
    36. // 向左箭头
    37. Button({ type: ButtonType.Circle, stateEffect: true }) {
    38. Image($rawfile('left.png')).width(80).height(80)
    39. }
    40. .onClick(() => {
    41. ......
    42. })
    43. .width(80)
    44. .height(80)
    45. .backgroundColor('#FFFFFF')
    46. }
    47. GridItem() {
    48. // 播放键
    49. Button({ type: ButtonType.Circle, stateEffect: true }) {
    50. Image($rawfile('play.png')).width(60).height(60)
    51. }
    52. .onClick(() => {
    53. ......
    54. })
    55. .width(80)
    56. .height(80)
    57. .backgroundColor('#FFFFFF')
    58. }
    59. GridItem() {
    60. // 向右箭头
    61. Button({ type: ButtonType.Circle, stateEffect: true }) {
    62. Image($rawfile('right.png')).width(70).height(70)
    63. }
    64. .onClick(() => {
    65. ......
    66. })
    67. .width(80)
    68. .height(80)
    69. .backgroundColor('#FFFFFF')
    70. }
    71. GridItem() {
    72. // 向下箭头
    73. Button({ type: ButtonType.Circle, stateEffect: true }) {
    74. Image($rawfile('down.png')).width(70).height(70)
    75. }
    76. .onClick(() => {
    77. ......
    78. })
    79. .width(80)
    80. .height(80)
    81. .backgroundColor('#FFFFFF')
    82. }
    83. .columnStart(1)
    84. .columnEnd(5)
    85. }
    86. .rowsTemplate('1fr 1fr 1fr')
    87. .columnsTemplate('1fr 1fr 1fr')
    88. .backgroundColor('#FFFFFF')
    89. .margin(10)
    90. .clip(new Circle({ width: 325, height: 325 }))
    91. .width(350)
    92. .height(350)
    93. Row({ space:100 }) {
    94. // 返回键
    95. Button({ type: ButtonType.Circle, stateEffect: true }) {
    96. Image($rawfile('return.png')).width(40).height(40)
    97. }
    98. .onClick(() => {
    99. ......
    100. })
    101. .width(100)
    102. .height(100)
    103. .backgroundColor('#FFFFFF')
    104. // 关机键
    105. Button({ type: ButtonType.Circle, stateEffect: true }) {
    106. Image($rawfile('off.png')).width(40).height(40)
    107. }
    108. .onClick(() => {
    109. ......
    110. })
    111. .width(100)
    112. .height(100)
    113. .backgroundColor('#FFFFFF')
    114. // 搜索键
    115. Button({ type: ButtonType.Circle, stateEffect: true }) {
    116. Image($rawfile('search.png')).width(40).height(40)
    117. }
    118. .onClick(() => {
    119. ......
    120. })
    121. .width(100)
    122. .height(100)
    123. .backgroundColor('#FFFFFF')
    124. }
    125. .padding({ left:100 })
    126. }
    127. .backgroundColor('#E3E3E3')
    128. }
    129. }

7.实现分布式拉起和RPC通信

在本章节中,您将学会如何拉起在同一组网内的设备上的FA,并且连接远端Service服务。

  1. 首先通过TV端拉起手机端界面,并将本端的deviceId发送到手机端。

    • 点击TV端主页上的"Controller"按钮,增加.onClick()事件。调用RegisterDeviceListCallback()发现设备列表,并弹出设备列表选择框CustomDialogExample,选择设备后拉起远端FA。CustomDialogExample()代码如下:

      1. // 设备列表弹出框
      2. @CustomDialog
      3. struct CustomDialogExample {
      4. @State editFlag: boolean = false
      5. controller: CustomDialogController
      6. cancel: () => void
      7. confirm: () => void
      8. build() {
      9. Column() {
      10. List({ space: 10, initialIndex: 0 }) {
      11. ForEach(DeviceIdList, (item) => {
      12. ListItem() {
      13. Row() {
      14. Text(item)
      15. .width('87%')
      16. .height(50)
      17. .fontSize(10)
      18. .textAlign(TextAlign.Center)
      19. .borderRadius(10)
      20. .backgroundColor(0xFFFFFF)
      21. .onClick(() => {
      22. onStartRemoteAbility(item);
      23. this.controller.close();
      24. })
      25. }
      26. }.editable(this.editFlag)
      27. }, item => item)
      28. }
      29. }.width('100%').height(200).backgroundColor(0xDCDCDC).padding({ top: 5 })
      30. }
      31. }
    • 点击设备弹出框内的Text组件会调用onStartRemoteAbility()方法拉起远端FA(手机端),将TV端的deviceId传给手机端,并连接手机端的Service。因此在featureAbility.startAbility()成功的回调中也要调用onConnectRemoteService()方法。这里将连接远端Service和发送消息抽象为ConnectModel,详细代码可查看MainAbility/model/ConnectModel.ets文件中onConnectRemoteService()方法。onStartRemoteAbility()方法的代码如下:

      1. function onStartRemoteAbility(deviceId) {
      2. AuthDevice(deviceId);
      3. let numDevices = remoteDeviceModel.deviceList.length;
      4. if (numDevices === 0) {
      5. prompt.showToast({
      6. message: "onStartRemoteAbility no device found"
      7. });
      8. return;
      9. }
      10. var params = {
      11. remoteDeviceId: localDeviceId
      12. }
      13. var wantValue = {
      14. bundleName: 'com.example.helloworld0218',
      15. abilityName: 'com.example.helloworld0218.PhoneAbility',
      16. deviceId: deviceId,
      17. parameters: params
      18. };
      19. featureAbility.startAbility({
      20. want: wantValue
      21. }).then((data) => {
      22. // 拉起远端后,连接远端service
      23. connectModel.onConnectRemoteService(deviceId)
      24. });
      25. }
    • 需要注意的是,配置文件config.json中ServiceAbility的属性visible要设置为true,代码如下:

      1. "abilities": [
      2. ...
      3. {
      4. "visible": true,
      5. "srcPath": "ServiceAbility",
      6. "name": ".ServiceAbility",
      7. "icon": "$media:icon",
      8. "srcLanguage": "ets",
      9. "description": "$string:description_serviceability",
      10. "type": "service"
      11. }
      12. ],
  2. 成功拉起手机端界面后,通过接收TV端传过来的deviceId连接TV端的Service。在手机端的生命周期内增加aboutToAppear()事件,在界面被拉起的时候读取对方的deviceId并调用onConnectRemoteService()方法,连接对方的Service,实现代码如下:

    1. async aboutToAppear() {
    2. await featureAbility.getWant((error, want) => {
    3. // 远端被拉起后,连接对端的service
    4. if (want.parameters.remoteDeviceId) {
    5. let remoteDeviceId = want.parameters.remoteDeviceId
    6. connectModel.onConnectRemoteService(remoteDeviceId)
    7. }
    8. });
    9. }
  3. 建立一个ServiceAbility处理收到的消息并发布公共事件,详细代码请看ServiceAbility/service.ts文件。TV端订阅本端Service的公共事件,并接受和处理消息。

    • 创建SubscribeEvent(),实现代码如下:
    1. subscribeEvent() {
    2. let self = this;
    3. // 用于保存创建成功的订阅者对象,后续使用其完成订阅及退订的动作
    4. var subscriber;
    5. // 订阅者信息
    6. var subscribeInfo = {
    7. events: ["publish_change"],
    8. priority: 100
    9. };
    10. // 设置有序公共事件的结果代码回调
    11. function SetCodeCallBack() {
    12. }
    13. // 设置有序公共事件的结果数据回调
    14. function SetDataCallBack() {
    15. }
    16. // 完成本次有序公共事件处理回调
    17. function FinishCommonEventCallBack() {
    18. }
    19. // 订阅公共事件回调
    20. function SubscribeCallBack(err, data) {
    21. let msgData = data.data;
    22. let code = data.code;
    23. // 设置有序公共事件的结果代码
    24. subscriber.setCode(code, SetCodeCallBack);
    25. // 设置有序公共事件的结果数据
    26. subscriber.setData(msgData, SetDataCallBack);
    27. // 完成本次有序公共事件处理
    28. subscriber.finishCommonEvent(FinishCommonEventCallBack)
    29. // 处理接收到的数据data
    30. ......
    31. // 创建订阅者回调
    32. function CreateSubscriberCallBack(err, data) {
    33. subscriber = data;
    34. // 订阅公共事件
    35. commonEvent.subscribe(subscriber, SubscribeCallBack);
    36. }
    37. // 创建订阅者
    38. commonEvent.createSubscriber(subscribeInfo, CreateSubscriberCallBack);
    39. }
    40. }
    • 在TV端的生命周期内增加aboutToAppear()事件,订阅公共事件,实现代码如下:
    1. async aboutToAppear() {
    2. this.subscribeEvent();
    3. }
  4. 成功连接远端Service服务后,在手机遥控器端进行按钮或者输入操作都会完成一次跨设备通讯,消息的传递是由手机遥控器端的FA传递到TV端的Service服务。这里将连接远端Service和发送消息抽象为ConnectModel,详细代码可查看MainAbility/model/ConnectModel.ets文件中sendMessageToRemoteService()方法。

8.设置遥控器远端事件

手机端应用对TV端能做出的控制有:向上移动、向下移动、向左移动、向右移动、确定、返回、关闭。在手机端按键上增加点击事件,通过sendMessageToRemoteService()的方法发送到TV端Service。TV端根据发送code以及数据,进行数据处理,这里只展示TV端数据处理部分的核心代码:

  1. // code = 1时,将手机遥控端search框内数据同步到TV端
  2. if (code == 1) {
  3. self.text = data.parameters.dataList;
  4. }
  5. // code = 2时,增加选中图片效果
  6. if (code == 2) {
  7. // 如果在图片序号范围内就选中图片,否则不更改
  8. var tmp: number = +data.parameters.dataList;
  9. if ((self.choose + tmp <= 5) && (self.choose + tmp >= 0)) {
  10. self.choose += tmp;
  11. }
  12. }
  13. // code = 3时,播放选中图片对应的视频
  14. if (code == 3) {
  15. self.picItems.forEach(function (item) {
  16. if (item.id == self.choose) {
  17. router.push({
  18. uri: 'pages/VideoPlay',
  19. params: { source: item.video }
  20. })
  21. }
  22. })
  23. }
  24. // code = 4时,回到TV端默认页面
  25. if (code == 4) {
  26. router.push({
  27. uri: 'pages/TVIndex',
  28. })
  29. }
  30. // code = 5时,关闭程序
  31. if (code == 5) {
  32. featureAbility.terminateSelf()
  33. }
  34. // code = 6时,搜索图片名称并增加选中特效
  35. if (code == 6) {
  36. self.picItems.forEach(function (item) {
  37. if (item.name == self.text) {
  38. self.choose = Number(item.id)
  39. }
  40. })
  41. }

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术?不知道需要重点掌握哪些鸿蒙应用开发知识点?而且学习时频繁踩坑,最终浪费大量时间。所以有一份实用的鸿蒙(HarmonyOS NEXT)资料用来跟着学习是非常有必要的。 

这份鸿蒙(HarmonyOS NEXT)资料包含了鸿蒙开发必掌握的核心知识要点,内容包含了ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等)鸿蒙(HarmonyOS NEXT)技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助,有需要的小伙伴自行领取,限时开源,先到先得~无套路领取!!

如果你是一名有经验的资深Android移动开发、Java开发、前端开发、对鸿蒙感兴趣以及转行人员,可以直接领取这份资料

 获取这份完整版高清学习路线,请点击→纯血版全套鸿蒙HarmonyOS学习资料

鸿蒙(HarmonyOS NEXT)最新学习路线

  •  HarmonOS基础技能

  • HarmonOS就业必备技能 
  •  HarmonOS多媒体技术

  • 鸿蒙NaPi组件进阶

  • HarmonOS高级技能

  • 初识HarmonOS内核 
  • 实战就业级设备开发

 有了路线图,怎么能没有学习资料呢,小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙(OpenHarmony )学习手册(共计1236页)鸿蒙(OpenHarmony )开发入门教学视频,内容包含:ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线,请点击→纯血版全套鸿蒙HarmonyOS学习资料

《鸿蒙 (OpenHarmony)开发入门教学视频》

《鸿蒙生态应用开发V2.0白皮书》

图片

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

图片

 《鸿蒙开发基础》

  • ArkTS语言
  • 安装DevEco Studio
  • 运用你的第一个ArkTS应用
  • ArkUI声明式UI开发
  • .……

图片

 《鸿蒙开发进阶》

  • Stage模型入门
  • 网络管理
  • 数据管理
  • 电话服务
  • 分布式应用开发
  • 通知与窗口管理
  • 多媒体技术
  • 安全技能
  • 任务管理
  • WebGL
  • 国际化开发
  • 应用测试
  • DFX面向未来设计
  • 鸿蒙系统移植和裁剪定制
  • ……

图片

《鸿蒙进阶实战》

  • ArkTS实践
  • UIAbility应用
  • 网络案例
  • ……

图片

 获取以上完整鸿蒙HarmonyOS学习资料,请点击→纯血版全套鸿蒙HarmonyOS学习资料

总结

总的来说,华为鸿蒙不再兼容安卓,对中年程序员来说是一个挑战,也是一个机会。只有积极应对变化,不断学习和提升自己,他们才能在这个变革的时代中立于不败之地。 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/知新_RL/article/detail/942927
推荐阅读
相关标签
  

闽ICP备14008679号