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

什么是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.mzph.cn/news/584346.shtml

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

相关文章

Vite+Vue3学习笔记(2)——语法、渲染、事件、数据传递、生命周期、第三方库、前端部署

官网链接:https://cn.vuejs.org/ 如果出现普通用户无法新建项目,必须要管理员身份新建,那么可以在nodejs的安装路径设置安全选项,提高普通用户的权限。 具体方法参考: https://blog.csdn.net/weixin_43174650/article/…

CSS 缩减中心动画

<template><!-- mouseenter"startAnimation" 表示在鼠标进入元素时触发 startAnimation 方法。mouseleave"stopAnimation" 表示在鼠标离开元素时触发 stopAnimation 方法。 --><!-- 容器元素 --><div class"container" mou…

2023.12.29每日一题

LeetCode每日一题 2706.购买两块巧克力 2706. 购买两块巧克力 - 力扣&#xff08;LeetCode&#xff09; 介绍 给你一个整数数组 prices &#xff0c;它表示一个商店里若干巧克力的价格。同时给你一个整数 money &#xff0c;表示你一开始拥有的钱数。 你必须购买 恰好 两块…

Python教程(18)——python文件操作详解

Python文件操作 Python文件操作基础操作使用with语句管理文件处理文件操作的异常处理文件路径 文本格式和二进制格式文本格式 (Text Mode)二进制格式 (Binary Mode)例子说明 文件操作的相关函数 所谓的文件操作是指对计算机中的文件进行读取、写入、修改和删除等操作。简单来说…

超赞的进度条控件

© 2012 Conmajia, 2011 Graham Wilson SN: 125.2 本文为 CodeProject 2011 年 4 月号最佳 C# 文章获奖作品。本中文版翻译已获原作者 Graham Wilson 首肯。 简介 本文介绍一款有趣的进度条控件&#xff08;ProgressBar&#xff09;。如下演示&#xff0c;这款名为“超赞进…

毫米波雷达:从 3D 走向 4D

1 毫米波雷达已广泛应用于汽车 ADAS 系统 汽车智能驾驶需要感知层、决策层、执行层三大核心系统的高效配合&#xff0c;其中感知层通过传感器探知周围的环境。汽车智能驾驶感知层将真实世界的视觉、物理、事件等信息转变成数字信号&#xff0c;为车辆了解周边环境、制定驾驶操…

头歌:Pandas分组聚合与透视表的创建

第1关 Pandas分组聚合 import pandas as pd import numpy as np# 返回最大值与最小值的和 def sub(df):########## Begin #########resultdf.max()-df.mean()########## End ######### def jicha(arr):resultarr.max()-arr.min()return result # 得到目标DataFrame def main()…

React Hooks usestate源码示例

React 的 useState 是一个内置的 Hook&#xff0c;它让你在 React 函数组件中添加 state。在 React 中&#xff0c;Fiber 是一个用于协调和调度工作的数据结构。React Fiber 是 React 的核心算法&#xff0c;也被称为 Reconciliation algorithm&#xff08;协调算法&#xff09…

服务器通常不使用图形化界面的原因

目录 资源利用效率 稳定性和安全性 远程管理和自动化 例外情况 资源利用效率 图形化界面需要大量的系统资源&#xff0c;包括内存和处理器。服务器的主要任务是处理请求、提供服务和保证稳定性。因此&#xff0c;优化资源使用是关键&#xff0c;避免图形化界面对系统性能的…

基于OpenAI的Whisper构建的高效语音识别模型:faster-whisper

1 faster-whisper介绍 faster-whisper是基于OpenAI的Whisper模型的高效实现&#xff0c;它利用CTranslate2&#xff0c;一个专为Transformer模型设计的快速推理引擎。这种实现不仅提高了语音识别的速度&#xff0c;还优化了内存使用效率。faster-whisper的核心优势在于其能够在…

C++三剑客之std::variant(一)

1简介 C17的三剑客分别是std::optional, std::any, std::vairant。今天主要讲std::variant。std::variant的定义如下&#xff1a; template< class... Types > class variant; 类模板 std::variant 表示一个类型安全的联合体&#xff08;以下称“变化体”&#xff09;…

DCDC--电感的选择和影响

1、感值L的影响 1.1、纹波Ripple的影响&#xff1a;感值越大&#xff0c;纹波越小 1.2、负载瞬态响应Load Transient的影响&#xff1a;感值越大&#xff0c;负载瞬态响应越差 2、直流电阻DCR的影响 2.1、效率Efficiency的影响 相同型号&#xff0c;感值越大&#xff0c;DC…

浅学Vue3

安装 vue项目 npm init vuelatest 回车装包 npm install 路由 安装 Router npm install vue-router4 -S项目根目录新建 router --> index.js vue2中 index.jsimport Vue from vue; import VueRouter from vue-router; import Home from ../views/Home.vue;Vue.use(V…

2023年度总结:技术旅程的杨帆远航⛵

文章目录 职业规划与心灵成长 ❤️‍&#x1f525;我的最大收获与成长 &#x1f4aa;新年Flag &#x1f6a9;我的技术发展规划 ⌛对技术行业的深度思考 &#x1f914;祝愿 &#x1f307; 2023 年对我来说是一个充实而令人难以忘怀的一年。这一年&#xff0c;我在CSDN上发表了 1…

Arduino驱动VL6180X光学测距传感器(OLED显示)

Arduino驱动VL6180X光学测距传感器&#xff08;OLED显示&#xff09; 简介原理模块参数接线图代码结果 简介 VL6108X三合一光电模块&#xff0c;芯片内集成了IR VSEL(vertical-cavity surface-emitting laser)红外垂直腔面发射激光器光源、接近传感器、环境光传感器&#xff0…

Windows搭建RTMP视频流服务(Nginx服务器版)

文章目录 引言1、安装FFmpeg2、安装Nginx服务器3、实现本地视频推流服务4、使用VLC或PotPlayer可视化播放器播放视频5、RTSP / RTMP系列文章 引言 RTSP和RTMP视频流的区别 RTSP &#xff08;Real-Time Streaming Protocol&#xff09;实时流媒体协议。 RTSP定义流格式&#xff…

2023总结与展望--Empirefree

今年一篇博客都没写过了&#xff0c;好像完全在忙在工作和生活上面了&#xff0c;珍惜自我&#xff0c;保持热情&#xff0c;2024对我好点 文章目录 &#x1f525;1. 年终总结1.1.学习工作计划1.2. 生活计划1.3 个人总结 &#x1f525;2. 未来展望 &#x1f525;1. 年终总结 1…

MySQL函数、AVG | MIN | MAX | COUNT | SUM、慢查询

MySQL函数、慢查询 1、函数1.日期函数2.两个日期的时间差3.查询距离时间的间隔时间4.常用的字符串函数5.常用的数学函数6.常用的聚合函数 2、慢查询1.什么是慢查询&#xff1f; 从需求出发&#xff0c;在数据的操作过程中经常会有以下的问题&#xff1b;求和、最大值、最小值、…

未来十年,量子计算将改变物流行业

近年来&#xff0c;供应链和物流行业面临的挑战越来越多&#xff0c;从劳动力短缺到无法预测的天气以及供需变化&#xff0c;都使物流行业变得更加复杂。 因此&#xff0c;现在急需一种不同的方法来解决这些挑战&#xff0c;优化单个功能或整个业务的传统方法已无法应对这些困…

Linux C 中 multiple definition of ‘xxx‘

在多文件的项目中&#xff0c;我们可以发现有时会出现multiple definition of ‘xxx‘的问题。这个问题一般有以下表现和处理。 原因 &#xff08;1&#xff09;变量或者函数在某一个头文件中定义&#xff08;不是声明&#xff09;&#xff0c;而这个头文件被多个源文件包含&a…