鸿蒙开发学习02-ArkTs

Yuantao1998

已于 2024-02-18 11:12:37 修改

阅读量478

点赞数 7

文章标签：学习鸿蒙

于 2024-02-18 11:01:32 首次发布

本文链接：https://blog.csdn.net/Yuantao1998/article/details/136145761

版权

本文介绍了HarmonyOS的开发语言ArkTs，它是基于TypeScript的，强化了静态类型并提供声明式UI和状态管理。与传统HTML/CSS/JavaScript相比，ArkTs以更简洁的方式实现页面开发，如点击计数器示例所示。学习者需先掌握TypeScript，可参考TypeScript中文网资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ArkTs语言：ArkTs是HarmonyOS应用开发语言。它在保持TypeScript（简称TS）基本语法风格的基础上，对TS的动态类型特性施加更严格的约束，引入静态类型。同时，提供了声明式UI、状态管理等相应的能力，让开发者可以以更简洁、更自然的方式开发高性能应用。如果你之前接触过Flutter的Dart、Kotlin的Compose，那么你对于这个ArkTS的使用应该问题不大。

传统的页面开发方式是html+css+JavaScript，html控制页面元素，css控制页面样式风格，JavaScript控制页面逻辑和数据状态。

而使用ArkTs语言就可以实现三种语言的功能。

以开发一个简单的点击页面为示例：

传统的html的代码为：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
<!-- CSS 控制布局和样式-->
    button{
    background-color: #36D;
    color: #FFF;
    border: 4px #36D solid;
    border-radius: 2px;}
</style>
</head>
<body>
    <div id="app">
    <button>点我0次</button>
</div>
<!--#html控制页面元素-->
<script>
    let btn = document
        .getElementsByTagName('button')[0];
    let i =0
    btn.onclick =
       () => btn.innerHTML ='点我${i++}次'
</script>
</body>
</html>
<!--##控制页面逻辑和数据状态-->

利用ArkTs编写为：

@State times: number =0
build() {
    Row() {
        Button('点我 ${this.times}次')
        .backGroundColor('#36D')
        .onClick(() => this.times++)
    }
    .width('100%')
    justifyContent(FlexAlign.Center)
}

可以看出，ArkUI中的组件有很多的属性，通过调整属性值，能很快速的完成对页面功能的开发。

学习ArkTs，需要先学会typescript，可以从网上看相关的语法教程。

推荐学习网站：TypeScript 中文网: 在线运行