鸿蒙开发之了解ArkTS

news2024/11/15 6:40:44

鸿蒙开发者官网  : 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提供了一系列应用程序需要的环境状态属性,这些属性描述了应用程序运行的设备环境。

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

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

相关文章

第 1 章.提示词:开启AI智慧之门的钥匙

什么是提示词&#xff1f; 提示词&#xff0c;是引导语言模型的指令&#xff0c;让用户能够驾驭模型的输出&#xff0c;确保生成的文本符合需求。 ChatGPT&#xff0c;这位文字界的艺术大师&#xff0c;以transformer架构为基石&#xff0c;能轻松驾驭海量数据&#xff0c;编织…

office办公技能|word中的常见使用问题解决方案2.0

一、设置多级列表将表注从0开始&#xff0c;设置为从1开始 问题描述&#xff1a;word中插入题注&#xff0c;出来的是表0-1&#xff0c;不是1-1&#xff0c;怎么办&#xff1f; 写论文时&#xff0c;虽然我设置了“第一章”为一级标题&#xff0c;但是这三个字并不是自动插入的…

【Docker】Docker安全与最佳实践:保护你的容器化应用程序

欢迎来到英杰社区&#xff1a; https://bbs.csdn.net/topics/617804998 欢迎来到阿Q社区&#xff1a; https://bbs.csdn.net/topics/617897397 &#x1f4d5;作者简介&#xff1a;热爱跑步的恒川&#xff0c;致力于C/C、Java、Python等多编程语言&#xff0c;热爱跑步&#xff…

GEE显示研究区sentinel-2每年可用影像

第一次使用GEE&#xff0c;用了别人的代码&#xff0c;想查看每年影像可用数量&#xff0c;但是老是报错&#xff0c;说是null geometry&#xff0c;之前我是用GAMMA软件导出的kml文件&#xff0c;后面在arcgis自己勾画了sho文件&#xff0c;线类型&#xff0c;然后我就在想会不…

AI 工具到底要怎么用,老板才满意?

AI 大模型&#xff08;GPT-3.5&#xff09;从问世到现在广泛应用&#xff0c;已经一年多时间&#xff0c;去年 8 月&#xff0c;我们曾经探讨过“有了 AI 大模型&#xff0c;人工客服就没用了&#xff1f;”这个话题&#xff0c;彼时百模大战如火如荼&#xff0c;AI 创业公司风…

Vant Weapp小程序 van-uploader 文件上传点击无反应,删除无反应

Vant Weapp 1.0 版本开始支持van-uploader组件&#xff0c;请先确认好版本号和引用路径正确&#xff01;&#xff01; <van-uploader file-list"{{ fileList }}" deletable"{{ true }}" />1. 上传无反应 微信小程序用了van-uploader&#xff0c;但是…

kubernetes-k9s一个基于Linux 终端的集群管理工具

效果预览 下载 github 版本 此文档使用的版本是 v0.32.4&#xff0c;下载地址&#xff1a; https://github.com/derailed/k9s/releases/download/v0.32.4/k9s_linux_amd64.rpm 安装 rpm -ivh k9s_linux_amd64.rpm使用 启动 终端直接执行命令 k9s k9s基本操作 1 选择目…

进程状态究竟是什么?在Linux操作系统中具体存在哪些进程状态?

进程状态究竟是什么&#xff1f;在Linux操作系统中具体存在哪些进程状态&#xff1f; 前言一、操作系统中的进程状态1.1 运行状态1.2 阻塞状态和唤醒1.3 挂起状态 二、Linux操作系统中具体进程状态Linux中的进程状态种类2.1 R运行状态&#xff08;running&#xff09;2.2 前台进…

#GIT|Git Flow#Gitflow工作流程

Gitflow是一种使用功能分支和多个主分支的Git分支模型&#xff0c;它适用于有预定发布周期的项目&#xff0c;也适用于DevOps最佳实践中的持续交付。这个工作流程不会添加任何新的概念或命令&#xff0c;而是为不同的分支分配了非常具体的角色&#xff0c;并定义了它们应该如何…

什么是正向代理和反向代理?

从字面意思上看&#xff0c;代理就是代替处理的意思&#xff0c;一个对象有能力代替另一个对象处理某一件事。 代理&#xff0c;这个词在我们的日常生活中也不陌生&#xff0c;比如在购物、旅游等场景中&#xff0c;我们经常会委托别人代替我们完成某些任务。在技术领域&#…

官宣子品牌艾荷,坚定数字化赋能,鸿雁2024新春发布会助推40多年央企品牌焕新升级

3月25日&#xff0c;一场以“春江水暖雁先飞”为主题的2024鸿雁电器智能物联战略及新品发布会在杭州盛大召开。鸿雁电器总裁王米成、副总裁吴明、副总裁夏晓衍、市场部总经理梁彩雷、五金水暖渠道部总经理刘亮、灯饰与智能家居渠道部总经理王育炳等公司领导出席&#xff0c;以及…

SpringMvc之映射器HandlerMapping

简介 在springmvc的处理流程中&#xff0c;第一步就是查询请求对应的映射器&#xff0c;然后组装成处理器链处理请求&#xff0c;本文意在梳理该过程 重要实现 HandlerMapping是一个接口&#xff0c;该接口用于通过HttpServletRequest寻找对应的处理器&#xff0c;接口介绍如下…

super的使用细节

1、super的使用细节 2、super和this的比较

Git_.gitignore文件相关知识

.gitignore 作用&#xff1a;指明不对哪些文件进行版本控制。 应当忽略哪些文件&#xff1f; 系统或软件自动生成的文件编译时产生的中间文件和结果文件运行时产生的日志文件&#xff0c;临时文件和缓存文件涉及身份&#xff0c;密码&#xff0c;口令&#xff0c;秘钥等敏感…

Spring Boot | SpringBoo“开发入门“

目录 : 1.SpringBoot的“介绍”SpringBoot”概述” &#xff1a;SpringBoot”简介“SpringBoot的“优点” 2. SpringBoot入门程序环境准备使用 “Maven”方式构建SpringBoot 项目使用“Spring Initializr”方式构建Spring Boot 项目 3. “单元测试” 和“热部署”单元测试热部署…

银行单元化架构体系介绍

1.背景 自2018年以来&#xff0c;受“华为、中兴事件”影响&#xff0c;我国科技受制于人的现状对国家稳定和经济发展都提出了严峻考验。目前我国IT架构体系严重依赖国外产品&#xff0c;金融行业尤其明显。大部分传统银行的关键账务系统都架设在IBM的大型机、小型机之上&…

EPSON的实时时钟模块RX8010SJ丰富的定时功能及超低功耗特性

温控器是用于控制温度的设备&#xff0c;目前市面上的温控器用于控制地暖空调、热水器、中央新风系统等设备。随着智能家居理念深入人心&#xff0c;人们也期望温控器不仅能控得"准”&#xff0c;还能控得“智能”。为了实现智能控制&#xff0c;温控器一般需要实时时钟模…

【Vue 页面+flex布局 】一行内显示4个元素,超出4个换行,每一行的最后一个去掉marginRight属性

问题 一行展示4个&#xff0c;每个元素之间的margin-right 为20px&#xff0c;导致最右侧没有和上面的输入框对齐 实现效果 修改 正确思路&#xff1a; 一行展示4个&#xff0c;前三个元素之间的margin-right 为20px&#xff0c;最后一个元素margin-right 设置为 0px 代码 …

【198】Java8编写Main程序场景下引入log4j2的例子

场景 有些情况下&#xff0c;需要程序员编写非服务器程序&#xff0c;或者编写不使用 Springboot 框架的程序。这个时候如果需要生成日志&#xff0c;就要采用本文的方法来引入 log4j2 。本文的例子还涉及了在程序打包的时候&#xff0c;如何处理依赖jar包的问题。 例子 下面…

钢结构行业的MES需求特点解析

导 读 ( 文/ 973 ) 钢结构行业作为重要的建筑材料供应商和施工服务提供商&#xff0c;对于生产过程的高效管理和质量控制有着严格要求。其中制造执行系统&#xff08;MES&#xff09;在钢结构行业中扮演着关键的角色。本文将探讨钢结构行业中MES的需求特点&#xff0c;包括…