【ArkTS入门】ArkTS开发初探:语言特点和开发特点

news2024/12/23 22:17:30

什么是ArkTS?

ArkTS是一个为鸿蒙组件而生的框架,语法亲人好用。基于TypeScript,ArkTS拓展了声明式UI、状态管理等的能力,从本质上来讲,是TypeScript的扩展,主要服务于前端。

ArkTS的开发可以满足“一次开发,多端部署”的需求,真正应用于华为全生态链。而且ArkTS支持低代码开发,让“人人都是开发者”的理念得以实现。

什么是声明式UI?

声明式UI是一种以声明方式定义用户界面的编程模型。它的核心思想是通过编写声明性的代码来描述用户界面的状态和外观,而不是直接操作DOM(文档对象模型)或执行命令式操作。

常见的声明式UI开发框架有:React、Vue.js、SwiftUI、Flutter等。声明式UI与命令式UI最大的区别在于注重的部分不同,前者更注重描述和表达界面的最终呈现,代码更加简洁;而后者注重控制和界面的细节,故而更加复杂。

声明式开发范式UI框架:SwiftUI

SwiftUI,这是苹果于2019年世界开发者大会中提出的新产品。其可以用于watchOS,tvOS,macOS等苹果旗下系统中的应用,统一了苹果的UI框架。想要体验实时预览和完整的Xcode 11功能,需要macOS 10.15 beta以上。

声明式开发范式UI框架:ArkUI

ArkUI是一套构建分布式应用界面的声明式UI开发框架。它使用极简的UI信息语法、丰富的UI组件、以及实时界面预览工具,帮助您提升HarmonyOS应用界面开发效率30%。

ArkTS开发流程

在这里插入图片描述

  • .ets、.ts是文件的格式,也提示了开发的语言特性。毫无疑问,这是TypeScript的扩展。
  • webpack是一个现在的javaScript应用的静态模块化打包工具。Rollup 是一个用于 JavaScript 的模块打包工具,ets-loader负责解析ets页面,根据组件的tag标签创建对应的JsView对象,生成jsView树。
  • bundle.js是webpack的最终输出产物,浏览器通过阅读bundle.js的内容来解析代码。可以将bundle.js理解为一个立即执行函数(IIFE),函数的输入是一个依赖拓扑图(一个js对象),浏览器通过分析依赖的先后顺序以 eval(code) 的形式运行代码。
  • ArkUI是OpenHarmony的UI开发框架。
  • ArkCompiler是主要用于开发OpenHarmony应用的组件化、可配置的多语言编译和运行平台,目前支持JS、TS、Java。

ArkTS开发范式

@Entry /*用作页面默认入口组件,加载时首先创建*/
@Component/*用作页面的类组件,页面开始加载时扫描文件*/
struct Index {
  @State message: string = 'Hello World'
  /*@State State:状态,一般指的是装饰器装饰的数据。用户通过触发组件的事件方法,改变状态数据。状态数据的改变,引起UI的重新渲染。。*/
  build() {
  /*bulid函数里的语言统称为UI描述语言,@Entry装饰的自定义组件,其build()函数下的根节点唯一且必要,且必须为容器组件;@Component装饰的自定义组件,其build()函数下的根节点唯一且必要,可以为非容器组件*/
  //六个不允许:不允许声明本地变量;
  //不允许直接使用console.info,但允许在方法或者函数里使用;
  //不允许创建本地的作用域;
  //不允许switch语法;
  //不允许调用除了被@Builder装饰以外的方法,允许系统组件的参数是TS方法的返回值;
  //不允许使用表达式
  
    Column() {
      Text('Hello').fontSize(30)
      Text(this.message).fontSize(30)
      Button(){
        Text('Click Me').fontSize(30)
      }.onClick(()=>{
        this.message='ArkUI'
      })
      .width(200)
      .height(50)
    }
  }
}

构建简单的ArkTS应用

请添加图片描述
上图是ArkTS工程的目录结构。

entry:HarmonyOS工程模块,编译构建生成一个HAP包。

HAP:HarmonyOS Ability Package,一个HAP文件包含应用的所有内容,由代码、资源、三方库及应用配置文件组成,其文件后缀名为.hap。

  • src/main/ets:存放ArkTS源码。
  • src/main/ets/MainAbility:应用/服务的入口。
  • src/main/ets/pages:应用/服务包含的页面。
  • src/mian/resources:存放应用/服务所用到的资源文件。
  • src/main/config.json:模块配置文件,主要包含HAP包的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。
  • build-profile.json5:当前的模块信息、编译信息配置项,包括了buildOption、targets配置等。

属性方法简要介绍

ArkTS支持许多种属性方法:

  1. 常量传递:
Text("Hello World").fontSize(20)

这个比较好理解,和三件套语言的逻辑相似。

  1. 变量传递
import { Link, Prop } from 'arkts';

class MyClass {
  @Link('https://example.com')
  myLink: string;

  @Prop(123)
  myNumber: number;

  @Prop(true)
  myBoolean: boolean;

  @Prop(['option1', 'option2', 'option3'])
  myEnumArray: string[];
}

const myObject = new MyClass();

console.log(myObject.myLink); // 输出:https://example.com
console.log(myObject.myNumber); // 输出:123
console.log(myObject.myBoolean); // 输出:true
console.log(myObject.myEnumArray); // 输出:['option1', 'option2', 'option3']

声明变量后,继续调用变量。

  1. 链式调用
Text("Hello World").fontSize(20).width(100)

链式调用允许我们连续地设置变量属性。

  1. 内置枚举类型

补充:ArkTS支持传入初始值后自动识别数据类型。

枚举类型不同于其他数据类型。枚举类型在C#或C++,java,VB等一些计算机编程语言中是一种基本数据类型而不是构造数据类型,而在C语言等计算机编程语言中是一种构造数据类型 [1]。它用于声明一组命名的常数,当一个变量有几种可能的取值时,可以将它定义为枚举类型。

许多的枚举类型内置在了ArkTS中,目前主要基于数字和字符串。比如Color属性:

Text("Hello World").fontColor(Color.Red).fontSize(20)

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

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

相关文章

vue-cli3/webpack打包时去掉console.log调试信息

文章目录 前言一、terser-webpack-plugin是什么?二、使用配置vue-cli项目 前言 开发环境下,console.log调试信息,有助于我们找到错误,但在生产环境,不需要console.log打印调试信息,所以打包时需要将consol…

【React源码 - ReactDom.render发生了什么】

在React开发中,在入口文件我们都会执行ReactDom.render来讲整个应用挂载在主document中,那其中发生了什么,React是如何讲我们写的JSX代码,一步一步更新Fiber进而挂载渲染的呢。本文主要是基于react17.0.2的源码以及自己的理解来简…

thinkphp+vue+mysql企业车辆管理系统m117l

“企业车辆管理系统”是运用php语言和vue框架,以Mysql数据库为基础而发出来的。为保证我国经济的持续性发展,必须要让互联网信息时代在我国日益壮大,蓬勃发展。伴随着信息社会的飞速发展,企业车辆管理系统所面临的问题也一个接一个…

大数据背后的绿色收割:基于Hadoop的农产品价格信息智能分析

大数据背后的绿色收割:基于Hadoop的农产品价格信息智能分析 引言正文1. 数据获取与准备2. 数据清洗与处理3. Hadoop数据分析引擎的运用4. MySQL数据库的集成5. 创新性的可视化6. 结论与展望 结语 引言 随着信息技术的不断发展,农业领域也在数字化的浪潮…

C++ Primer Plus----第十二章--类和动态内存分布

本章内容包括:对类成员使用动态内存分配;隐式和显式复制构造函数;隐式和显式重载赋值运算符;在构造函数中使用new所必须完成的工作;使用静态类成员;将定位new运算符用于对象;使用指向对象的指针…

鸿蒙(HarmonyOS 3.1) DevEco Studio 3.1开发环境汉化

鸿蒙(HarmonyOS 3.1) DevEco Studio 3.1开发环境汉化 一、安装环境 操作系统: Windows 10 专业版 IDE:DevEco Studio 3.1 SDK:HarmonyOS 3.1 二、设置过程 打开IDE,在第一个菜单File 中找到Settings...菜单 在Setting...中找到Plugins…

毅速:一文说清3D打印随形水路的优势

3D打印发展如火如荼,对于模具行业来说,3D打印对模具水路的改变将产生哪些影响? 优化水路设计。通过3D打印技术,可以快速制造出复杂的内部结构和任意几何形状的模具,从而摆脱传统方法对水路加工的诸多限制。设计师可以…

准备用vscode代替sourceinsight

vscode版本1.85.1 有的符号,sourceinsight解析不到。 看网上说vscode内置了ripgrep,但ctrlshiftf在文件里查找的时候,速度特别慢,根本不像ripgrep的速度。ripgrep的速度是很快的。 但今天再查询,速度又很快了&#x…

mac node基本操作

1 查看所有版本 npm view node versions输出 2 查看已经安装的版本 n list3 安装指定版本 sudo -E n 16.0.04 切换版本 sudo n 16.0.05 查看版本 node -v

[ 云计算 | AWS ] 对比分析:Amazon SNS 与 SQS 消息服务的异同与选择

文章目录 一、前言二、Amazon SNS 服务(Amazon Simple Notification Service)三、Amazon SQS 服务(Amazon Simple Queue Service)四、SNS 与 SQS 的区别(本文重点)4.1 基于推送和轮询区别4.2 消费者数量对应…

2024年PMP考试新考纲-PMBOK第七版-【模型、方法和工件】真题解析

今天我们继续来看第七版PMBOK的考题,前面已经介绍了新考纲下最近几年价值交付系统、项目管理原则、项目绩效域、裁剪方面的部分真题和详细解析,今天来看PMBOK第七版的第四部分【模型、方法和工件】这个章节相关的真题。 PMBOK第七版中专门把模型、方法和…

在markdown中添加视频的两种方法

查看专栏目录 Network 灰鸽宝典专栏主要关注服务器的配置,前后端开发环境的配置,编辑器的配置,网络服务的配置,网络命令的应用与配置,windows常见问题的解决等。 文章目录 方式一源代码: 方式二结尾语网络的梦想 markd…

Android MVC 写法

前言 Model:负责数据逻辑 View:负责视图逻辑 Controller:负责业务逻辑 持有关系: 1、View 持有 Controller 2、Controller 持有 Model 3、Model 持有 View 辅助工具:ViewBinding 执行流程:View >…

STM32CubeMX教程8 TIM 通用定时器 - 输出比较

目录 1、准备材料 2、实验目标 3、实验流程 3.0、前提知识 3.1、CubeMX相关配置 3.1.1、时钟树配置 3.1.2、外设参数配置 3.1.3、外设中断配置 3.2、生成代码 3.2.1、外设初始化函数调用流程 3.2.2、外设中断函数调用流程 3.2.3、添加其他必要代码 4、常用函数 5…

云服务器ECS运维管理

目录 实时掌握CPU、内存使用情况 实时掌握存储的使用情况 定期对云服务器数据做好备份 定期检查云服务器的安全运行情况 要想保证云服务器长期稳定的使用,除了依靠阿里云(云服务提供商)的技术支持,自身必要的安全维护手段也是…

Halcon区域生长的几种算法regiongrowing/regiongrowing_mean/watersheds

Halcon区域生长的几种算法 文章目录 Halcon区域生长的几种算法1. regiongrowing 算子2. regiongrowing_mean算子3. 分水岭算法 如果想要获得具有相似灰度的相连区域,可以使用区域生长法寻找相邻的符合条件的像素。区域生长法的基本思想是,在图像上选定一…

Zookeeper之手写一个分布式锁

前言 我之前写了一篇快速上手ZK的文章:https://blog.csdn.net/qq_38974073/article/details/135293106 本篇最要是进一步加深学习ZK,算是一次简单的实践,巩固学习成果。 设计一个分布式锁 对锁的基本要求 可重入:允许同一个应…

QT/C++ 远程数据采集上位机+服务器

一、项目介绍: 远程数据采集与传输 课题要求:编写个基于TCP的网络数据获取与传输的应用程序; 该程序具备以下功能: 1)本地端程序够通过串口与下位机(单片机)进行通信,实现数据采集任务 2)本地端程序能将所获取下位机数据进行保存(如csv文本格式等); 3…

JavaWeb——前端之JSVue

接上篇笔记 4. JavaScript 概念 跨平台、面向对象的脚本语言,使网页可交互与Java语法类似,但是不需要变异,直接由浏览器解析1995年Brendan Eich发明,1997年成为ECMA标准(ECMA制定了标准化的脚本程序设计语言ECMAScr…

Mysql5.7主从数据库同步失败(日记文件错误)解决记录

记录一次Mysql主从数据库同步失败(日记文件错误)解决记录 查看同步状态: 具体错误: 检查mysql数据库日记 2021-06-10T03:45:43.522398Z 1 [ERROR] Error reading packet from server for channel : event read from binlog did not pass crc check; the…