鸿蒙系统 ARKUI 框架对于分布式计算和请求 API 的实战研究

作者：黎燃

2022-11-21
内蒙古
本文字数：3069 字
阅读完需：约 10 分钟

公共样式类属性

ArkUI 开发框架提供的基本组件直接或间接继承自 CommonMethod。CommonMethod 中定义的属性样式属于公共样式。在本节中，作者将介绍项目类型中最常用的一些样式属性。读者还可以检查 CommonMethod 的源代码以了解其他样式属性。

尺寸设置

设置组件的宽度和高度。默认情况下，使用构件本身的宽度和高度。例如，字符串值“100%”可用于填充父布局。当同时设置构件的尺寸和宽度/高度时，以最后设置的值为准。

export declare class CommonMethod<T> {  width(value: Length): T;  height(value: Length): T;  size(value: SizeOptions): T;}

复制代码

结果如下：

语法和生命周期

组件是 OpenHarmony 页面的最小显示单元。一个页面可以由多个组件组成，也可以仅由一个组件组成。这些组件可以是 ArkUI 开发框架附带的系统组件，例如文本、按钮等，也可以是自定义组件。在本节中，我们将简要介绍自定义组件的语法规范。

定义组件

要自定义组件，必须首先定义其名称并尝试理解其含义。例如，要定义标题栏组件，作者将其命名为 TitleBar。为了让系统知道它是一个组件，您需要使用 @component 修饰符和 struct 关键字来修改它。格式为[@Component struct+Component name]，如下所示：

@Component struct TitleBar {  build() {    // 省略  }}
@Entry @Component struct Index {  build() {    // 省略  }}

复制代码

Struct：表示 TitleBar 是一个结构。如果使用 struct 关键字，则必须实现 build（）方法。否则，编译器将报告一个错误：结构需要生成函数。@Component：表示结构 TitleBar 具有组件化的能力，即可以成为独立的组件。@条目：表示当前组件是页面的总条目。它被简单地理解为页面的根节点。一个页面有并且只有一个 @Entry 修饰符。页面上将仅显示由 @Entry 修改的组件或子组件。📢：禁止自定义组件添加构造函数，否则编译器将报告错误

刷新组件

在使用 struct 关键字装饰 TitleBar 之后，必须实现 build（）方法，该方法符合 Builder 构造函数接口定义，并用于定义组件的声明性 UI 描述。当创建组件或更新组件中的 @State 修饰变量时，系统将自动调用 build（）方法。

@Component struct TitleBar {
  @State count: number = 0;
  build() {    Flex() {      Text("index:" + this.number)      // ……    }    .width('100%')    .height('100%')    .backgroundColor("#aabbcc")  }}

复制代码

再按一次，退出应用

使用第三方应用程序时，我们会遇到单击返回键提示您再次退出应用程序的情况。例如，如果您短时间不按它，您将不会退出应用程序以保留用户。接下来，我们将实现再次单击返回键以退出应用程序的示例。根据页面生命周期的方法，当您点击返回键时，将调用 onBackPress（）方法，因此判断是否是第一次点击。如果是，它将返回 true 并给用户一个提示。如果没有，它将判断两次点击之间的时间间隔。如果间隔小于 2 秒，它将直接退出 APP，否则会给用户提示。此示例重用了第 2 章中的测试代码，如下所示：

import app from '@system.app';
@Entry @Component struct Index {
  private lastExitTime: number = -1;               // 记录点击时间
  @State count: number = 0;                        // 状态数据
  build() {    Stack({alignContent: Alignment.BottomEnd}) {   // 堆叠式布局      Text(this.count.toString())                  // 显示文本        .fontSize(50)                              // 文字大小        .textAlign(TextAlign.Center)               // 居中对齐        .size({width: '100%', height: '100%'})     // 控件大小
      Button('+')                                  // 显示一个+按钮        .size({width: 80, height: 80})             // 按钮大小        .fontSize(50)                              // 按钮文字大小        .onClick(() => {                           // 按钮点击事件          this.count++;                            // count累加，触发build()方法回调        })        .margin(50)    }    .width('100%')    .height('100%')  }

复制代码

上面是自定义组件的语法规范。定制组件具有以下特征：可组合：允许开发人员组合内置组件和其他组件，以及公共属性和方法。可重用：可被其他组件重用，并作为不同父组件或容器中的不同实例使用；有一个生命周期：可以在组件中配置生命周期的回调方法，用于业务逻辑处理；数据驱动更新：可以由状态数据驱动，实现 UI 的自动更新。

实现请求 API

定义 IHttpRequest 接口后，@ohos 可以发出特定的网络请求。net http 模块提供的 API 也可以由开源的第三方库实现，例如 HttpClient。具体的实现可以由读者选择。作者演示了两种方法：系统 API 实现使用系统 API 的方法是直接使用 @ohos。net http 模块提供与 HttpRequest 相关的方法来实现网络请求（不清楚 http 请求的使用的读者可以阅读第 12 章第 2 节），定义 HttpSystem 实现类并实现 IHttpRequest 接口。代码如下：

import http from '@ohos.net.http';
import {IHttpRequest} from "./IHttpRequest"
export class HttpSystem implements IHttpRequest {
  // 请求具体实现类  private httpRequest: http.HttpRequest;
  constructor() {    this.httpRequest = http.createHttp();  }
  public getRequest(): IHttpRequest {    return this;  }
  public doGet(url: string, options?: RequestOptions) {    // 由httpRequest实现具体请求  }
  public doPost(url: string, options?: RequestOptions) {    // 由httpRequest实现具体请求  }
}

复制代码

三方库实现使用三方库的方式实现，就是基于第三方网络库提供的方法实现网络请求，笔者使用 HttpClient 实现（不清楚 HttpClient 使用的读者可阅读第十二章第 6 节的内容），定义 HttpClient 实现类并实现 IHttpRequest 接口，代码如下所示：

import httpClient from '@ohos/httpclient'import TimeUnit from '@ohos/httpclient'
import {IHttpRequest} from "./IHttpRequest"
let httpClientImpl = new httpClient.HttpClient.Builder()  .setConnectTimeout(15, TimeUnit.TimeUnit.SECONDS)  .setReadTimeout(15, TimeUnit.TimeUnit.SECONDS)  .build();
export class HttpClient implements IHttpRequest {
  public getRequest(): IHttpRequest {    return this;  }
  public doGet(url: string, options?: RequestOptions) {    // httpClientImpl具体实现请求  }
  public doPost(url: string, options?: RequestOptions) {    // httpClientImpl具体实现请求  }
}

复制代码

分布式计算

分布式能力是 OpenHarmony 操作系统的核心能力之一。目前，它只支持在统一 LAN 中拉取远程 FA 的能力。在本节中，作者简要介绍了如何在网络中的一台设备上拉取另一台设备并执行协作计算。

分布式设备管理

在 Minimal Calculator 的应用中，分布式设备管理包括四个部分：分布式设备搜索、分布式设备列表弹出窗口、拉取远程设备和分布式数据管理。首先，在分布式网络中搜索设备，然后将搜索到的分布式设备添加到设备列表的弹出窗口中，然后根据用户的选择拉出远程设备，最后同步数据。操作结果样式如下：

ObservedPropertySimple 类结构

ArkUI 开发框架提供的状态管理非常方便使用，代码量也非常简单。对于开发人员来说，简化意味着 ArkUI 开发框架需要在内部实现许多复杂的功能。由于篇幅原因，笔者将不介绍其他类型的国家管理实施。作者简单地整理了以下 states_ mgmt 目录下的状态管理类的结构图。读者可以根据结构图进行其他类型的实现分析。

发布于: 刚刚阅读数: 4

原文链接:【http://xie.infoq.cn/article/244622fce97ef3782c5a4e06f】。文章转载请联系作者。

黎燃

关注

前端工程师 2022-05-06 加入

专注学习分享前端知识。

发布

暂无评论

创作场景

鸿蒙系统 ARKUI 框架对于分布式计算和请求 API 的实战研究

公共样式类属性

尺寸设置

语法和生命周期

定义组件

刷新组件

再按一次，退出应用

实现请求 API

分布式计算

分布式设备管理

ObservedPropertySimple 类结构

黎燃

评论