开源鸿蒙OpenHarmony开发入门
本文介绍了如何使用OpenHarmony的ArkTS开发框架快速开发一个简单的应用。内容涵盖以下要点：
工具准备：安装DevEco Studio并完成开发环境配置。
构建第一个页面：通过编辑页面代码实现基本功能，如添加文本和按钮，设置按钮样式并实现跳转功能。
页面跳转：使用页面路由模块实现页面间的跳转，支持前向和后向操作。
应用运行：指导用户在真机上连接开发板并完成签名和运行步骤。
总结了构建第一个ArkTS应用的关键步骤，包括页面构建、按钮功能和页面跳转，帮助开发者快速上手应用开发。
开发准备
面向OpenHarmony应用开发的初学者，本文档提供一个基础的开发入门资料。通过搭建一个简单的包含页面跳转和返回功能的应用（如下图所示），可以快速熟悉工程目录的主要文件结构，掌握OpenHarmony的应用开发流程。
在开始之前，建议您先了解OpenHarmony应用的核心概念：对UI框架的简要说明，以及对应用模型的简要说明。
基本概念
UI框架
OpenHarmony提供了方舟开发框架（ArkUI框架），这是一种专为开发者设计的UI开发工具。方舟开发框架为开发者提供了丰富的功能，包括多种组件、布局计算、动画能力、UI交互以及绘制功能。
方舟开发框架为开发者提供了两种开发范式，分别是基于ArkTS的声明式开发范式和兼容JS的类Web开发范式。对两种开发范式进行了简单对比分析。
| 开发范式名称 | 语言生态 | UI更新方式 | 适用场景 | 适用人群 |
|---|---|---|---|---|
| 声明式开发范式 | ArkTS语言 | 数据驱动更新 | 复杂度较大、团队合作度较高的程序 | 移动系统应用开发人员、系统应用开发人员 |
| 类Web开发范式 | JS语言 | 数据驱动更新 | 界面较为简单的程序应用和卡片 | Web前端开发人员 |
丰富的UI框架开发内容与指导，详见UI开发。
应用模型
应用模型是OpenHarmony为开发者服务的抽象提炼，为应用程序开发提供了必要的组件和运行机制。有了应用模型，开发者可以基于统一的应用模型进行开发，使应用开发更加简便和高效。请参考应用模型的构成要素。
随着系统的演进发展，OpenHarmony先后提供了两种应用模型：
Stage模型：
FA（Feature Ability）模型： 自OpenHarmony API 7起支持的模型，已不再作为重点推广。开发详情可参考FA模型开发概述。在快速入门章节，该模型的相关开发内容不再进行详细指导。
FA模型与Stage模型在整体架构与设计思路上的主要区别，具体分析请参考应用模型解读。
快速入门部分包含两个示例页面，并基于Stage模型构建第一个实例，作为第一个实例，以便开发者掌握基本概念和应用开发流程。
工具准备
安装最新版本的 DevEco Studio，访问 这个链接。
安装最新版本的 DevEco Studio，访问 这个链接。
请参考以下链接：配置开发环境，请完成DevEco Studio的安装，并按照文档指引配置开发环境。
在完成上述操作和理解基本概念之后，即可参考构建第一个ArkTS应用（Stage模型）进一步体验和学习。
构建第一个ArkTS应用（Stage模型）
出乎意料地比 asio 性能表现出色，我想这得益于其简单的设计和简洁的代码。
说明 为确保运行效果 本文以DevEco Studio 4.1 Beta1版本为例 点击此处获取下载链接
创建ArkTS工程
当首次启动DevEco Studio时，您需要启动Create Project对话框以生成工程文件。如果当前已经存在一个工程，则在菜单栏依次选择File > New > Create Project对话框来生成新工程。
在开发过程中，我们采用Application 应用开发策略，选择模板“[OpenHarmony]Empty Ability ”，按照以下步骤完成配置：第一步，点击Next；第二步，按照提示完成后续操作。
进入配置工程界面，Compile SDK 选择“11 ”，其他参数保持默认设置即可。
Node 用于配置当前工程运行的 Node.js 版本，可以选择使用已有的 Node.js 或安装新的 Node.js 版本。
点击Finish ，工具会自动生成示例代码和相关资源，等待工程创建完成。
ArkTS工程目录结构（Stage模型）
AppScope变量值为app.json5，表示全局配置信息，详见app.json5配置文件。
entry ：OpenHarmony工程模块，编译构建生成一个HAP包。
src > main > ets：用于存放ArkTS源码。
src > main > ets > entryability：应用/服务的入口。
src > main > ets > pages：应用/服务包含的页面。
src > main > resources：用于存储应用/服务所需的各种资源文件，包括但不限于图形、多媒体、字符串、布局文件等。参考资源文件的分类。
该模块配置文件主要包含HAP包的配置信息、应用/服务在不同设备上的配置信息以及应用/服务的全局配置信息。具体的配置文件说明，请参考module.json5配置文件。
该模块的信息以及编译相关的配置参数，其中包含buildOption和targets配置等。
hvigorfile.ts ：该模块负责编译构建任务，开发者可根据需求自定义相关任务和代码实现。
在编译过程中，启用混淆机制后，代码将被进行编译、混淆和压缩处理，从而保护代码安全。
oh_modules ：用于存放三方库依赖信息。
build-profile.json5 是一种应用级配置文件，它包含了签名配置signingConfigs和产品配置products等信息。
hvigorfile.ts ：应用级编译构建任务脚本。
构建第一个页面
使用文本组件。
在完成工程同步后，打开项目窗口，选择并执行路径“entry > src > main > ets > pages”，即可打开“Index.ets”文件，该文件由Text组件构成。
1. // Index.ets
2. @Entry
3. @Component
4. struct Index {
5. @State message: string = 'Hello World';
6.
7. build() {
8. Row() {
9. Column() {
10. Text(this.message)
11. .fontSize(50)
12. .fontWeight(FontWeight.Bold)
13. }
14. .width('100%')
15. }
16. .height('100%')
17. }
18. }
19. ts添加按钮。
基于默认页面，我们添加了一个Button组件用于响应用户点击事件，从而实现页面跳转。例如，Index.ets 文件的示例如下：
1. // Index.ets
2. @Entry
3. @Component
4. struct Index {
5. @State message: string = 'Hello World';
6.
7. build() {
8. Row() {
9. Column() {
10. Text(this.message)
11. .fontSize(50)
12. .fontWeight(FontWeight.Bold)
13. // 添加按钮，以响应用户点击
14. Button() {
15. Text('Next')
16. .fontSize(30)
17. .fontWeight(FontWeight.Bold)
18. }
19. .type(ButtonType.Capsule)
20. .margin({
21. top: 20
22. })
23. .backgroundColor('#0D9FFB')
24. .width('40%')
25. .height('5%')
26. }
27. .width('100%')
28. }
29. .height('100%')
30. }
31. }
32. ts在编辑器窗口的右上方侧边栏工具栏中，单击Previewer按钮，即可启动预览器。请看预览界面，第一个页面效果如图所示：
构建第二个页面
创建第二个页面。
在“Project”窗口中，打开位于“entry > src > main > ets”的文件夹。右键点击位于“pages”文件夹中的选项，选择创建一个新的ArkTS文件，并将其命名为“Second”文件。点击“Finish”按钮。展开后，您可以看到项目的文件目录结构如下：
用户在右键点击项目文件夹时，可以选择新建页面，无需额外配置相关路由。
在项目窗口中，打开 entry > src > main > resources > base > profile 文件夹。在 main_pages.json 文件的 src 标签中设置第二个页面的路由为 pages/Second。
1. {
2. "src": [
3. "pages/Index",
4. "pages/Second"
5. ]
6. }
7. json添加文本及按钮。
参考第一个页面的布局和样式，在第二个页面中添加文本框组件、按钮组件等，并对它们进行样式设置。Second.ets文件的示例如下：
1. // Second.ets
2. @Entry
3. @Component
4. struct Second {
5. @State message: string = 'Hi there';
6.
7. build() {
8. Row() {
9. Column() {
10. Text(this.message)
11. .fontSize(50)
12. .fontWeight(FontWeight.Bold)
13. Button() {
14. Text('Back')
15. .fontSize(25)
16. .fontWeight(FontWeight.Bold)
17. }
18. .type(ButtonType.Capsule)
19. .margin({
20. top: 20
21. })
22. .backgroundColor('#0D9FFB')
23. .width('40%')
24. .height('5%')
25. }
26. .width('100%')
27. }
28. .height('100%')
29. }
30. }
31. ts实现页面间的跳转
支持页面路由router技术，可以实现页面间的导航功能。通过分析页面url，路由router能够精准定位目标页面，从而实现导航。建议在开发中导入router模块，以实现页面路由功能。
为了实现更优的转场效果等，建议参考Navigation。
第一个页面跳转到第二个页面。
在第一个页面中，跳转按钮关联了点击事件，点击按钮后转到第二页。Index.ets文件的示例如下：
1. // Index.ets
2. // 导入页面路由模块
3. import router from '@ohos.router';
4. import { BusinessError } from '@ohos.base';
5.
6. @Entry
7. @Component
8. struct Index {
9. @State message: string = 'Hello World';
10.
11. build() {
12. Row() {
13. Column() {
14. Text(this.message)
15. .fontSize(50)
16. .fontWeight(FontWeight.Bold)
17. // 添加按钮，以响应用户点击
18. Button() {
19. Text('Next')
20. .fontSize(30)
21. .fontWeight(FontWeight.Bold)
22. }
23. .type(ButtonType.Capsule)
24. .margin({
25. top: 20
26. })
27. .backgroundColor('#0D9FFB')
28. .width('40%')
29. .height('5%')
30. // 跳转按钮绑定onClick事件，点击时跳转到第二页
31. .onClick(() => {
32. console.info(`Succeeded in clicking the 'Next' button.`)
33. // 跳转到第二页
34. router.pushUrl({ url: 'pages/Second' }).then(() => {
35. console.info('Succeeded in jumping to the second page.')
36. }).catch((err: BusinessError) => {
37. console.error(`Failed to jump to the second page.Code is ${err.code}, message is ${err.message}`)
38. })
39. })
40. }
41. .width('100%')
42. }
43. .height('100%')
44. }
45. }
46. ts第二个页面返回到第一个页面。
在第二个页面中，返回按钮与onClick事件关联，点击按钮后转回首页。例如：‘Second.ets ’文件的示例如下。
1. // Second.ets
2. // 导入页面路由模块
3. import router from '@ohos.router';
4. import { BusinessError } from '@ohos.base';
5.
6. @Entry
7. @Component
8. struct Second {
9. @State message: string = 'Hi there';
10.
11. build() {
12. Row() {
13. Column() {
14. Text(this.message)
15. .fontSize(50)
16. .fontWeight(FontWeight.Bold)
17. Button() {
18. Text('Back')
19. .fontSize(25)
20. .fontWeight(FontWeight.Bold)
21. }
22. .type(ButtonType.Capsule)
23. .margin({
24. top: 20
25. })
26. .backgroundColor('#0D9FFB')
27. .width('40%')
28. .height('5%')
29. // 返回按钮绑定onClick事件，点击按钮时返回到第一页
30. .onClick(() => {
31. console.info(`Succeeded in clicking the 'Back' button.`)
32. try {
33. // 返回第一页
34. router.back()
35. console.info('Succeeded in returning to the first page.')
36. } catch (err) {
37. let code = (err as BusinessError).code;
38. let message = (err as BusinessError).message;
39. console.error(`Failed to return to the first page.Code is ${code}, message is ${message}`)
40. }
41. })
42. }
43. .width('100%')
44. }
45. .height('100%')
46. }
47. }
48. ts打开Index.ets文件，点击预览器中的
按钮进行刷新。效果如下图所示：
使用真机运行应用
将搭载OpenHarmony标准系统的开发板与电脑连接。
在File菜单中点击“Project Structure对话框”，在界面对话框中勾选“Automatically generate signature”，等待自动签名完成即可，然后点击OK按钮。如图所示。
在编辑窗口右上角的工具栏，点击
按钮运行。效果如下图所示：
恭喜您使用ArkTS语言开发（Stage模型）成功完成了一个OpenHarmony应用。现在，您可以深入探索OpenHarmony的更多功能，访问这个链接。