鸿蒙开发语言ArkTS及实践

什么是ArkTS

ArkTS是鸿蒙生态的应用开发语言。它在保持TypeScript(简称TS)基本语法风格的基础上,对TS的动态类型特性施加更严格的约束,引入静态类型。同时,提供了声明式UI、状态管理等相应的能力,让开发者可以以更简洁、更自然的方式开发高性能应用

一句话概括,ArkTS是基于TS语言的超集,就像TS是js的超集一样

TS语法介绍 

TS语法类型是JavaScript的超集,通俗的讲,TS对所有变量的使用做了类型限制,并且多了面向对象的用法,比如继承,private ,public关键字等

TS数据类型

布尔类型boolean

let isDone: boolean = false;

数字类型 number 

let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
let binaryLiteral: number = 0b1010;
let octalLiteral: number = 0o744;

 字符串 String 用" 或者'包裹的类型

let name: string = "bob";
name = "smith";

ES6字符模板
let sentence: string = `Hello, my name is ${ name }.

数组类型,有两种定义方式,第一种可以在元素类型后面接上[ ],第二种可以使用数据泛型  

let list: number[] = [1, 2, 3];

let list: Array<number> = [1, 2, 3];

元组类型Tuple(类似于python语法中的元组)

let x: [string, number];
// 初始化元组正确写法
x = ['hello', 10]; // OK
// 初始化元组错误写法
x = [10, 'hello']; // Error
// 元组访问
console.log(x[2].toString()); 

 枚举 enum 

enum Color {Red, Green, Blue}
let c: Color = Color.Green;

我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型 Any  

let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean

没有任何类型 void 

function warnUser(): void {
    console.log("This is my warning message");
}

Null 和 Undefined ,NUll 和UnDefined 分别有各自的类型,为null 和undefined

let u: undefined = undefined;
let n: null = null;

never类型表示的是那些永不存在的值的类型。 例如, never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型

// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
    throw new Error(message);
}

// 推断的返回值类型为never
function fail() {
    return error("Something failed");
}

object表示非原始类型,也就是除numberstringbooleansymbolnullundefined之外的类型 

// object | null 表示联合类型,传null或者 object
declare function create(o: object | null): void;

create({ prop: 0 }); // OK
create(null); // OK

TS定义类

类似于java等面向对象语法,有构造函数,变量等

class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

let greeter = new Greeter("world");

类中的继承和派生,类似于后端语言 

class Animal {
    move(distanceInMeters: number = 0) {
        console.log(`Animal moved ${distanceInMeters}m.`);
    }
}

class Dog extends Animal {
    bark() {
        console.log('Woof! Woof!');
    }
}

const dog = new Dog();
dog.move(10);
dog.bark();

TS装饰器

装饰器(Decorators)为我们在类的声明及成员上通过元编程语法添加标注提供了一种方式,

装饰器是一种特殊类型的声明,它能够被附加到类声明,方法, 访问符,属性或参数上。 装饰器使用 @expression这种形式,expression求值后必须为一个函数,它会在运行时被调用,被装饰的声明信息做为参数传入

// 有一个@sealed装饰器,我们会这样定义sealed函数
function sealed(constructor: Function) {
    Object.seal(constructor);
    Object.seal(constructor.prototype);
}

装饰器工厂

如果我们要定制一个修饰器如何应用到一个声明上,我们得写一个装饰器工厂函数。 装饰器工厂就是一个简单的函数,它返回一个表达式,以供装饰器在运行时调用

function color(value: string) { // 这是一个装饰器工厂
    return function (target) { //  这是装饰器
        // do something with "target" and "value"...
    }
}

关于TS的教程具体请参照TS中文网 ,这里不在一一介绍

ArkTS基础语法

ArkTS中的装饰器和作用

@Component 代表自定义组件
@State修饰的变量,当值发生改变时,会自动刷新
@Entry 装饰自定义组件用作页面的默认入口组件,如加载页面时,将首先创建并呈现装饰的自定义组件,一个页面有且仅有一个Entry组件
@Link 装饰的变量可以和父组件中的@State修饰的变量进行双向绑定,任何一方做的修改都会反映给另外一方

 ArkUI组件库

在ArkTS操作的应用中,UI组件来自ArkUI,基础组件Text,Button,Image,TextInput,容器组件Column,Row,Stack,List,具体详细了解请见ArkUI文档中心

ArkTS自定义组件

将基础组件和容器组件进行融合使用就是自定义组件 使用@component 和struct 修饰的部分为自定义组件,struct为一个单元,可以复用

自定义组件必须定义build方法,在其中进行UI描述

@Component 
struct myDefined{
	// ...
	build{
		//自定义组件必须定义build方法 ,在其中进行UI描述
	}
}

 ArkTS自定义组件生命周期及其回调函数

  • aboutToAppear在创建自定义组件的实例后到执行build函数之前执行,主要作用(可以在此函数中对要展示的数据进行初始化或者可以申请定时器等资源,后续可以用此资源展示)
  • aboutToDisAppear 在实例被销毁时调用,可以在此函数中释放不再使用的资源
  • onPageShow 页面展示
  • onBackPress 返回是点击返回按钮触发的函数(有返回值,true、false,返回true时表示页面自己处理返回逻辑,不进行页面返回,返回false表示由系统处理返回逻辑,默认返回false)
  • onPageHide 在页面消失时的处理逻辑

特此声名:aboutToAppear和aboutToDisAppear ,由于这些回调函数是私有的,系统会自动调用这些函数,不可以手动调用

ArkTS实践(官网案例 待办列表)

实现效果为点击某一事项,替换标签图片、虚化文字,项目官网codelab码云地址gitee源码

 

本地实现注意事项 

  • 注意ArkTS文件的层级,尽可能跟Gitee层级保持一致
  • 资源文件图片等信息,需要复制Gitee中的resource文件夹,否则没有效果,可以选择在官网中直接另存为,因为整体项目较大,不建议直接下载

本地实现效果 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

.NET core 自定义过滤器 Filter 实现webapi RestFul 统一接口数据返回格式

之前写过使用自定义返回类的方式来统一接口数据返回格式&#xff0c;.Net Core webapi RestFul 统一接口数据返回格式-CSDN博客 但是这存在一个问题&#xff0c;不是所有接口会按照定义的数据格式返回&#xff0c;除非每个接口都返回我们自定义的类&#xff0c;这种实现起来不…

集群与分布式的概念及区别

目前在工作中经常接触到集群的概念&#xff0c;通过这篇文章总结一下集群的几种方式以及和分布式对比学习 1.集群&#xff08;Cluster&#xff09; 集群是由多个计算机节点组成的网络&#xff0c;旨在共同提供服务&#xff0c;并确保高性能和高可用性。在高可用集群中&#xf…

CH06_访问数据结构

Visitor 模式 访问者模式&#xff08;Visitor&#xff09;&#xff0c;表示一个作用于某对象结构中的各元素的操作。它使你可以在不改变各元素的类的提前下定义作用于这些元素的新操作。 类图 说明 Visitor&#xff08;访问者&#xff09; Visitor角色负责对数据结构中每一个…

Java_集合进阶Map集合

一、Map集合 1.1 Map概述体系 各位同学&#xff0c;前面我们已经把单列集合学习完了&#xff0c;接下来我们要学习的是双列集合。首先我们还是先认识一下什么是双列集合。 所谓双列集合&#xff0c;就是说集合中的元素是一对一对的。Map集合中的每一个元素是以keyvalue的形式…

Sublime Text 3配置 C# 开发环境

Sublime Text 3配置 C# 开发环境 一、引言二、主要内容1. 初识 Sublime Text 32. 初识 C#3. 接入 .NET Framework3.1 下载 .NET Framework3.2 环境变量配置 4. 配置 C# 开发环境5. 编写 C# 代码6. 运行 C# 代码 三、总结 一、引言 C# 是一种面向对象的编程语言&#xff0c;由微…

php学习02-php标记风格

<?php echo "这是xml格式风格" ?><script language"php">echo 脚本风格标记 </script><% echo "这是asp格式风格" %>推荐使用xml格式风格 如果要使用简短风格和ASP风格&#xff0c;需要在php.ini中对其进行配置&#…

在做题中学习(38):快乐数

202. 快乐数 - 力扣&#xff08;LeetCode&#xff09; 理解&#xff1a;根据定义一共有两种情况 1.最后变为1 2.最后变为环 思路&#xff1a;可以把两个情况都认为有环&#xff0c;第一个是环一直为1 &#xff08;快满指针法&#xff09; 定义一个快指针和慢指针&#xff0c…

前端---后端 跨域?

一、跨域 &#xff1f; 跨域&#xff08;Cross-Origin Resource Sharing&#xff0c;CORS&#xff09;是浏览器的一项安全功能&#xff0c;它用于限制一个域名下的文档如何从另一个不同的域名、端口或协议请求资源。跨域资源共享&#xff08;Cross-Origin Resource Sharing&am…

黑马点评09 秒杀功能总结

1.整体业务流程 1.1 redis判断流程 &#xff08;单线程&#xff09; 1.首先获取订单id和用户id&#xff0c;调用lua脚本进行redis操作&#xff0c;lua内包括 对购买资格/库存充足的判断 、 扣库存下单、发送订单消息到Stream。 2.Stream组成消息队列&#xff0c;有异常自动放到…

【数字图像处理】实验一 图像基本运算

图像基本运算 一、实验内容&#xff1a; 1&#xff0e; 熟悉和掌握利用Matlab工具进行数字图像的读、写、显示等数字图像处理基本步骤。 2&#xff0e; 熟练掌握各种图像点运算的基本原理及方法。 3&#xff0e; 能够从深刻理解点运算&#xff0c;并能够思考拓展到一定的应用领…

项目中webpack优化配置(1)

项目中webpack优化配置 一. 开发效率&#xff0c; 体验 1. DLL&#xff08;开发过程中减少构建时间和增加应用程序的性能&#xff09; 使用 DllPlugin 进行分包&#xff0c;使用 DllReferencePlugin(索引链接) 对 manifest.json 引用&#xff0c;让一些基本不会改动的代码先…

展馆漫游可视化与智慧展厅:开启未来展览新篇章

随着科技的飞速发展&#xff0c;展馆行业也在不断寻求创新和突破。展馆漫游可视化和智慧展厅的出现&#xff0c;为展馆行业带来了全新的发展机遇。本文将围绕这两个主题&#xff0c;探讨它们如何改变传统展览模式&#xff0c;开启未来展览新篇章。 一、展馆漫游可视化&#xff…

Ubuntu 20.4镜像国内地址下载较快

Ubuntu20.04版本比较稳定&#xff0c;部署OJ大都用这个版本。 推荐阿里云镜像点&#xff0c;点进去根据你的电脑版本下载iso后缀那个 ubuntu-releases-20.04安装包下载_开源镜像站-阿里云 下载速度较快 其他版本 http://mirrors.aliyun.com/ubuntu-releases/ 如果使用云服务…

C语言/C++雷霆战机代码(终极版)

#include <stdio.h> #include <easyx.h> #include <time.h> #include <Mmsystem.h> #pragma comment(lib,"winmm.lib") #define WIDTH 600 #define HEIGHT 850 #define bullet_max 5000 //我方飞机子弹最大量 #define enemy_bul_ma…

Instagram账号被封?必须了解的原因与防封技巧

您是否曾因 Instagram 帐户被暂停封禁而感到沮丧&#xff1f;这是一个常见问题&#xff0c;了解您的帐户被暂停的原因以及如何恢复帐户至关重要。 在本文中&#xff0c;我们将深入探讨 Instagram 帐户被封停的常见原因&#xff0c;并探讨重新获得访问权限的步骤。这个方法对于管…

源码订货系统的优势

源码订货系统是一种企业购买后可以获得源代码的订货系统&#xff0c;它可以不受软件厂商的规模、发展而修改和使用。与SaaS订货系统相比&#xff0c;核货宝为您分享源码订货系统的四大优势&#xff1a; 一是开放性&#xff1a;源码订货系统是开源的&#xff0c;用户可以掌握源代…

数据结构---算法的时间复杂度

文章目录 前言计算机重要存储数据结构与算法数据结构概念算法 数据库概念 算法的复杂度时间复杂度概念为什么有时间复杂度大O渐进表示法时间复杂度实例实例1&#xff1a;时间复杂度&#xff1a;O&#xff08;N&#xff09;实例2&#xff1a;这里输入参数是不确定的所以 时间复杂…

期货开平规则(期货交易开平规则解析)

什么是期货开平规则 期货开平规则&#xff0c;简单来说是指期货交易中的开仓和平仓所遵循的一系列规定。具体而言&#xff0c;开仓是指买入或卖出期货合约&#xff0c;建立一个新的持仓&#xff1b;平仓则是指买入或卖出相应数量的期货合约&#xff0c;用以解除原有持仓。开平…

MapReduce编程:Join应用

1. Reduce Join Map 端的主要工作&#xff1a;为来自不同表或文件的 key/value 对&#xff0c;打标签以区别不同来源的记录。然后用连接字段作为key &#xff0c;其余部分和新加的标志作为 value &#xff0c;最后进行输出。 Reduce 端的主要工作&#xff1a;在 Reduce 端…

解决IDEA编译/启动报错:Abnormal build process termination

报错信息 报错信息如下&#xff1a; Abnormal build process termination: "D:\Software\Java\jdk\bin\java" -Xmx3048m -Djava.awt.headlesstrue -Djava.endorsed.dirs\"\" -Djdt.compiler.useSingleThreadtrue -Dpreload.project.path………………很纳…