ArkTs语言-摩杜云开发者社区

一、ArkTS语言特点

创建项目有两个选项：

Stage模型：在API9版本里面推出的一种开发模型，核心采用ArkTS来进行项目开发。
FA模型：有两种开发模式，基于ArkTS来开发项目，还有一种基于JS来开发项目

目前官方推荐我们使用Stage来创建项目。

二、FA模型

创建项目：

ArkTs语言_css

Application：代表创建一个应用
Atomic service:原子化服务

ArkTs语言_自定义组件_02

创建后如下：

ArkTs语言_css_03

每一个页面都包含三个文件：

hml：代表页面布局代码
js：页面脚本交互代码
css：页面样式代码

2.1.构建第一个页面

1）使用文本组件。

工程同步完成后，在“Project”窗口，点击“entry > src > main > js > MainAbility > pages> index”，打开“index.hml”文件，设置Text组件内容。“index.hml”文件的示例如下：

<!-- index.hml -->
<div class="container">
    <text class="title">
        Hello World
    </text>
</div>

2）添加按钮，并绑定onclick方法。

在默认页面基础上，添加一个button类型的input组件，作为按钮响应用户点击，从而实现跳转到另一个页面。“index.hml”文件的示例代码如下：

<!-- index.hml -->
<div class="container">
    <text class="title">
        Hello World
    </text>
    <!-- 添加按钮，值为Next，并绑定onclick方法-->
    <input class="btn" type="button" value="Next" onclick="indexOnclick"></input>
</div>

3）设置页面样式。

在“Project”窗口，点击“entry > src > main > js > MainAbility > pages> index”，打开“index.css”文件，可以对页面中文本、按钮设置宽高、字体大小、间距等样式。“index.css”文件的示例如下：

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

.title {
    font-size: 60px;
    text-align: center;
    width: 100%;
    height: 40%;
    margin: 10px;
}

@media screen and (orientation: landscape) {
    .title {
        font-size: 60px;
    }
}

@media screen and (device-type: tablet) and (orientation: landscape) {
    .title {
        font-size: 100px;
    }
}

4）在编辑窗口右上角的侧边工具栏，点击Previewer，打开预览器。第一个页面效果如下图所示：

ArkTs语言_自定义组件_04

2.2.构建第二个页面

1）创建第二个页面。

在“Project”窗口，打开“entry > src > main > js > MainAbility”，右键点击“pages”文件夹，选择“New > Page”，命名为“second”，点击“Finish”，即完成第二个页面的创建。可以看到文件目录结构如下：

ArkTs语言_自定义组件_05

2）添加文本及按钮。

参照第一个页面，在第二个页面添加文本、按钮及点击按钮绑定页面返回等。“second.hml”文件的示例如下：

<div class="container">
    <text class="title">
        Hi Augus
    </text>
    <!--添加按钮，值为Back, 绑定back方法-->
    <input class="btn" type="button" value="Back" onclick="back"></input>
</div>

3）设置页面样式。“second.css”文件的示例如下：

/* second.css */
.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

.title {
    font-size: 100px;
    font-weight: bold;
    text-align: center;
    width: 100%;
    margin: 10px;
}

.btn {
    font-size: 60px;
    font-weight: bold;
    text-align: center;
    width: 40%;
    height: 5%;
    margin-top: 20px;
}

2.3.实现页面间的跳转

页面间的导航可以通过页面路由router来实现。页面路由router根据页面url找到目标页面，从而实现跳转。使用页面路由请导入router模块。

1）第一个页面跳转到第二个页面。

在第一个页面中，跳转按钮绑定onclick方法，点击按钮时跳转到第二页。“index.js”示例如下：

import router from '@ohos.router';

export default {
    indexOnclick: function () {
        router.pushUrl({
            url: "pages/second/second" //目标跳转的url
        })
    }
}

2）配置路径跳转

要做路由，首先要在config.json中加上page，这一步一定要做否则无法跳转：

ArkTs语言_自定义组件_06

3）第二个页面返回到第一个页面。

在第二个页面中，返回按钮绑定back方法，点击按钮时返回到第一页。“second.js”示例如下：

// second.js
// 导入页面路由模块
import router from '@ohos.router';

export default {
    back: function (){
        /*返回上一页*/
        router.back()
    }
}

4）打开index文件夹下的任意一个文件，通过模拟器访问，可以点击跳转或者返回如下：

ArkTs语言_自定义组件_07

三、Stage模型

3.1.核心概念说明

在API9版本里面推出的一种开发模型，核心采用ArkTS来进行项目开发。例如通过html、js和css实现一个点击按钮，如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            #firstButton{text-align: center;}<!-- 样式设置，居中显示 -->
            button{
                background-color: #36D; /*背景颜色 */
                color: #fff; /*文字颜色 */
                border: 4px #36D solid; /*边框样式*/
                border-radius: 2px; /*边框圆角半径*/
            }
        </style>
    </head>
    <body>
        <div id="firstButton">
            <button>第0次点击</button>
        </div>
        
        <script>
            // 获取页面中的第一个button元素
            let btn = document.getElementsByTagName("button")[0];
            
            // 定义变量i，并初始化为0
            let i = 0;
            
            // 设置按钮的点击事件,每点击一次按钮,按钮的文本内容会更新为"第n次点击",n会递增
            btn.onclick = () => btn.innerHTML = `第${i++}次点击`
        </script>
    </body>
</html>

上面的代码转换成，Stage模型，核心采用ArkTS来进行项目开发。

ArkTS是HarmonyOS主力应用开发语言，它在TypeScript（简称TS）的基础上，匹配ArkUI框架，扩展了声明式UI、状态管理等相应的能力，让开发者以更简洁、更自然的方式开发跨端应用。

ArkTs语言_自定义组件_08

JavaScript、TypeScript和 ArkTS的关系：

JavaScript是一种属于网络的高级脚本语言，已经被广泛用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。
TypeScript是JavaScript的一个超集，它扩展了JavaScript的语法，通过在JavaScript的基础上添加静态类型定义构建而成，是一个开源的编程语言。
ArkTS基于TypeScript语言，拓展了声明式UI、状态管理、并发任务等能力。

3.2.声明式UI

声明式UI有两个特征分别是：声明式描述和状态驱动视图更新，那么怎么体现这一点呢？我们结合代码来说明，首先打开DevEco Studio，这里我使用的版本是DevEco Studio 3.1.1 Release，创建工程。

自定义组件实现上面的1.2.1.通过html、css和js实现的按钮：

struct：自定义组件基于struct实现，struct + 自定义组件名 + {…}的组合构成自定义组件，不能有继承关系。对于struct的实例化，可以省略new。说明：自定义组件名、类名、函数名不能和系统组件名相同。
@Component：@Component装饰器仅能装饰struct关键字声明的数据结构。struct被@Component装饰后具备组件化的能力，需要实现build方法描述UI，一个struct只能被一个@Component装饰。
@Entry修饰的Component表示该Component是页面的总入口，也可以理解为页面的根节点。值得注意的是，一个页面有且仅能有一个@Entry，只有被@Entry修饰的组件或者其子组件，才会在页面上显示。

1）基本的实现：

@Entry
@Component
struct Index {
  build() {
    Button('第0次点击')
  }
}

会发现上面的Button()方法是自带样式的

ArkTs语言_UI_09

2）修改样式

上面的Button方法在调用后，也可以设置样式，如下：

@Entry
@Component
struct Index {
  build() {
    /*Row指的是一行*/
    Row(){
      //backgroundColor设置背景颜色
      Button('第0次点击').backgroundColor("#FFB6C1")
    }
    /*设置居中*/
    .width('100%')
    .justifyContent(FlexAlign.Center)
  }
}

设置后如下图：

ArkTs语言_css_10

3）控制页面逻辑和数据状态

@Entry
@Component
struct Index {
  //定义变量
  //@State就是让Arkts就会监控这个值，在下面Button中就会获取最新的值
  @State times: number = 0
  build() {
    /*Row指的是一行*/
    Row(){
      //backgroundColor设置背景颜色
      //${this.times} 引用上面的变量times
      Button(`第${this.times}次点击`)
        .backgroundColor("#FFB6C1")
        .onClick(() => this.times++)
    }
    /*设置居中*/
    .width('100%')
    .justifyContent(FlexAlign.Center)
  }
}

执行后如下：随着点击，次数会出现变化

ArkTs语言_css_11