鸿蒙开发之了解ArkTS

鸿蒙开发者官网  : https://developer.huawei.com/consumer/cn/

开发鸿蒙要用的软件是  DevEco Studio

ArkTS建立在JS和TS的基础之上,扩展了声明式UI开发范式和状态管理,提供更简洁和自然的开发方式。

ArkTS引入了渲染引擎的增强,包括平台无关的自绘制机制、声明式UI后端设计、动态布局等,以提高性能体验。进一步的优化包括代码预编译、高效FFI-Foreign Function Interface、引擎极小化等。ArkTS还构建了跨OS平台的基础设施,以支持不同设备上的部署。

一、TS的基本语法

 一、TS的数据类型

TS在JavaScript的基础上加入了静态类型检查的功能,因此每个变量都有固定的数据类型。

1、基本数据类型

let meg:string = 'hollo world'

let age:numbe = 20

let res:boolean = true

let a:any = 'Jim' // any 不确定类型,可以是任意类型

a = 35

let u:string|number|boolean = 'HM' //union  联合类型,可以是是多个指定类型中的一种

u = 25

2、对象类型

let obj = ['name':'Tom',age:24]

console.log(p.name) //点语法取值

console.log(p['name'])  //键值取值

3、数组Array 

let names:Array<string> = ['Timi','Tom','Jack']

let ages:number[] = [21,22,23]

console.log(names[0]) //下标取值

 二、条件控制

if-else  和switch

let num:number = 20
if (num % 2 === 0) {console.log('是偶数')
}else {console.log('是奇数')
}
let grade:string = 'B'
switch(grade) {case 'A': {console.log('优秀')break}case 'B': {console.log('及格')break}case 'C' : {console.log('不及格')break}default: {console.log('输入有误')break}
}

注意:

在TS中,空字符串、数字0、null、undefined都被认为是false

三、循环

for和while

for(let I = 0 ; I < 10 ; I++) {console.log(i)
}
let i = 10
while(i <= 20) {console.log(i)I++
}

TS为一些内置类型如数组等提供了快捷迭代语法

let names: string[] = ['Jack','Tom',''LiLei]
//for in 迭代器,遍历得到数组下标
for(const i in names) {console.log(names[i])
}//for of 迭代器 ,直接得到元素
for( const n of names) {console.log(n)
}

四、函数

TS通常用function关键字声明函数,支持可选参数、默认参数、箭头函数等特殊语法

//无返回值,void可省略
function sayHello(name: string): void {console.log('你好'+name)
}
sayHello('LiLei')//有返回值
function sum(x:number,y:number):number {return x + y
}
console.log(sum(20,23))//箭头函数
let say = (name:string) => {console.log('hello' + name)
}
say('Jack')//可选参数
function sayHello1(name? : string) {name = name ? name : '陌生人'console.log('你好'+name)
}
sayHello1('Tom')
//默认参数
func sayHello2(name:string = '陌生人') {console.log("你好"+name)
}
sayHello2()

五、面向对象

TS具有面向对象编程的基本语法,例如interface class enum等,具备封装、继承、多态等面向对象基本特征。

1、封装、多态
//定义枚举
enum Msg{suc = '成功'fail = '失败'
}
//定义接口,抽象方法接收枚举
interface A {request(msg:Msg):void
}
//实现接口A
class B implements A {request(msg:Msg):void {console.log('请求结果是:', msg)}
}
//初始化对象
let a:A = new B() 
//调用方法,传递枚举参数
a.request(Msg.suc)
2、继承
//定义矩形类
class Rectangle {//private 定义私有成员变量private width: numberprivate height:number//构造函数constructor(width: number , height: number) {this.width = widththis.height = height}//成员方法public area():number {return this.width * this.height}
}
//定义正方形 继承矩形
class Square extends Rectangle {constructor(side:number) {super(side , side)}
}
let s = new Square(20)
console.log('正方形面积为:',a.area())

六、模块开发

应用复杂时,我们可以把通用功能抽取到单独的ts文件中,每个文件都是一个模块(module),模块能够提高代码复用。

使用export导出,使用import  from导入

假设一个文件rectangle.ts

//定义矩形类,通过export导出
export class Rectangle {//成员变量public width: numberpublic height:number//构造函数constructor(width: number , height: number) {this.width = widththis.height = height}}
//定义工具方法,求面积,通过export导出
export function area(rec : Rectangle): number {return rec.width * rec.height
}

在另一个ts文件中导入,假设一个名为index.ts的文件

//通过import语法导入,from后面写文件的地址
import {Rectangle, area} from './rectangle' //创建Rectangle对象
let rac = new Rectangle(20,10)
//调佣area方法
console.log('面积是:' + area(rac)

二、ArkTS声明式开发范式

使用 DevEco Studio 创建一个demo

@Entry
@Component
struct Index {@State message: string = 'Hello World'build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)}.width('100%')}.height('100%')}
}

1、ArkTS声明式开发范式基本组成

@Entry

@Component  

struct Index { //自定义组件:可复用的UI单元

        @State message: string = 'Hello World'      

   build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)}.width('100%')}.height('100%')}
}  

  1. 装饰器    用来装饰类、结构体、方法以及变量,赋予其特殊的含义,如上述示例中 @Entry 、 @Component 、 @State 都是装饰器。具体而言, @Component 表示这是个自定义组件;@Entry 则表示这是个入口组件;@State 表示组件中的状态变量,此状态变化会引起 UI 变更。
  2. 自定义组件  可用的UI单元可组合其它组件,如上述被 @Component 装饰的 struct Index
  3. UI描述   声明式的方式来描述UI的结构,如上面的build()方法内部的代码块
  4. 内置组件   框架中默认内置的基础和布局组件,可直接被开发者调用,比如上面的Row、Column、Text
  5. 事件方法  用于添加组件对事件的响应逻辑,统一通过事件方法进行设置,如跟随在Text后面的onClick()
  6. 属性方法   用于组件属性的配置,统一通过属性方法进行设置,如fontSize()/width()/height()/fontWeight()等,可通过链式调用的方式设置多项属性。

2、状态管理

          在声明式UI编程框架中,UI是程序状态的运行结果,用户构建了一个UI模型,其中应用的运行时的状态是参数。当参数改变时,UI作为返回结果,也将进行对应的改变。这些运行时的状态变化所带来的UI的重新渲染,在ArkUI中统称为状态管理机制

  • View(UI):UI渲染,一般指自定义组件的build方法和@Builder装饰的方法内的UI描述。

  • State:状态,一般指的是装饰器装饰的数据。用户通过触发组件的事件方法,改变状态数据。状态数据的改变,引起UI的重新渲染。

ArkUI实现:
  • 状态变量:被状态装饰器装饰的变量,改变会引起UI的渲染更新。
  • 常规变量:没有状态的变量,通常应用于辅助计算。它的改变永远不会引起UI的刷新。
  • 数据源/同步源: 状态变量的原始来源,可以同步给不同的状态数据。通常意义为父组件传给子组件的数据。
  • 命名参数机制: 父组件通过指定参数传递给子组件的状态变量,为父子传递同步参数的主要手段。
  • 从父组件初始化: 父组件使用命名参数机制,将指定参数传递给子组件。本地初始化的默认值在有父组件传值的情况下,会被覆盖。如
@Component
struct  MyComponent {@State count: number = 0;build() {}
}@Component 
struct  Parent {build() {Column() {//父组件初始化,覆盖本地定义的默认值MyComponent({count:1})}}
}
页面级变量的状态管理

应用级变量的状态管理

AppStorage是整个UI应用程序状态的中心“数据库”,UI框架会针对应用程序创建单例AppStorage对象,并提供相应的装饰器和接口供应用程序使用。

  • @StorageLink:@StorageLink(name)的原理类似于@Consume(name),不同的是,该给定名称的链接对象是从AppStorage中获得的,在UI组件和AppStorage之间建立双向绑定同步数据。
  • @StorageProp:@StorageProp(name)将UI组件属性与AppStorage进行单向同步,AppStorage中值的更改会更新组件中的属性,但UI组件无法更改AppStorage中的属性值。
  • AppStorage还提供用于业务逻辑实现的API,用于添加、读取、修改和删除应用程序的状态属性,此API所做的更改会导致修改的状态数据同步到UI组件上进行UI更新。
  • PersistentStorage类提供了一些静态方法用来管理应用持久化数据,可以将特定标记的持久化数据链接到AppStorage中,并由AppStorage接口访问对应持久化数据,或者通过@StorageLink装饰器来访问对应key的变量。
  • Environment是框架在应用程序启动时创建的单例对象,它为AppStorage提供了一系列应用程序需要的环境状态属性,这些属性描述了应用程序运行的设备环境。

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

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

相关文章

【机器学习300问】56、什么是自编码器?

一、什么是自编码器&#xff1f; 自编码器&#xff08;Autoencoder&#xff0c;AE&#xff09;本质是一种特殊的神经网络架构。主要用于无监督学习和特征学习任务。它的目标是通过编码然后解码的过程&#xff0c;学会重构其输入数据&#xff0c;试图还原其原始输入的。 当时我学…

信息安全之网络安全防护

先来看看计算机网络通信面临的威胁&#xff1a; 截获——从网络上窃听他人的通信内容中断——有意中断他人在网络上的通信篡改——故意篡改网络上传送的报文伪造——伪造信息在网络上传送 截获信息的攻击称为被动攻击&#xff0c;而更改信息和拒绝用户使用资源的攻击称为主动…

AI智能分析网关智慧食安监管系统方案

3.15晚会刚过不久&#xff0c;淀粉肠的“屈辱”终于得以洗清&#xff0c;但某些品牌奶茶、梅菜扣肉、预制菜等等&#xff0c;生产过程仍是触目惊心。如何提升食品安全管理水平&#xff0c;保障食品从生产到消费环节的质量和安全&#xff1f;TSINGSEE青犀智利用智能分析网关V4Ea…

旺店通·旗舰奇门与金蝶云星空对接集成销售出库单查询连通销售出库新增(WDT 线下销售出库单对接(关联)-ok-不适用)

旺店通旗舰奇门与金蝶云星空对接集成销售出库单查询连通销售出库新增(WDT 线下销售出库单对接&#xff08;关联&#xff09;-ok-不适用) 源系统:旺店通旗舰奇门 慧策最先以旺店通ERP切入商家核心管理痛点——订单管理&#xff0c;之后围绕电商经营管理中的核心管理诉求&#xf…

Nginx(Docker 安装的nginx)配置域名SSL证书

1.首先确保Linux环境上已经安装了docker&#xff08;可参考Linux安装Docker-CSDN博客&#xff09; 2.通过docker 安装nginx&#xff08;可参考Linux 环境安装Nginx—源码和Dokcer两种安装方式-CSDN博客&#xff09; 3.安装SSL证书 3.1 在宿主机中创建证书目录并上传证书&…

使用Docker Compose一键部署前后端分离项目(图文保姆级教程)

一、安装Docker和docker Compose 1.Docker安装 //下载containerd.io包 yum install https://download.docker.com/linux/fedora/30/x86_64/stable/Packages/containerd.io-1.2.6-3.3.fc30.x86_64.rpm //安装依赖项 yum install -y yum-utils device-mapper-persistent-data l…

OpenGL的MVP矩阵理解

OpenGL的MVP矩阵理解 右手坐标系 右手坐标系与左手坐标系都是三维笛卡尔坐标系&#xff0c;他们唯一的不同在于z轴的方向&#xff0c;如下图&#xff0c;左边是左手坐标系&#xff0c;右边是右手坐标系 OpenGL中一般用的是右手坐标系 1.模型坐标系&#xff08;Local Space&…

软件设计师:10-面向对象

一、面向对象 二、对象和消息 属性&#xff1a;也叫成员变量、状态 消息&#xff1a;对象名.方法名&#xff08;传入你想要传递的参数&#xff09; 三、方法重载 方法名相同&#xff08;同名&#xff09;&#xff0c;但是参数个数或者参数类型不同叫方法重载 四、封装…

SpringBoot+Prometheus+Grafana实现应用监控和报警

一、背景 SpringBoot的应用监控方案比较多&#xff0c;SpringBootPrometheusGrafana是目前比较常用的方案之一。它们三者之间的关系大概如下图&#xff1a; 关系图 二、开发SpringBoot应用 首先&#xff0c;创建一个SpringBoot项目&#xff0c;pom文件如下&#xff1a; <…

分布式数据库技术的演进和发展方向

前言 这些年大家都在谈分布式数据库&#xff0c;各大企业也纷纷开始做数据库的分布式改造。那么&#xff0c;所谓的分布式数据库到底是什么&#xff1f;采用什么架构&#xff1f;优势在哪&#xff1f;为什么越来越多企业选择它&#xff1f;分布式数据库技术会向什么方向发展&a…

C/C++ 内存管理

1、C/C内存分布 首先我们来了解在一个程序中&#xff0c;代码主要存储在哪些地方&#xff1b; 1.栈&#xff1a;又叫堆栈&#xff0c;其中一般存储非静态局部变量、函数参数、返回值等&#xff0c;栈的增长是向下的。 2.内存映射段&#xff1a;是高效的 I/O 映射方式&#xff0…

华为2023年年度报告启示:技术工程师应该如何成长?

华为2023年年度报告显示了公司在面对复杂环境与挑战时的稳健发展&#xff0c;以及在技术创新、生态构建、社会责任等方面取得的显著成就。对于技术工程师而言&#xff0c;这份报告不仅是华为战略与成果的全景展示&#xff0c;更是蕴含了对未来技术趋势的洞见以及对工程师职业发…

前端性能优化:掌握解决方案

课程介绍 我们常说性能永远是第一需求&#xff0c;作为一个前端工程师&#xff0c;不管使用什么框架&#xff0c;不管从事什么类型的网站或应用开发&#xff0c;只要是项目被用户使用&#xff0c;性能优化就永远是你需要关注的问题。通常情况下&#xff0c;工程师们在深入了解…

云原生(七)、Kubernetes初学 + 裸机搭建k8s集群

Kubernetes简介 Kubernetes&#xff08;通常简称为K8s&#xff09;是一个开源的容器编排平台&#xff0c;最初由Google设计和开发&#xff0c;现在由Cloud Native Computing Foundation&#xff08;CNCF&#xff09;维护。它旨在简化容器化应用程序的部署、扩展和管理。 Kube…

Unity类银河恶魔城学习记录11-7 p109 Aplly item modifiers源代码

Alex教程每一P的教程原代码加上我自己的理解初步理解写的注释&#xff0c;可供学习Alex教程的人参考 此代码仅为较上一P有所改变的代码 【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili ItemData_Equipment.cs using System.Collections; using System.Collecti…

如何检查电脑的最近历史记录?这里提供详细步骤

如果你怀疑有人在使用你的计算机,并且你想查看他们在做什么,下面是如何查看是否有访问内容的痕迹。 如何检查我的计算机的最近历史记录 要检查计算机的最近历史记录,应该从web浏览器历史记录开始,然后移动到文件。但是,可以修改或删除浏览器历史记录,也可以隐藏Windows…

牛角工具箱源码 轻松打造个性化在线工具箱,附带系统搭建教程

这是一款在线工具箱程序&#xff0c;您可以通过安装扩展增强她的功能 通过插件模板的功能&#xff0c;您也可以把她当做网页导航来使用~ &#x1f38a; 环境要求 PHP > 7.2.5 MySQL > 5.7 fileinfo扩展 使用Redis缓存需安装Redis扩展 去除禁用函数proc_open、putenv、s…

C语言:文件操作

前言&#xff1a;为什么使用文件? 如果没有文件&#xff0c;我们写的程序的数据是存储在电脑的内存中&#xff0c;如果程序退出&#xff0c;内存回收&#xff0c;数据就丢失了&#xff0c;等再次运行程序&#xff0c;是看不到上次程序的数据的&#xff0c;如果要将数据进行持久…

day22.二叉树part08

day22.二叉树part08 235.二叉搜索树的最近公共祖先 原题链接 代码随想录链接 思路&#xff1a;因为本题是二叉搜索树&#xff0c;利用它的特性可以从上往下进行递归遍历树&#xff0c;这里需要理解一点就是如果遍历到的一个节点发现该节点的值正好位于节点p和节点q的值中间…

基于 SymPy 的反函数求解

原文&#xff1a;https://blog.iyatt.com/?p14396 例一 f(x) 2x 3 这个函数很简单&#xff0c;可以看出它的反函数是&#xff08;令 yf(x) &#xff09;&#xff1a;$$x\frac{y-3}{2}$$ 使用 SymPy 求解可以采用这样的思路&#xff1a; 已知函数 f(x)2x3, 令 y f(x), 即构…