HarmonyOS应用开发01-ArkTS基础知识

JerryAlexLiang2023-10-23 15:10

系列文章目录

HarmonyOS应用开发01-ArkTS基础知识

前言

"遥遥领先" der~

作为多年的大前端程序开发工作者，就目前的形式，个人浅见，在未来3-5年，移动端依旧是Android系统和iOS系统的天下。不过基于鸿蒙系统的应用开发还是值得我们去花点时间去了解下的，阅读并实践官网的开发文档和实践案例后，我们会发现其编程模式和Android的Jetpack Compose以及基于Dart语言开发Flutter跨平台应用程序非常相似，它们都是声明式的编程方式，非常容易理解。相信有过Compose或者Flutter开发经验的小伙伴去学习HarmonyOS应用开发会非常简单，容易上手。

一、ArkTS与TypeScript

1、声明式UI基本概念

（1）、应用界面是由一个个页面组成，ArkTS是由ArkUI框架提供，用于以声明式开发范式开发界面的语言。

（2）、声明式UI构建页面的过程，其实是组合组件的过程，声明式UI的思想，主要体现在两个方面：

  • 描述UI的呈现结果，而不关心过程
  • 状态驱动视图更新

2、按照官网上的说法，ArkTS是HarmonyOS的主力应用开发语言。

它在TypeScript（简称TS）的基础上，匹配ArkUI框架，扩展了声明式UI、状态管理等相应的能力，让开发者以更简洁、更自然的方式开发跨端应用。

ArkTS、TypeScript和JavaScript之间的关系： JavaScript是一种属于网络的高级脚本语言，已经被广泛用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。 TypeScript 是 JavaScript 的一个超集，它扩展了 JavaScript 的语法，通过在JavaScript的基础上添加静态类型定义构建而成，是一个开源的编程语言。 ArkTS兼容TypeScript语言，拓展了声明式UI、状态管理、并发任务等能力。

TypeScript的语法非常简单，有过Java、Kotlin、Dart等语言开发经验的小伙伴，会非常容易上手。可以在其官网进一步了解TS的语法知识。

3、ArkTS基础知识

（1）、ArkUI开发框架

上面这张图是ArkUI开发框架的整体架构，其中，基于TS扩展的声明式UI范式中所用的语言就是ArkTS。

(2)、ArkTS声明式开发范式

上面这张图是从官网下载下来的一个介绍ArkTS声明式开发范式 的代码示例，UI界面会显示两段文本和一个按钮，当开发者点击按钮时，文本内容会从'Hello World'变为'Hello ArkUI'。

  • 装饰器 用来装饰类、结构体、方法以及变量，赋予其特殊的含义，如上述示例中 @Entry 、 @Component 、 @State 都是装饰器。具体而言， @Component 表示这是个自定义组件； @Entry 则表示这是个入口组件； @State 表示组件中的状态变量，此状态变化会引起 UI 变更。

  • 自定义组件 可复用的 UI 单元，可组合其它组件，如上述被 @Component 装饰的 struct Hello。

  • UI 描述 声明式的方式来描述 UI 的结构，如上述 build() 方法内部的代码块。

  • 内置组件 框架中默认内置的基础和布局组件，可直接被开发者调用，比如示例中的 Column、Text、Divider、Button。

  • 事件方法 用于添加组件对事件的响应逻辑，统一通过事件方法进行设置，如跟随在Button后面的onClick()。

  • 属性方法 用于组件属性的配置，统一通过属性方法进行设置，如fontSize()、width()、height()、color() 等，可通过链式调用的方式设置多项属性。

  • 状态管理 在应用开发中，除了UI的结构化描述之外，还有一个重要的方面：状态管理。如上述示例中，用 @State 装饰过的变量 myText ，包含了一个基础的状态管理机制，即 myText 的值的变化会自动触发相应的 UI 变更 （Text组件）。ArkUI 中进一步提供了多维度的状态管理机制。

二、ArkTS开发实践

接下来会按照官网的实例进行第一次ArkTS的开发实践，基于自己的理解进行一些修改，学习基本知识。

上面两张图就是我们要实现的UI效果和交互逻辑，即要呈现一个学生名单列表，每个Item由一个Icon和一个Name横向组成，当选中某一个Item的时候，Icon要切换成选中图标，另外Name的样式也会发生一些变化。使用ArkTS实现这个学生名单列表的方法基本和Jetpack Compose以及Flutter的开发方式是一样的，下面进行代码拆分。

1、自定义组件的组成

ArkTS 通过 struct 声明组件名，并通过 @Component 和 @Entry 装饰器，来构成一个自定义组件。

使用 @Entry 和 @Component 装饰的自定义组件作为页面的 入口，会在页面加载时首先进行渲染。

typescript 复制代码 
import { StudentListPage } from '../view/StudentListPage';

@Entry
@Component
struct Index {
  build() {
    Column() {
      StudentListPage();
    }
    .width('100%')
    .height('100%')
    .padding('10vp')
    .backgroundColor($r('app.color.page_background'))
  }
}

这个Index使用 @Entry 和 @Component 装饰，所以会在页面加载时首先进行渲染，可以理解为当前页面的入口。

2.使用@Component装饰的自定义组件

如图所示，对列表进行了组件的拆分。

（1）、使用 @Component 来装饰自定义组件，组成学生列表的Item。在ArkTS中，对组件配置属性与布局方法很简单，支持链式调用。

（2）、状态：@State

使用 @State 装饰符改变组件状态，声明式UI的特点就是UI是随数据更改而自动刷新的，我们这里定义了一个类型为 boolean 的变量 isChecked，其被 @State 装饰后，框架内建立了数据和视图之间的绑定，其值的改变影响UI的显示。

typescript 复制代码 
@State isChecked: boolean = false;
  • 可以使用 if/else 表达式来渲染组件的显示与消失，当判断条件为true时，组建为已完成的状态，图片Icon显示选中图标，反之则为未完成状态，图片Iocn显示已选中状态。
  • ArkTS提供了 @Builder 装饰器，来修饰一个函数，快速生成布局内容，便面重复的UI描述内容。由于两个Image的实现具有大量重复代码，ArkTS提供了 @Builder 装饰器，来修饰一个函数，快速生成布局内容，从而可以避免重复的UI描述内容。这里使用 @Bulider 声明了一个 checkIcon 的函数，参数为url，对应要传给Image的图片路径。
typescript 复制代码 
@Builder checkIcon(icon: Resource) {
    Image(icon)
      .objectFit(ImageFit.Contain)
      .width($r('app.float.checkbox_width'))
      .height($r('app.float.checkbox_height'))
      .margin($r('app.float.checkbox_margin'))
  }
  • 字体使用了 三目运算符 来根据状态变化修改其透明度和文字样式，如opacity是控制透明度，decoration是文字是否有划线。通过 isChecked 的值来控制其变化。
typescript 复制代码 
Row() {
      if (this.isChecked) {
        this.checkIcon($r('app.media.ic_checked'))
      } else {
        this.checkIcon($r('app.media.ic_unchecked'))
      }

      Text(this.name)
        .fontColor(this.isChecked ? Color.Red : Color.Black)
        .fontSize(this.isChecked ? $r('app.float.item_checked_font_size') : $r('app.float.item_font_size'))
        .fontWeight(500)
        .opacity(this.isChecked ? 0.5 : 1.0)
        .decoration({ type: this.isChecked ? TextDecorationType.LineThrough : TextDecorationType.None })
    }
  • 在组件Row上添加 onClick 点击事件，根据 isChecked 状态的更改来触发UI的更新。
typescript 复制代码 
Row() {

    ...
    
    .borderRadius(22)
    .backgroundColor($r('app.color.start_window_background'))
    .width('100%')
    .height($r('app.float.list_item_height'))
    .onClick(() => {
      this.isChecked = !this.isChecked;
    })

（3）、StudentListItem 自定义组件完整代码（Item）

typescript 复制代码 
@Component
export default struct StudentListItem {
  @State isChecked: boolean = false;
  private name?: string;

  @Builder checkIcon(icon: Resource) {
    Image(icon)
      .objectFit(ImageFit.Contain)
      .width($r('app.float.checkbox_width'))
      .height($r('app.float.checkbox_height'))
      .margin($r('app.float.checkbox_margin'))
  }

  build() {
    Row() {
      if (this.isChecked) {
        this.checkIcon($r('app.media.ic_checked'))
      } else {
        this.checkIcon($r('app.media.ic_unchecked'))
      }

      Text(this.name)
        .fontColor(this.isChecked ? Color.Red : Color.Black)
        .fontSize(this.isChecked ? $r('app.float.item_checked_font_size') : $r('app.float.item_font_size'))
        .fontWeight(500)
        .opacity(this.isChecked ? 0.5 : 1.0)
        .decoration({ type: this.isChecked ? TextDecorationType.LineThrough : TextDecorationType.None })
    }
    .borderRadius(22)
    .backgroundColor($r('app.color.start_window_background'))
    .width('100%')
    .height($r('app.float.list_item_height'))
    .onClick(() => {
      this.isChecked = !this.isChecked;
    })
  }
}

3、循环渲染列表数据

ForEach基本使用中，只需要了解 要渲染的数据 以及要生成的 UI内容 两个部分，例如这里要渲染的数组为以上的几个学生名单，要渲染的内容是 StudentListItem 这个自定义组件，也可以是其他内置组件。

下面这张图是从官网上拷贝过来的，很清晰的描述了ForEach基本使用方式。

StudentListItem 这个自定义组件中，每一个 StudentListItem 要显示的文本参数 name 需要外部传入，参数传递使用 花括号 的形式，用 name 接受数组内的内容项item。

typescript 复制代码 
ForEach(this.studentList, (item: string) => {
        StudentListItem({ name: item })
      }, (item: string) => JSON.stringify(item))

StudentListPage的完整代码：

typescript 复制代码 
import DataModel from '../viewmodel/DataModel';
import StudentListItem from './StudentListItem';

@Component
export struct StudentListPage {
  private studentList: Array<string> = [];

  aboutToAppear() {
    this.studentList = DataModel.getStudentList();
  }

  build() {
    Column({ space: 16 }) {
      Text($r("app.string.Student_List_Title"))
        .fontSize('28fp')
        .fontWeight(FontWeight.Bold)
        .lineHeight('33vp')
        .width('100%')
        .margin({
          top: '24vp',
          bottom: '12vp',
        })
        .textAlign(TextAlign.Center)

      ForEach(this.studentList, (item: string) => {
        StudentListItem({ name: item })
      }, (item: string) => JSON.stringify(item))
    }
    .width('100%')
    .height('100%')
    .backgroundColor($r('app.color.page_background'))
  }
}

在组件生命周期 aboutToAppear() 中去初始化加载数据。

加载数据的Model的代码：

typescript 复制代码 
export class DataModel {
  private studentList: Array<string> = [
    "丁程鑫",
    "贺峻霖",
    "肖战",
    "成毅",
    "刘耀文",
    "李天泽",
    "马嘉祺",
  ];

  getStudentList(): Array<string> {
    return this.studentList;
  }
}

export default new DataModel();

本文中Demo的完整代码链接：

Gitee : MyHarmonyStudy-StudentListPage

GitHub : MyHarmonyStudy-StudentListPage

总结

例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。

本文是根据HarmonyOs官网进行学习阅读 ArkTS开发语言介绍 基本课程的阅读笔记，以及实现了一个学生名单列表的简单页面的Demo样例 StudentListPage ，实现效果是使用 ForEach 实现了一个List列表，每个Item中使用了 Row 来实现横向布局，Row 中嵌套了 Icon 内置组件和 Text 内置组件，根据状态装饰符 @State 装饰的bool布尔变量 isChecked 值的改变，结合 if/else 表达式 、三目运算符 等来修改 Icon 和 Text 组件的UI，其中又实用了 ArkTS 提供的 @Builder 装饰器，来修饰一个函数，快速生成布局内容，便面重复的UI描述内容。

整体来说，HramonyOS 使用 ArkTS 声明式语言的开发方式来描述 UI，这和 Jetpack Compose 开发、Flutter 的 Dart语言 跨平台开发、以及iOS的Swift开发方式非常相似，尤其组件名称和声明方式和Compose、Flutter非常相似，如果有过这几种系统、语言开发经验，上手HarmonyOS的ArkTS开发应该会很快。 虽然现在工作不是全部时间在Coding上了，但是自己在技术上还是要有所坚持，后续会抽时间继续学习HarmonyOS的开发，毕竟艺多不压身。

相关推荐
轻口味44 分钟前
【每日学点鸿蒙知识】沙箱目录、图片压缩、characteristicsArray、gm-crypto 国密加解密、通知权限
pytorch·华为·harmonyos
xo198820114 小时前
鸿蒙人脸识别
redis·华为·harmonyos
塞尔维亚大汉5 小时前
【OpenHarmony】 鸿蒙 UI开发之CircleIndicator
harmonyos·arkui
BisonLiu5 小时前
华为仓颉鸿蒙HarmonyOS NEXT仓颉原生数据网络HTTP请求（ohos.net.http）
harmonyos
BisonLiu5 小时前
华为仓颉鸿蒙NEXT原生加解密算法库框架
harmonyos
变色龙云5 小时前
网页生成鸿蒙App
华为·harmonyos
BisonLiu5 小时前
华为仓颉鸿蒙HarmonyOS NEXT仓颉原生ohos.request（上传下载）
harmonyos
s_daqing5 小时前
华为手机鸿蒙4.2连接不上adb
华为·智能手机·harmonyos
Lucky me.6 小时前
鸿蒙开发使用axios请求后端网络服务出现该错误
华为·harmonyos
_Shirley6 小时前
鸿蒙设置app更新跳转华为市场
android·华为·kotlin·harmonyos·鸿蒙
热门推荐
0119个Web前端交互式3D JavaScript框架和库02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04RAG 实践- Ollama+RagFlow 部署本地知识库05【一文读懂】NTN（非地面网络）技术介绍06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07ZZ038 物联网应用与服务赛题第J套08组基轨迹建模 GBTM的介绍与实现（Stata 或 R）09Docker 夺命连环 15 问10VSCode插件 —— Cody AI （免费AI助手！）