从0开始的HarmonyOS NEXT —— 认识基础架构到hello world页面添加（第一章）

⭐前言

大家好，我是yma16，本文分享从0开始的HarmonyOS NEXT —— 认识基础架构到hello world页面添加（第一章）。
HarmonyOS SDK
以Kit维度提供丰富、完备的开放能力，涵盖应用框架、系统、媒体、图形、应用服务、AI六大领域。

• 应用框架相关Kit开放能力：Ability Kit（程序框架服务）、ArkUI（方舟UI框架）等。
• 系统相关Kit开放能力：Universal Keystore Kit（密钥管理服务）、Network Kit（网络服务）等。
• 媒体相关Kit开放能力：Audio Kit（音频服务）、Media Library Kit（媒体文件管理服务）等。
• 图形相关Kit开放能力：ArkGraphics 2D（方舟2D图形服务）、Graphics Accelerate Kit（图形加速服务）等。
• 应用服务相关Kit开放能力：Game Service Kit（游戏服务）、Location Kit（位置服务）等。
• AI相关Kit开放能力：Intents Kit（意图框架服务）、HiAI Foundation Kit（HiAI Foundation服务）等。

⭐应用程序包

模型

💖Stage模型

项目结构目录图

编译态包结构
不同类型的Module编译后会生成对应的HAP、HAR、HSP等文件

• HAP（Harmony Ability Package）是应用安装和运行的基本单元。HAP包是由代码、资源、第三方库、配置文件等打包生成的模块包，其主要分为两种类型：entry(主模块)和feature（特性模块）
• HAR（Harmony Archive）是静态共享包，可以包含代码、C++库、资源和配置文件。通过HAR可以实现多个模块或多个工程共享ArkUI组件、资源等相关代码。
• HSP（Harmony Shared Package）是动态共享包，可以包含代码、C++库、资源和配置文件，通过HSP可以实现代码和资源的共享。HSP不支持独立发布，而是跟随其宿主应用的APP包一起发布，与宿主应用同进程，具有相同的包名和生命周期。

💖FA模型

FA模型与Stage模型不同之处在于HAP内部文件存放位置不同，FA模型将所有的资源文件、库文件和代码文件都放在assets文件夹中，在文件夹内部进一步区分。

config.json是应用配置文件，IDE会自动生成一部分模块代码，开发者按需修改其中的配置。详细字段请参见应用配置文件。

assets是HAP所有的资源文件、库文件和代码文件的集合，内部可以分为entry和js文件夹。entry文件夹中存放的是resources目录和resources.index文件。

resources目录用于存放应用的资源文件（字符串、图片等），便于开发者使用和维护，详见资源文件的使用。

resources.index是资源索引表，由IDE调用SDK工具生成。

js文件夹中存放的是编译后的代码文件。

pack.info是Bundle中用于描述每个HAP属性的文件，例如app中的bundleName和versionCode信息、module中的name、type和abilities等信息，由IDE工具构建Bundle包时自动生成。

💖ArkTS语言

官方文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/learning-arkts-V5

⭐安装开发环境

💖下载开发工具

开发工具下载地址：
https://developer.huawei.com/consumer/cn/download/deveco-studio

⭐创建一个简单的hello world 程序

💖创建应用

创建应用
https://developer.huawei.com/consumer/cn/service/josp/agc/index.html#/harmonyOSDevPlatform

得到app的id

创建项目，填入申请的包名

安装依赖过程如果出现失败，请查看日志，可能和镜像地址有关。

💖运行预览

打开pages目录下的index.ets文件

@Entry
@Component
struct Index {@State message: string = 'Hello World!\nI am yma16';build() {RelativeContainer() {Text(this.message).id('textId').fontSize(42).fontWeight(FontWeight.Bold).fontColor('#00a386').alignRules({center: { anchor: '__container__', align: VerticalAlign.Center },middle: { anchor: '__container__', align: HorizontalAlign.Center }})}.height('100%').width('100%')}
}

运行

💖添加页面

在pages目录下创建ArkTs file（文件后缀ets）。
Home.ets

// 导入页面路由模块
import { router } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';
// Home.ets
@Entry
@Component
struct Home {@State message: string = 'Home page'build() {Row() {Column() {Text(this.message).fontSize(50).fontColor('#00a386').fontWeight(FontWeight.Bold)// backButton() {Text('Back Index').fontSize(25).fontWeight(FontWeight.Bold)}// 跳转按钮绑定onClick事件，点击时跳转到home.onClick(() => {console.info(`Succeeded in clicking the 'back Index' button.`)// 跳转到第Index页router.pushUrl({ url: 'pages/Index' }).then(() => {console.info('Succeeded in jumping to the home page.')}).catch((err: BusinessError) => {console.error(`Failed to jump to the Index page. Code is ${err.code}, message is ${err.message}`)})}).type(ButtonType.Capsule).margin({top: 20}).backgroundColor('#0D9FFB').width('40%').height('20%')}.width('100%')}.width('100%')}
}

添加路由
entry > src > main > resources > base > profile下的main_pages.json添加路由

预览效果

跳转入口入口实现来回跳转的闭环逻辑
Index.ets

// 导入页面路由模块
import { router } from '@kit.ArkUI';
import { BusinessError } from '@kit.BasicServicesKit';@Entry
@Component
struct Index {@State message: string = 'Hello World!\nI am yma16';build() {RelativeContainer() {Text(this.message).id('textId').fontSize(42).fontWeight(FontWeight.Bold).fontColor('#00a386').alignRules({center: { anchor: '__container__', align: VerticalAlign.Center },middle: { anchor: '__container__', align: HorizontalAlign.Center }})Button() {Text('Next home').fontSize(30).fontWeight(FontWeight.Bold)}// 跳转按钮绑定onClick事件，点击时跳转到home.onClick(() => {console.info(`Succeeded in clicking the 'Next home' button.`)// 跳转到第二页router.pushUrl({ url: 'pages/Home' }).then(() => {console.info('Succeeded in jumping to the home page.')}).catch((err: BusinessError) => {console.error(`Failed to jump to the home page. Code is ${err.code}, message is ${err.message}`)})}).type(ButtonType.Capsule).margin({top: 20}).backgroundColor('#0D9FFB').width('40%').height('20%')}.height('100%').width('100%')}
}

跳转效果：

⭐结束

有鸿蒙硬件支撑，而且HarmonyOS NEXT 的社区文档全面，当下正是开发者学习鸿蒙开发范式的好机会。

ui文档地址：
https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-ui-development-V5
博客社区活跃
https://developer.huawei.com/consumer/cn/forum/

本文分享到这结束，如有错误或者不足之处欢迎指出！下一期开启鸿蒙简单的应用工具开发。

👍 点赞，是我创作的动力！

⭐️ 收藏，是我努力的方向！

✏️ 评论，是我进步的财富！

💖 最后，感谢你的阅读！