技术博客
首页 所有文章 标签 分类 关于
技术博客

目录

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

 收录于 Harmonos
   约 2659 字   预计阅读 6 分钟 
https://bing.ee123.net/img/rand?artid=140751524

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

https://i-blog.csdnimg.cn/blog_migrate/3bd844d435e5af7d2ba0e1b4c022cb78.gif

⭐前言

大家好，我是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模型

项目结构目录图

https://i-blog.csdnimg.cn/direct/8649e34356714bb0838436bf72d86322.png

文件类型说明
配置文件包括应用级配置信息、以及Module级配置信息： AppScope > app.json5：app.json5配置文件，用于声明应用的全局配置信息，比如应用Bundle名称、应用名称、应用图标、应用版本号等。 Module_name > src > main > module.json5：module.json5配置文件，用于声明Module基本信息、支持的设备类型、所含的组件信息、运行所需申请的权限等。
ArkTS源码文件Module_name > src > main > ets：用于存放Module的ArkTS源码文件（.ets文件）。
资源文件包括应用级资源文件、以及Module级资源文件，支持图形、多媒体、字符串、布局文件等，详见资源分类与访问。AppScope > resources ：用于存放应用需要用到的资源文件。 Module_name > src > main > resources ：用于存放该Module需要用到的资源文件。
其他配置文件用于编译构建，包括构建配置文件、编译构建任务脚本、混淆规则文件、依赖的共享包信息等。build-profile.json5：工程级或Module级的构建配置文件，包括应用签名、产品配置等。 hvigorfile.ts：应用级或Module级的编译构建任务脚本，开发者可以自定义编译构建工具版本、控制构建行为的配置参数。obfuscation-rules.txt：混淆规则文件。混淆开启后，在使用Release模式进行编译时，会对代码进行编译、混淆及压缩处理，保护代码资产。oh-package.json5：用于存放依赖库的信息，包括所依赖的三方库和共享包。

编译态包结构

不同类型的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语言

官方文档：

⭐安装开发环境

💖下载开发工具

开发工具下载地址：

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

💖创建应用

创建应用

https://i-blog.csdnimg.cn/direct/2a025718d8f649e58a35ae36374df50a.png

得到app的id

https://i-blog.csdnimg.cn/direct/1a3a756a8a4c4d9cbb7432a2f90bc9b6.png

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

https://i-blog.csdnimg.cn/direct/554279857e114be39c6cbf70d1b2c2d7.png

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

💖运行预览

打开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%')
  }
}

运行

https://i-blog.csdnimg.cn/direct/42e26f2d4c9f4c5da0bf8f50f7605c05.png

💖添加页面

在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)

        // back
        Button() {
          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添加路由

https://i-blog.csdnimg.cn/direct/c8a1c895b7c5451c9e8781cbef17f369.png

预览效果

https://i-blog.csdnimg.cn/direct/5758c8afb4eb48188a1b27f88840d32b.png

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

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%')
  }
}

跳转效果：

https://i-blog.csdnimg.cn/direct/d595f0a45c7740c182924c0e2839303d.gif

⭐结束

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

ui文档地址：

博客社区活跃

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

https://i-blog.csdnimg.cn/blog_migrate/3aef2c61e75c93ef55e7409002019174.png

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

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

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

💖 最后，感谢你的阅读！

更新于 2024-07-28
 华为, Harmonyos, Arkts
返回 | 主页