HarmonyOS应用开发初体验

最新推荐文章于 2024-07-21 10:17:51 发布

xintianyou丶

最新推荐文章于 2024-07-21 10:17:51 发布

阅读量315

点赞数

文章标签： javascript 鸿蒙

本文链接：https://blog.csdn.net/xinTianou123/article/details/134917560

版权

9月25日华为秋季全场景新品发布会上，余承东宣布，全面启动鸿蒙原生应用，HarmonyOS NEXT开发者预览版将在2024年第一季度面向开发者开放。

最近鸿蒙开发可谓是火得一塌糊涂，各大培训平台都开设了鸿蒙开发课程。美团发布了鸿蒙高级工程师、鸿蒙基建工程师等多个鸿蒙开发相关岗位。根据脉脉平台，美团鸿蒙基建工程师岗位给出的月薪在4~6万之间。

那么我们就一起来了解一下鸿蒙究竟是何方神圣。

什么是 HarmonyOS？

HarmonyOS（鸿蒙操作系统）是华为公司开发的一款基于微内核的分布式操作系统。它是一个面向物联网（IoT）时代的全场景操作系统，旨在为各种类型的设备提供统一的操作系统平台和开发框架。HarmonyOS 的目标是实现跨设备的无缝协同和高性能。

运行Hello World

按照国际惯例，先写个hello world，这一步可以直接跟着官方文档走，该文档介绍了如何下载安装开发工具、配置环境、创建项目、熟悉开发工具界面、如何运行一个hello world、以及工程每个目录和文件的作用，写的很详细。

这一步无需写任何代码，使用官方的模板运行即可。最终效果如下：

写个todoList

成功运行hello world后，继续按照国际惯例，我们来写个todoList。

这一步需要先了解一下ArkTS

前言

Mozilla创造了JS，它和HTML（负责页面内容）、CSS（负责页面布局和样式）共同组成了Web页面/应用开发的基础。

Microsoft创建了TS，是JS的超集，扩展了JS的语法。

但鸿蒙官方认为

基于JS的前端框架以及TS的引入，进一步提升了应用开发效率，但依然存在一些不足。

例如：

从开发者维度来看：

写一个应用需要了解三种语言（JS/TS、HTML和CSS）。这对Web开发者相对友好，但对非Web开发者来说，负担较重。

从运行时维度来看：

在语言运行时方面，尽管TS有了类型的加持，但也只是用于编译时检查，然后通过TS Compiler转成JS，运行时引擎还是无法利用到基于类型系统的优化。
在渲染方面，主流Web引擎由于本身复杂度以及历史原因，性能、资源占用方面与常见OS原生框架都有一定的差距，尤其在移动平台上。React Native通过渲染架构的改进一定程度上提升了性能体验，但在平台渲染效果和能力的一致性，以及JS语言性能等方面还是存在一定的不足。

Google在2018年底推出的Flutter：

Dart语言生态。整体而言，Dart和主流语言生态相比还是有非常大的差距。

所以，Huawei从语言生态、开发效率、性能体验、跨设备/跨平台能力几个维度进行了重点考虑，进一步推出了ArkTS。

ArkUI开发框架

ArkTS声明式开发范式

开始开发TodoList

pages目录下新建一个TodoList.ets文件。
引入router模块。
在hello world的基础上，再加一个Button组件，添加一个点击事件，跳转到todoList页面。

只要是在pages目录下的，都属于页面，跳转时的路径直接写目标文件名。

此时效果如下：

点击一下，就跳转到了新页面，新页面代码及效果如下。活动列表先直接写死，然后使用ForEach循环，遍历显示列表文字，挺好，没毛病。

但是就这样显示一下也没啥意义，下面再来加点交互。

在view目录下新建一个TodoItem.ets文件，表示todo的每一项的组件。
在TodoList.ets文件中引入TodoItem组件。
遍历调用组件，传递参数，给每一项加个下边距。

TodoItem.ets组件代码如下：

使用@Component装饰器声明一个自定义组件。
定义私有变量name接收父组件传来的参数。
使用@State装饰器定义状态变量isComplete表示当前事件是否完成。
使用@Builder自定义构建函数，这是一种轻量的元素复用机制，可以将重复使用的UI元素抽象成一个方法。此时这个函数用来渲染一个多选框，接收一个图标参数传递给Image组件。
准备两个图标文件，ic_ok.png和ic_default.png，分别表示事件已完成和未完成，放在resource/base/media目录中。
如果当前事件已完成，就使用已完成的图标，这里使用$r方法，传入app.media.xx，表示的就是resource/base/media目录中的文件，只需要写到文件名，后缀可以忽略。
文字样式，如果已完成就降低透明度，加个中划线表示已删除。
添加点击事件，切换是否完成状态。