当前位置：首页 > news >正文

构建第一个ArkTS应用（纯HarmonyOS应用）

news 来源：原创 2024/5/10 17:12:13

1. 安装开发工具

在华为开发者官方上下载HarmonyOS应用专用的开发工具，链接地址：HUAWEI DevEco Studio和SDK下载和升级 | HarmonyOS开发者

要想使用开发工具让项目跑起来，需要10G的磁盘空间。开发工具需要的磁盘空间为2.36G；SDK需要7.5G。（PS：我的Mac磁盘本来就少，现在更不够了）。

2. 创建ArkTS工程

构建第一个纯HarmonyOS的应用

若首次打开DevEco Studio，请点击Create Project创建工程。如果已经打开了一个工程，请在菜单栏选择File > New > Create Project来创建一个新工程。
选择Application应用开发（本文以应用开发为例，Atomic Service对应为元服务开发），选择模板“Empty Ability”，点击Next进行下一步配置。

进入配置工程界面，Compile SDK选择“3.1.0(API 9)”，Model 选择“Stage”，其他参数保持默认设置即可。

这里补充下，打开之后项目可使用低代码构建页面进行开发。

点击Finish，工具会自动生成示例代码和相关资源，等待工程创建完成。

3. 认识ArkTS工程结构目录

项目构建完成之后的结构目录

AppScope > app.json5：应用的全局配置信息。
entry：HarmonyOS工程模块，编译构建生成一个HAP包。

- src > main > ets：用于存放ArkTS源码。
- src > main > ets > entryability：应用/服务的入口。
- src > main > ets > pages：应用/服务包含的页面。
- src > main > resources：用于存放应用/服务所用到的资源文件，如图形、多媒体、字符串、布局文件等。
- src > main > module.json5：Stage模型模块配置文件。主要包含HAP包的配置信息、应用/服务在具体设备上的配置信息以及应用/服务的全局配置信息。
- build-profile.json5：当前的模块信息、编译信息配置项，包括buildOption、targets配置等。其中targets中可配置当前运行环境，默认为HarmonyOS。
- hvigorfile.ts：模块级编译构建任务脚本，开发者可以自定义相关任务和代码实现。

oh_modules：用于存放三方库依赖信息。
build-profile.json5：应用级配置信息，包括签名、产品配置等。
hvigorfile.ts：应用级编译构建任务脚本。

4. 构建页面

工程同步完成后，在“Project”窗口，点击“entry > src > main > ets > pages”，打开“Index.ets”文件，可以看到页面由Text组件组成。“Index.ets”文件的示例如下：

@Entry
@Component
struct Index {@State message: string = 'Hello World'build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)}.width('100%')}.height('100%')}
}

使用预览功能是报错：

Build task failed. Open the Run window to view details.

解决：在设置中，找到Build->Hvigor将Enable the Daemon for tasks选项给关掉。如图：

创建第二个页面，右键点击“pages”文件夹时，选择“New > Page”，新建一个页面。修改页面中文字显示

@Entry
@Component
struct SecondPage {@State message: string = 'SecondPage'build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)}.width('100%')}.height('100%')}
}

5. 实现页面间跳转

修改第一个页面，实现从第一个页面点击按钮跳转到第二个页面

import router from '@ohos.router'
import hilog from '@ohos.hilog'
@Entry
@Component
struct Index {@State message: string = 'Hello World'build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)// 添加按钮，以响应用户点击Button('Next').fontSize(30).fontWeight(FontWeight.Bold).type(ButtonType.Capsule).margin({top: 20}).width('40%').height('5%')// 设置点击事件，进行跳转.onClick(() => {// 跳转到第二页router.pushUrl({ url: 'pages/SecondPage' }).then(() => {}).catch((err) => {hilog.error(0x0000, "index", 'Failed to jump to the second page')})})}.width('100%')}.height('100%')}
}

如下预览页面，点击按钮即可实现页面跳转