前端的春天！拥抱HarmonyOS4.0

前言

最近刚刚了解到鸿蒙开发，发现鸿蒙开发4.0使用的是ArkTs，据了解鸿蒙NEXT将在明年（2024年）不再兼容安卓（非常期待），对于有一定基础TypeScript且是大前端方向的我而言，产生了浓厚的学习兴趣，其实我心里暗自想的是前端的春天来了💕，以下是本人学习过程中做的一些笔记，包括实用插件和一些注意事项。

安装 DevEco Studio

这里推荐大家去 HarmonyOS 观看 安装教程，笔者不在此赘述

一、项目目录

1.工程级目录

 其中详细如下：

• AppScope 中存放应用全局所需要的资源文件。
• entry 是应用的主模块，存放HarmonyOS应用的代码、资源等。
• oh_modules 是工程的依赖包，存放工程依赖的源文件。
• build-profile.json5 是工程级配置信息，包括签名、产品配置等。
• hvigorfile.ts 是工程级编译构建任务脚本，hvigor是基于任务管理机制实现的一款全新的自动化构建工具，主要提供任务注册编排，工程模型管理、配置管理等核心能力。
• oh-package.json5 是工程级依赖配置文件，用于记录引入包的配置信息。

在 AppScope，其中有resources文件夹和配置文件app.json5。AppScope>resources>base中包含element和media两个文件夹。

• 其中element文件夹主要存放公共的字符串、布局文件等资源。我们可以在这个文件夹下定义样式的具体数值，例如我想定义我的背景颜色为某个颜色，我可以在该目录下的color.json中这样的定义

css

复制代码

{ "color": [ { "name": "start_window_background", "value": "#FFFFFF" }, { "name": "page_background", "value": "#F1F3F5" } ] }

以上代码为您展示了，一个name为page_background的字段，它的value值为#F1F3F5，意味着我可以在页面任意地方用以下形式使用

bash

复制代码

.backgroundColor($r('app.color.page_background'))

定义其他全局变量与此方法类似，请自行尝试。

• media存放全局公共的多媒体资源文件。例如我们可以在这存放我们开发所需的icon、图片、语音等等。

2.模块级目录

entry > src 目录中主要包含总的main文件夹，单元测试目录ohosTest，以及模块级的配置文件。

 进入 src>main>ets 目录中，其分为entryability、pages两个文件夹。

• entryability存放ability文件，用于当前ability应用逻辑和生命周期管理。
• pages存放UI界面相关代码文件，初始会生成一个Index页面。

![[ets子文件展示.png]]

前期，在此目录下 新增2 个文件夹：common和view

• common用于存放通用数据或约束
• view存放我们写的自定义组件

resources目录下存放模块公共的多媒体、字符串及布局文件等资源，分别存放在element、media文件夹中。

二、三个重要配置

1.app.json5

AppScope>app.json5 是应用的全局的配置文件，用于存放应用公共的配置信息。

2.module.json5

entry>src>main>module.json5 是模块的配置文件，包含当前模块的配置信息。

3.main_pages.json

src/main/resources/base/profile/main_pages.json 文件保存的是页面page的路径配置信息，所有需要进行路由跳转的page页面都要在这里进行配置。

三、插件分享

以下涉及到无法在编辑器中下载的插件我已放在此 链接 提取码：undx

1.Chinese

汉化插件，让国人开发者更加如鱼得水

2.Atom Material File Icons

提供文件和文件夹图标支持，让你的项目看的更加赏心悦目

3.One Dark theme

一款暗色系主题插件，非常适合在晚上偷偷卷代码

4.Material Theme UI

一款多色系主题插件，自2021年后需要收费使用，本节文末提供下载链接

5.Rainbow Brackets

括号匹配彩虹色

6.Indent Rainbow

代码缩进提供色彩支持,非常适合控制代码格式

四、Hello Harmony

1.预览

快速在本地预览已编写的页面

2.模拟器

通过模拟器预览和调试页面

1）安装模拟器

注：创建过程中如有安装依赖等提示，按照提示安装即可

2）使用设备

运行成功！

五、组件

1.装饰器

形如@Component、@Entry通过 @+关键字 组成的叫装饰器，它内置了一些方法，通过这类装饰器可以快速构建页面

2.自定义组件

自定义组件： 通过组合基础组件，封装得到的可复用，可组合的UI单元

ArkTS 通过struct声明组件名，并通过@Component和@Entry装饰器，来构成一个自定义组件。

build函数内部进行相应的声明式UI描述

这里以待办清单为例

scss

复制代码

@Component export default struct ToDoItem{ private content?: string; @State isComplete: boolean = false; @Builder labelIcon(icon: Resource) { Image(icon) .objectFit(ImageFit.Contain) .width("28vp") .height("28vp") .margin("20vp") } build() { Row() { if (this.isComplete) { this.labelIcon($r('app.media.ic_ok')); } else { this.labelIcon($r('app.media.ic_default')); } Text(this.content) .fontSize("20fp") .fontWeight(500) .opacity(this.isComplete ? 0.4: 1) .decoration({ type: this.isComplete ? TextDecorationType.LineThrough : TextDecorationType.None }) } .borderRadius(24) .backgroundColor($r('app.color.start_window_background')) .width('93.3%') .height("64vp") .onClick(() => { this.isComplete = !this.isComplete; }) } }

以上代码为您展示了待办清单中的 待办项子组件（这里并未展示在父组件中使用和传值，但实际是通过在父组件中导入并向该组件传递值的）

3.容器组件

容器组件： 描述多个组件间布局关系的组件

1）Row

行布局容器：横布局为横向的空间。如图为从左到右依次排列Image Text组件

2）Column

列布局：列布局为竖向的空间。如图为从上到示依次排列title todoitem组件（X3）

六、路由跳转

我这里以pages目录下的ToDoListPage为例

1.页面编写

打开Index.ets,导入router方法

javascript

复制代码

import router from '@ohos.router';

在主页面里添加一个按钮并定义点击事件

css

复制代码

Button('跳转待办事项').onClick(()=>{ router.pushUrl({ url:"pages/ToDoListPage" }) })

完整代码如下：

typescript

复制代码

import router from '@ohos.router'; @Entry @Component struct Index { @State message: string = 'Hello Harmony' build() { Row() { Column() { Text(this.message) .fontSize(50) .fontWeight(FontWeight.Bold) .fontColor('blue') Button('跳转待办事项').onClick(()=>{ router.pushUrl({ url:"pages/ToDoListPage" }) }) } .width('100%') } .height('100%') } }

2.页面装配

以上方法定义好之后，心急的小伙伴已经点击按钮了吧？但是会惊讶的发现居然没有跳转，这是为什么呢？答案就在entry>src>main>resource>base>profile>main_pages.json 中，当我们写好页面与方法，我们需要在此文件中装配页面才能完成路由跳转。

打开main_pages.json在下方添加

css

复制代码

{ "src": [ "pages/Index", "pages/ToDoListPage" ] }

接下来就可以点击按钮啦

效果就是这样滴

总结

本文为您讲述了使用DevEco Studio编译器入门开发鸿蒙，重点涉及到其使用方法和提效插件，帮助您快速入门鸿蒙系统4.0，希望本文能帮助您对鸿蒙开发有一个基本认识。欢迎大家来纠正错误。