HarmonyOS应用开发-ArkTS基础知识

作者:杨亮Jerry

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

虽然现在工作不是全部时间在Coding上了,但是自己在技术上还是要有所坚持,后续会抽时间继续学习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 装饰的自定义组件作为页面的 入口,会在页面加载时首先进行渲染。

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();

总结

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

整体来说,HramonyOS 使用 ArkTS 声明式语言的开发方式来描述 UI,这和 Jetpack Compose 开发、FlutterDart语言 跨平台开发、以及iOS的Swift开发方式非常相似,尤其组件名称和声明方式和Compose、Flutter非常相似,如果有过这几种系统、语言开发经验,上手HarmonyOS的ArkTS开发应该会很快。

虽然现在工作不是全部时间在Coding上了,但是自己在技术上还是要有所坚持,后续会抽时间继续学习HarmonyOS的开发,毕竟艺多不压身。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/138956.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【洛谷 P5019】[NOIP2018 提高组] 铺设道路 题解(模拟+双指针)

[NOIP2018 提高组] 铺设道路 题目背景 NOIP2018 提高组 D1T1 题目描述 春春是一名道路工程师&#xff0c;负责铺设一条长度为 n n n 的道路。 铺设道路的主要工作是填平下陷的地表。整段道路可以看作是 n n n 块首尾相连的区域&#xff0c;一开始&#xff0c;第 i i i …

【大学视听说上】网络学习计划清单

每单元建议学习时长为约2小时&#xff0c;每2-3周完成一个单元 视听说1: Online Self-Study Assignment (U校园) Week 2-9 Unit 3 3-2Sharing: Practice 2, 3, 4, 5 3-3 Listening: Use the skills 3, 4 3-4 Viewing: View it 1, 2 3-8 More practice in listening 3-10 …

MYSQL---基础篇

一、数据库操作 1.创建数据库&#xff1a;CREATE DATABASE db_test1&#xff1b; 2.使用数据库&#xff1a;use 数据库名&#xff1b; 3.删除数据库&#xff1a;DROP DATABASE [IF EXISTS] db_name; 4.创建表&#xff1a;CREATE TABLE table_name ( field1 datatype, field2…

win环境Jenkins高级配置各种插件和启动jar包

今天分享Jenkins高级配置各种插件&#xff0c;在看此篇之前必须先了解上一篇博客内容&#xff0c;因为此篇是在上篇的基础上完善的&#xff1a; 一、git仓库的多分支选择 想要多分支选择部署&#xff0c;需要全局安装Git parameter 插件 1、点击入口 来到 2、点击进入 安装一…

python flask_restful “message“: “Failed to decode JSON object: None“

1、问题表现 "message": "Failed to decode JSON object: None"2、出现的原因 Werkzeug 版本过高 3、解决方案 pip install Werkzeug2.0解决效果 可以正常显示json数据了 {"message": {"rate": "参数错误"} }

深入理解JVM虚拟机第二十三篇:详解JVM当中的栈顶缓存技术

大神链接:作者有幸结识技术大神孙哥为好友,获益匪浅。现在把孙哥视频分享给大家。 孙哥链接:孙哥个人主页 作者简介:一个颜值99分,只比孙哥差一点的程序员 本专栏简介:话不多说,让我们一起干翻JVM 本文章简介:话不多说,让我们讲清楚JVM当中与操作数栈相关的字节码指令…

rust 闭包

文章目录 闭包使用闭包来简化代码传统函数实现 闭包实现闭包的类型推导结构体中的闭包捕获作用域中的值三种 Fn 特征闭包作为函数返回值 闭包 闭包是一种匿名函数&#xff0c;它可以赋值给变量也可以作为参数传递给其它函数&#xff0c;不同于函数的是&#xff0c;它允许捕获调…

【m98】webrtc vs2017构建带符号的debug库

调试有符号 调试 无符号 试试exe不输出到独立的文件? -】 直接输出到sln下面

Semantic Kernel 学习笔记1

1. 挂代理跑通openai API 2. 无需魔法跑通Azure API 下载Semantic Kernel的github代码包到本地&#xff0c;主要用于方便学习python->notebooks文件夹中的内容。 1. Openai API&#xff1a;根据上述文件夹中的.env.example示例创建.env文件&#xff0c;需要填写下方两个内…

aws亚马逊云:置以使用 Amazon EC2!!!

完成本部分中的任务&#xff0c;以便为首次启动 Amazon EC2 实例进行设置&#xff1a; 注册一个 AWS 账户 创建管理用户 创建密钥对 创建安全组 完成后&#xff0c;您将准备好学习 Amazon EC2 入门教程。 注册一个 AWS 账户 如果您还没有 AWS 账户&#xff0c;请完成以下…

【神经网络】GAN:生成对抗网络

GAN&#xff1a;生成对抗网络 Generator&#xff08;生成器&#xff09;概念 和传统的神经网络不同&#xff0c;Generator除了接受x的输入之外&#xff0c;还会接受一个简单的分布作为z进行输入&#xff0c;从而使得网络的输出也是一个复杂的分布 为什么输出需要时一个分布呢…

2-CentOS7.9下安装docker

默认情况下,CentOS7.9下有两种方法可以安装docker,分别是在线安装docker和离线安装docker(伪离线,最后还是需要网络支持) 1.环境信息 HostNameIPAddressOS VersionDocker VersionNotecentos79172.20.10.12CentOS Linux release 7.9.2009 (Core)Docker version 23.0.6, buil…

VScode + opencv(cmake编译) + c++ + win配置教程

1、下载opencv 2、下载CMake 3、下载MinGW 放到一个文件夹中 并解压另外两个文件 4、cmake编译opencv 新建文件夹mingw-build 双击cmake-gui 程序会开始自动生成Makefiles等文件配置&#xff0c;需要耐心等待一段时间。 简单总结下&#xff1a;finish->configuring …

Linux的make和Makefile

目录 一、 介绍二、快速使用三、依赖关系和依赖方法四、语法 一、 介绍 1、makefile带来的好处就是——“自动化编译”&#xff0c;一旦写好&#xff0c;只需要一个make命令&#xff0c;整个工程完全自动编译&#xff0c;极大的提高了软件开发的效率。 2、make是一个命令工具&…

设计模式——适配器模式(Adapter Pattern)+ Spring相关源码

文章目录 一、适配器模式定义二、例子2.1 菜鸟教程例子2.1.1 定义两个不兼容的播放接口MediaPlayer 、AdvancedMediaPlayer2.1.2 定义AdvancedMediaPlayer两个实现类VlcPlayer 、Mp4Player2.1.3 定义适配器MediaAdapter2.1.4 定义AudioPlayer 并使用MediaAdapter2.1.5 使用 2.2…

Python异常处理:三种不同方法的探索与最佳实践

Python异常处理&#xff1a;三种不同方法的探索与最佳实践 前言 本文旨在探讨Python中三种不同的异常处理方法。通过深入理解各种异常处理策略&#xff0c;我们可以更好地应对不同的编程场景&#xff0c;选择最适合自己需求的方法。 异常处理在编程中扮演着至关重要的角色。合…

Win10共享打印机,别人连接不上出现无法连接到打印机错误码0x0000011b

环境&#xff1a; Win10 专业版 惠普L1119 问题描述&#xff1a; Win10共享打印机&#xff0c;别人连接不上出现无法连接到打印机错误码0x0000011b 解决方案&#xff1a; 1.打开我这台电脑的注册表找到 HKEY_LOCAL_MACHINE\System\CurrentControlSet\Control\Print在右侧…

JVM之类加载器

文章目录 版权声明类加载器类加载器的分类启动类加载器拓展类加载器&应用程序类加载器 双亲委派机制解决三个问题 打破双亲委派机制自定义类加载器案例演示线程上下文类加载器案例梳理OSGi模块化 版权声明 本博客的内容基于我个人学习黑马程序员课程的学习笔记整理而成。我…

http客户端简单demo

socket.h头文件 #pragma once #include <iostream> #include <cstring> #include <sys/socket.h> #include <netinet/in.h> #include <arpa/inet.h> #include <unistd.h> #include <string> using std::string;namespace MySocket …

KVM虚拟机迁移原理与实践

虚拟机迁移 迁移(migration)包括系统整体的迁移和某个工作负载的迁移&#xff0c;系统整体迁移是将系统上的所有软件&#xff0c;包括操作系统&#xff0c;完全复制到另一台物理硬件机器上&#xff0c;而工作负载迁移仅仅迁移特定的工作负载。 虚拟化技术的出现&#xff0c;丰…