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.hqwc.cn/news/258920.html

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

相关文章

jmeter常用的性能测试监听器

jmeter中提供了很多性能数据的监听器,我们通过监听器可以来分析性能瓶颈 本文以500线程的阶梯加压测试结果来描述图表。 常用监听器 1:Transactions per Second 监听动态TPS,用来分析吞吐量。其中横坐标是运行时间,纵坐标是TPS…

火狐,要完了!

在过去几年中,关于Firefox 浏览器的衰落有过不少讨论。目前来说,很多公共的以及私营的大型网站都缺乏对Firefox的适当支持。但是Firefox也多次试图“自救”,甚至就在不久前,Mozilla 通过官博发文,表示 Firefox 在 2023…

一个 postman实现参数化让我丢掉了一份20k的offer

什么时候会用到参数化 比如:一个模块要用多组不同数据进行测试 验证业务的正确性 Login模块:正确的用户名,密码 成功;错误的用户名,正确的密码 失败 postman实现参数化 在实际的接口测试中,部分参数…

设计并实现一个多线程图书馆管理系统,涉及数据库操作

没有实现全部功能,希望路过的大佬,可以实现全部功能,在评论区聊聊 创建数据库library-demo CREATE DATABASE library-demo创建图书表book CREATE TABLE book (bookId int(11) NOT NULL AUTO_INCREMENT COMMENT 图书ID,bookName varchar(15)…

Leetcode—213.打家劫舍II【中等】

2023每日刷题&#xff08;五十二&#xff09; Leetcode—213.打家劫舍II 算法思路 实现代码 class Solution { public:// 左闭右开int rob1(vector<int>& nums, int start, int end) {int n nums.size();int f0 0, f1 0, new_f 0;for(int i start; i < end…

挡墙边界提取

基于点云对挡墙边界进行提取 算法思路 将点转到极坐标系下&#xff0c;并得到极坐标系下的索引值&#xff0c;并输出距离信息。 double getCellIndexFromPoints(double x, double y, int& chI) {// 计算点到原点的欧几里得距离double distance sqrt(x * x y * y);// 将…

vue中组件传值方法

父组件给子组件传值 一、 1.在子组件标签中写入父组件传递数据 向下传递prop 2.在子组件内声明props选项接收父组件传递的数据 props:[,,] 父组件&#xff1a; <Header :msgmsg ></Header> 子组件&#xff1a; props:[msg], 二、 provide i…

vue3 vue-router编程式导航(二)

文章目录 一、跳转到指定路径1. query传参2. Params传参 二、前进/后退三、替换当前页 Vue Router提供了强大且灵活的编程式导航功能&#xff0c;能够通过代码来控制路由的切换和跳转。本篇博客将介绍如何在Vue 3应用程序中使用Vue Router进行编程式导航。 一、跳转到指定路径…

markdown记录

文章目录 基础操作使用一级列表、二级列表 博文链接 基础操作 使用一级列表、二级列表 博文链接 CSDN-Markdown语法集锦 CSDN-markdown语法之如何使用LaTeX语法编写数学公式 CSDN Markdown简明教程1-关于Markdown CSDN Markdown简明教程2-基本使用 CSDN Markdown简明教程3-表…

uni-app 微信小程序之好看的ui登录页面(五)

文章目录 1. 页面效果2. 页面样式代码 更多登录ui页面 uni-app 微信小程序之好看的ui登录页面&#xff08;一&#xff09; uni-app 微信小程序之好看的ui登录页面&#xff08;二&#xff09; uni-app 微信小程序之好看的ui登录页面&#xff08;三&#xff09; uni-app 微信小程…

【教学类-35-05】17号的学号字帖(A4竖版1份)

作品展示&#xff1a; 背景需求&#xff1a; 大四班17号男孩目前无法自主数学数字。他表示自己能够认识数字&#xff0c;但不会写。 保育老师说&#xff1a;我曾经教过他&#xff0c;抓着手示范的。但是他记不住。家里估计也不练习的。年龄还没到&#xff0c;下学期再看看能不…

营收增速持续放缓,博通CEO期待AI崛起救场 | 百能云芯

博通作为苹果等大型科技公司的芯片供应商&#xff0c;于周四发布了财报。尽管截至10月29日的第四季度营收增长了4%至93亿美元&#xff0c;符合市场预期&#xff0c;但增速已经降至2020年以来的最低水平。 由于企业客户和电信供应商在控制支出方面的谨慎态度&#xff0c;博通的销…