ArkTS快速入门

一、概述

        ArkTS是鸿蒙生态的应用开发语言。它在保持TypeScript(简称TS)基本语法风格的基础上,对TS的动态类型特性施加更严格的约束,引入静态类型。同时,提供了声明式UI、状态管理等相应的能力,让开发者可以以更简洁、更自然的方式开发高性能应用。

        简而言之,ArkTS是华为官方推荐的HarmonyOS开发的主力语言,它是华为自己开发的语言。由于HarmonyOS3.0之后就不再支持Java开发了,因此我们要在鸿蒙系统上开发app,就需要学习这门语言。

特点

  • 开发效率高,体验好

        ArkTS专注于移动端的开发,虽然传统的前端网页开发也同样可以实现,不过学过web前端的都知道,一个网页的实现需要同时使用HTML,JavaScript,CSS这三种不同语言,它们语法完全不同,开发体验并不良好。不过使用ArkTS开发移动端的话就没有这个问题了,仅仅这一种语言,一种语法,开发起来就比较舒服了。

比如这个,实现一个点击自增按钮,ArkTS所操作方式的完全就是 .属性(赋值)  进行操纵。这对于习惯使用Java开发的人来说可以说是非常舒服了。

  • 性能上并没有下降,执行性能非常高效

  • 而且还有多系统适配,接入能力

开发工具

DevEco Studio:HUAWEI DevEco Studio和SDK下载和升级 | HarmonyOS开发者

注意它需要node.js环境,版本最低不能低于14.19.1,最高不能高于17.0.0。

使用NVM实现多版本Node.js的版本共存和无缝切换_nodejs多版本共存-CSDN博客icon-default.png?t=N7T8https://blog.csdn.net/m0_56308072/article/details/130894356?spm=1001.2014.3001.5501

这样检测的时候没有报错就可以使用了,又报错直接点击后面的安装即可。


二、TypeScript基本语法

ArkTS是基于TypeScipt开发的,其语法也是十分的相似。因此我们需要先了解TypeScipt的基本语法,方便ArkTS的学习。

目录

  1. 变量声明
  2. 条件控制
  3. 循环迭代
  4. 函数
  5. 类和接口
  6. 模块开发

1、变量声明

TypeScript在JavaScript的基础上加入了静态的类型检查功能,因此与JavaScrpt那极其自由的语法不同,每一个变量都有固定的数据类型。

JS的语法:let msg = 'hello world'

TS的语法:let msg:string = 'hello world'

其实就是在JS的基础上多了一步声明数据类型。

 想要编写一下代码对语法进行练习和熟悉,可以使用TypeScript官方网站上的在线编写:TypeScript: TS Playground - An online editor for exploring TypeScript and JavaScript

直接在这里练习就行了。

2、 条件控制

TypeScript与大多数开发语言类似,支持基于if-else和switch的条件控制

===是JavaScript中的一个特殊运算符,它会严格要求两个比较的数据的数据类型,TypeScript将其继承了下来。

因为在JavaScript是一门弱类型语言,它不强调数据的类型,"字符串'21' == 整型21" 始终为true,所有有了===这个运算符比较一下数据类型。

其次还有一个需要注意的一点是

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

因此你可以直接将一个变量作为一个判断的标准,这点与C++很相似。

3、循环迭代

TypeScript支持for和while循环,并且为一些内置类型如Array等提供了快捷迭代的语法

 相信有编程基础的大家都快把循环语句写烂了。

4、函数

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

可选参数就是直接在参数后面加上 ? 默认参数就是直接在参数中赋值,注意此时如果有参数传递时就用传递来的参数,没有参数传入时默认参数才会生效 

5、类和接口

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

吐槽:好像Java和JS杂交之后出来的产物。我们再来看一个既视感很强的例子

 

6、模块开发

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

 


三、ArkTS快速入门

项目创建

创建一个空项目

简单解释一下其中的配置项:

  • Project name是开发者可以自行设置的项目名称,这里根据自己选择修改为自己项目名称。
  • Bundle name是包名称,默认情况下应用ID也会使用该名称,应用发布时对应的ID需要保持一致。
  • Save location为工程保存路径,建议用户自行设置相应位置。
  • Compile SDK是编译的API版本,这里默认选择API9。
  • Model选择Stage模型,其他保持默认即可。

吐槽:怎么跟IDEA长得这么像

目录结构 

左边的目录大多是配置文件,用到的时候再讲,现在先将其切换为Ohos,IDE会自动将目录按照类型分类

  • AppScope:主要用于存放整个应用公共的信息与资源
  • entry:入口,初始模块。用于存放编写的代码文件
    • configuration:存放相应模块的配置文件
    • resource对应模块内的公共资源
    • entryability:存放ability文件,用于当前ability应用逻辑和生命周期管理。
    • pages:存放UI界面相关代码文件,初始会生成一个Index页面。
  • 最外层的configuration:则是存放工程应用级的配置文件

既然是鸿蒙移动端开发,那么就需要一个鸿蒙系统的手机。不过我们不需要真的去购买一台手机,IDE中有自带的模拟器。

点击右侧的Previewer,即可看到index.ets文件的效果(ArkTS写的文件后缀统一叫.ets) 

index.ets代码解释

逻辑清晰了之后,我们可以尝试使用官方的ArkUI直接拼接一个页面出来(这里仅展示一下,后面会具体学习ArkUI)

其页面的基本骨架就是如此

@Entry
@Component
struct Index {build() {}
}

拼接UI

@Entry
@Component
struct Index {build() {Column({space: 20}){Image('logo.png')TextInput({placeholder: '用户名'})TextInput({placeholder: '密码'}).type(InputType.Password).showPasswordIcon(true)Button('登录')Row(){Checkbox()Text('记住我').fontColor('#36D')}}.width('100%')}
}

 最终效果

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

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

相关文章

DOS 批处理 (一)

DOS 批处理 1. 批处理是什么?2. DOS和MS-DOS3. 各种操作系统shell的区别Shell 介绍图形用户界面(GUI)shell命令行界面(CLI)的 shell命令区别 1. 批处理是什么? 批处理(Batch),也称为批处理脚本…

VisualStudio反汇编功能使用

VisualStudio反汇编功能使用 使用方法 到达断点时:CtrlK(松开)G(后按)唤出反汇编界面,就可以看到当前代码对应的汇编语言了 注意:进入反汇编窗口后可以F10单次调试一条汇编指令 其他&#…

机器学习第15天:GBDT模型

☁️主页 Nowl 🔥专栏《机器学习实战》 《机器学习》 📑君子坐而论道,少年起而行之 ​​ 文章目录 GBDT模型介绍 Boosting 残差 GBDT的缺点 python代码实现 代码 模型参数解释 结语 GBDT模型介绍 GBDT(Gradient Boos…

【深度学习】AlexNet网络实现猫狗分类

【深度学习】AlexNet网络实现猫狗分类 AlexNet简介 AlexNet是一种卷积神经网络(Convolutional Neural Network,CNN)模型,它在2012年的ImageNet图像分类挑战赛中取得了重大突破,引发了深度学习在计算机视觉领域的热潮…

前端学习系列之CSS

目录 CSS 简介 发展史 优势 基本语法 引用方式 内部样式 行内样式 外部样式 选择器 id选择器 class选择器 标签选择器 子代选择器 后代选择器 相邻兄弟选择器 后续兄弟选择器 交集选择器 并集选择器 通配符选择器 伪类选择器 属性选择器 CSS基本属性 优…

基于ssm家庭理财系统源码和论文

基于ssm家庭理财系统源码和论文743 idea 数据库mysql5.7 数据库链接工具:navcat,小海豚等 环境: jdk8 tomcat8.5 开发技术 ssm 摘要 随着Internet的发展,人们的日常生活已经离不开网络。未来人们的生活与工作将变得越来越数字化&#xff…

机器人刚性碰撞任务的阻抗控制性能

问题描述 对于机器人刚性碰撞任务,阻抗控制可以有效地提高机器人的适应性和稳定性。 在刚性碰撞任务中,机器人在接触外部物体时需要快速适应并调整自身的运动轨迹和速度,以实现精确的操控和稳定的交互。阻抗控制可以通过调整机器人的阻抗参…

cuda lib 线程安全的要义

1, 概述 cuda lib 线程安全的几个多线程的情景: 单卡多线程; 多卡多线程-每卡单线程; 多卡多线程-每卡多线程; 需要考虑的问题: 每个 cublasHandle_t 只能有一个stream么? 每个cusolverHandle_t 只能有一…

AR + 通信,虚实结合让工作协同从线上到「现场」

在数字经济无所不在的当下,千行百业都与数智化办公接轨并因其实现转型升级。关注【融云 RongCloud】,了解协同办公平台更多干货。 升级的背后,是利用技术把工作用更自然的方式连接起来,让整个工作流协同更顺、体验更好。 而其中…

应用架构——集群、分布式、微服务的概念及异同

一、什么是集群? 集群是指将多台服务器集中在一起, 每台服务器都实现相同的业务,做相同的事;但是每台服务器并不是缺 一不可,存在的主要作用是缓解并发能力和单点故障转移问题。 集群主要具有以下特征: …

042:el-table表格表头自定义高度(亲测好用)

第042个 查看专栏目录: VUE ------ element UI 专栏目标 在vue和element UI联合技术栈的操控下,本专栏提供行之有效的源代码示例和信息点介绍,做到灵活运用。 (1)提供vue2的一些基本操作:安装、引用,模板使…

python3.5安装教程及环境配置,python3.7.2安装与配置

大家好,小编来为大家解答以下问题,python3.5安装教程及环境配置,python3.7.2安装与配置,现在让我们一起来看看吧! python 从爬虫开始(一) Python 简介 首先简介一下Python和爬虫的关系与概念&am…

【iOS】网络请求GET与POST

【iOS】网络请求GET与POST 前沿一. GET与POST的共同点二. GET与POST的不同点三. 实现方式总结 前沿 HTTP定义了与服务器交互的不同方法,最基本的方法有4种,分别是GET,POST,PUT,DELETE。URL全称是资源描述符&#xff0…

护眼灯有效果吗?考研必备护眼台灯推荐

据统计,中国人口的近视率约为10%至20%。 国家卫健委发布的中国首份眼健康白皮书显示,我国小学生近视率为47.2%,初中生近视率为75.8%,大学生近视率超过90%。据世界卫生组织统计数据显示,目前全球约有14亿近视人口&#…

【C语言】深入理解C语言中的数学运算和类型转换

文章目录 引言取负运算的奥秘源码探索分析与解读 浮点数运算的精细差异源码分析精度损失与隐式类型转换 精度和除零运算探究float类型和double类型的精度各是多少(即十进制有效位的位数)?在你的机器上,“负数开方”是如何处理的&a…

LeetCode题:174. 地下城游戏

目录 一、题目要求 二、解题思路 (1)状态表示 (2)状态转移方程 (3)初始化dp表 (4)填表顺序 (5)返回值 三、代码 一、题目要求 174. 地下城游戏 恶魔们…

关于什么是 JVM

关于什么是 JVM,看看普通⼈和⾼⼿的回答。 普通人 JVM 就是 Java 虚拟机,是⽤来运⾏我们平时所写的 Java 代码的。优点是它会 ⾃动进⾏内存管理和垃圾回收,缺点是⼀旦发⽣问题,要是不了解 JVM 的运⾏ 机制, 就很难…

C#中GDI+绘图应用(柱形图、折线图和饼形图)

目录 一、柱形图 1.示例源码 2.生成效果 二、折线图 1.示例源码 2.生成效果 三、饼形图 1.示例源码 2.生成效果 GDI绘制的一些常用的图形,其中包括柱形图、折线图和饼形图。 一、柱形图 柱形图也称为条形图,是程序开发中比较常用的一种图表技术…

2024年网络安全行业前景和技术自学

很多人不知道网络安全发展前景好吗?学习网络安全能做什么?今天为大家解答下 先说结论,网络安全的前景必然是超级好的 作为一个有丰富Web安全攻防、渗透领域老工程师,之前也写了不少网络安全技术相关的文章,不少读者朋…

vuepress-----19、自动生成侧边栏

自动生成侧边栏插件 https://github.com/shanyuhai123/vuepress-plugin-auto-sidebar https://shanyuhai123.github.io/vuepress-plugin-auto-sidebar/ 安装 npm i vuepress-plugin-auto-sidebar -Dmodule.exports {plugins: [["vuepress-plugin-auto-sidebar",…