系列文章目录

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的语法常识。

TS官网
Playground渠道在线编程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 装修的自定义组件作为页面的 进口，会在页面加载时首要进行烘托。

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的显现。

@State isChecked: boolean = false;

能够运用 if/else 表达式来烘托组件的显现与消失，当判断条件为true时，组建为已完结的状况，图片Icon显现选中图标，反之则为未完结状况，图片Iocn显现已选中状况。
ArkTS供给了 @Builder 装修器，来润饰一个函数，快速生成布局内容，便面重复的UI描绘内容。因为两个Image的完结具有大量重复代码，ArkTS供给了 @Builder 装修器，来润饰一个函数，快速生成布局内容，然后能够防止重复的UI描绘内容。这儿运用 @Bulider 声明晰一个 checkIcon 的函数，参数为url，对应要传给Image的图片路径。

@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 的值来操控其改动。

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的更新。

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）

@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。

ForEach(this.studentList, (item: string) => {
        StudentListItem({ name: item })
      }, (item: string) => JSON.stringify(item))

StudentListPage的完好代码：

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的代码：

export class DataModel {
  private studentList: Array<string> = [
    "丁程鑫",
    "贺峻霖",
    "肖战",
    "成毅",
    "刘耀文",
    "李天泽",
    "马嘉祺",
  ];
  getStudentList(): Array<string> {
    return this.studentList;
  }
}
export default new DataModel();

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

Gitee : MyHarmonyStudy-StudentListPage

GitHub : MyHarmonyStudy-StudentListPage

总结

本文是依据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的开发，究竟艺多不压身。

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

系列文章目录

前言

一、ArkTS与TypeScript

1、声明式UI根本概念

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

3、ArkTS根底常识

（1）、ArkUI开发结构

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

二、ArkTS开发实践

1、自定义组件的组成

2.运用@Component装修的自定义组件

（1）、运用 `@Component` 来装修自定义组件，组成学生列表的Item。在ArkTS中，对组件装备特色与布局办法很简略，支撑链式调用。

（2）、状况：@State

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

3、循环烘托列表数据

总结

作者信息

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

系列文章目录

前言

一、ArkTS与TypeScript

1、声明式UI根本概念

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

3、ArkTS根底常识

（1）、ArkUI开发结构

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

二、ArkTS开发实践

1、自定义组件的组成

2.运用@Component装修的自定义组件

（1）、运用 @Component 来装修自定义组件，组成学生列表的Item。在ArkTS中，对组件装备特色与布局办法很简略，支撑链式调用。

（2）、状况：@State

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

3、循环烘托列表数据

总结

相关文章

Dart 里的类型系统

Flutter 3.16 中带来的更新

openEuler22+GreatSQL+dbops玩转MGR

APM监控系统-网络监控

作者信息

（1）、运用 `@Component` 来装修自定义组件，组成学生列表的Item。在ArkTS中，对组件装备特色与布局办法很简略，支撑链式调用。

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