鸿蒙开发之了解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: number
    private height:number
    //构造函数
    constructor(width: number , height: number) {
        this.width = width
        this.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: number
    public height:number
    //构造函数
    constructor(width: number , height: number) {
        this.width = width
        this.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提供了一系列应用程序需要的环境状态属性,这些属性描述了应用程序运行的设备环境。

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

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

相关文章

centos7 linux下yum安装redis

安装redis 1.检查是否有redis yum 源 yum install redis2.下载fedora的epel仓库 yum install epel-release3.安装redis数据库 yum install redis4.安装完毕后&#xff0c;使用下面的命令启动redis服务 # 启动redis service redis start# 停止redis service redis stop# 查…

UOS、Linux下的redis的详细部署流程(适用于内网)

提示&#xff1a;适用于Linux以及UOS等内外网系统服务器部署。 文章目录 一.上传离线包二.部署基本环境三.解压并安装redis四.后台运行redis五.uos系统可能遇到的问题六.总结 一.上传离线包 1.自己去Redis官网下载适配自己部署系统的redis安装包。 2.通过文件传输工具&#xf…

精酿啤酒屋:畅饮与文化的交汇点

在城市的繁华之中&#xff0c;Fendi Club啤酒屋犹如一颗璀璨的明珠&#xff0c;吸引着无数寻求文化与享受的人们。它不仅仅是一个提供美酒佳肴的地方&#xff0c;更是一个文化和社交的交汇点。 走进Fendi Club&#xff0c;你会被它与众不同的环境所吸引。暗色调的装饰风格&…

Python机器学习赋能GIS:地质灾害风险评价的新方法论

地质灾害是指全球地壳自然地质演化过程中&#xff0c;由于地球内动力、外动力或者人为地质动力作用下导致的自然地质和人类的自然灾害突发事件。由于降水、地震等自然作用下&#xff0c;地质灾害在世界范围内频繁发生。我国除滑坡灾害外&#xff0c;还包括崩塌、泥石流、地面沉…

NO11 蓝桥杯单片机之DS18B20数字温度计

DS18B20数字温度计这个模块和以往单片机学习的模块可能不同&#xff0c;这里还要知道其头文件&#xff08;.h&#xff09;和.c文件代码的理解。 具体这个温度计是怎么实现检测温度的&#xff0c;呃呃呃呃呃这可能就要去查阅专业资料&#xff0c;涉及的知识体系应该很庞大&…

ABNDP: Co-optimizing Data Access and Load Balance in Near-Data Processing——论文泛读

ASPLOS 2023 Paper 论文阅读笔记整理 问题 近数据处理&#xff08;NDP&#xff09;是一种很有前途的体系结构范式&#xff0c;可以解决数据密集型应用程序的内存墙挑战。基于3D堆叠存储器的典型NDP系统包含大量并行处理单元&#xff0c;每个并行处理单元都可以访问其本地存储…

YOLOv9改进策略:block优化 | SEAM提升小目标遮挡物性能

&#x1f4a1;&#x1f4a1;&#x1f4a1;本文改进内容&#xff1a;SEAM提升小目标遮挡物性能&#xff0c;在多个数据集得到很好的验证 改进结构图如下&#xff1a; YOLOv9魔术师专栏 ☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️☁️ ☁️☁️☁️…

Github实现push触发自动构建(包括提交代码到另一个仓库中和发布npm)

将指定内容自动更新到另一个代码仓库中 登录https://github.com&#xff0c;创建Personal access token&#xff1a; &#xff08;1&#xff09;github右上角&#xff0c;点击头像&#xff0c;进入Settings > Developer settings > Personal access tokens 下面的Tokens …

一名00后程序员初次使用低代码开发平台的感受

前言 大家好&#xff0c;我是小代&#xff0c;一名00后的Java后端开发工程师。我热爱编程&#xff0c;希望通过写博客来分享我的学习经验和心得。最近&#xff0c;我加入了一家专注于低代码开发平台的公司&#xff0c;这里的技术挑战和新颖性让我决定开始我的博客之旅。 工作…

3.1 SQL概述

SQL&#xff08;Structured Query Language&#xff09; 结构化查询语言&#xff0c;是关系数据库的标准语言 SQL是一个通用的、功能极强的关系数据库语言 功能&#xff1a;查询&#xff0c;数据库模式创建&#xff0c;数据库数据的插入与修改&#xff0c;数据库完整性、安全…

影响欧美货币对因素?fpmarkets提醒如何避免陷阱

欧元兑美元汇率不仅取决于美国经济数据&#xff0c;还取决于欧洲央行的报告。 美国经济数据不仅包括美联储利率和美国就业报告&#xff0c;还有美国石油储备、汽油储备和页岩油钻井平台数量的报告。fpmarkets发现更谨慎的投资者还会分析失业数据、平均时薪变化这些更细致的数据…

1.使用eNSP绘制拓扑图实训

1&#xff0e;实训目的 掌握使用eNSP绘制拓扑图的方法。 2&#xff0e;应用环境 某企业需要提升自己的网络环境&#xff0c;为了保证项目顺利的实施&#xff0c;需要使用eNSP事先绘制拓扑图。 3&#xff0e;实训设备 安装有eNSP的计算机。 4&#xff0e;实训内容 按照设…

矿场设备远程监控解决方案

矿场设备远程监控解决方案 在现代工业智能化进程中&#xff0c;针对矿场设备远程监控的解决方案显得尤为重要。这一方案旨在通过集成先进的信息技术与物联网技术&#xff0c;实现对矿场各类设备的实时、精准、高效的远程监控和管理&#xff0c;从而优化生产效率&#xff0c;降…

WHM中启用FTP功能

WHM面板上FTP功能默认是禁用的&#xff0c;我们在创建完cPanel账户之后&#xff0c;用到FTP去登录的时候会发现登录受限&#xff0c;这个时候可以去WHM面板上启用&#xff0c;这边以Hostease的独立服务器并且购买了cPanel面板为例&#xff0c;步骤如下&#xff1a; 1.先登陆WH…

what is apache?

Apache 通常指 Apache Software Foundation (ASF) 或 Apache HTTP Server&#xff0c;两者都是计算机软件领域的重要实体。 Apache 软件基金会 (ASF)&#xff1a;Apache 软件基金会是一个开发开源软件项目的非营利组织。它为涵盖软件开发各个方面的广泛项目提供支持&#xff0c…

01背包-动态规划

01背包 易知状态转移方程为&#xff1a; dp[i][j] max(dp[i-1][j],dp[i-1][j-v[i]]w[i]) 代码 N,V map(int,input().split()) v, w [0],[0] # 体积v&#xff0c;价值w for i in range(N):a list(map(int,input().split()))v.append(a[0]) # 体积viw.append(a[1]) # 价值w…

【牛客】【刷题节】美团2024届秋招笔试第一场编程真题

1.小美的外卖订单【简单题】 题意理解&#xff1a; 这道题是简单题&#xff0c;主要是一个逻辑实现和判断的问题。但是简单题一般喜欢加一点小障碍&#xff0c;所以读题的时候就要比较注意一些约束条件。就比如这道题&#xff1a;过了15/20个测试用例&#xff0c;出现error, 当…

基于ssm的社区文化宣传网站论文

摘 要 随着科学技术的飞速发展&#xff0c;社会的方方面面、各行各业都在努力与现代的先进技术接轨&#xff0c;通过科技手段来提高自身的优势&#xff0c;社区文化宣传网站当然也不能排除在外。社区文化宣传网站是以实际运用为开发背景&#xff0c;运用软件工程开发方法&…

奇舞周刊第523期:来自 rust 生态的强烈冲击?谈谈 Leptos 在语法设计上的精妙之处...

奇舞推荐 ■ ■ ■ 来自 rust 生态的强烈冲击&#xff1f;谈谈 Leptos 在语法设计上的精妙之处 过去很长一段时间&#xff0c;前端框架们都在往响应式的方向发展。同时又由于 React hooks 的深远影响&#xff0c;函数式 响应式成为了不少前端心中最理想的前端框架模样。Solid …

语音情感分类(1)简单可运行项目(附代码)

1.目标 题主最开始是想做一个音乐情感分类的模型&#xff0c;但是查阅相关文献发现这个范围太大了&#xff0c;音乐情感特征包括文本&#xff0c;音频&#xff0c;甚至有的还有画面&#xff0c;是一个多模态的范畴。所以退而求其次&#xff0c;找了一个接近的语音情感分类来学…