HarmonyOS应用开发初体验

9月25日华为秋季全场景新品发布会上,余承东宣布,全面启动鸿蒙原生应用,HarmonyOS NEXT开发者预览版将在2024年第一季度面向开发者开放。
image
最近鸿蒙开发可谓是火得一塌糊涂,各大培训平台都开设了鸿蒙开发课程。美团发布了鸿蒙高级工程师鸿蒙基建工程师等多个鸿蒙开发相关岗位。根据脉脉平台,美团鸿蒙基建工程师岗位给出的月薪在4~6万之间。

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

什么是 HarmonyOS?

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

运行Hello World

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

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

写个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

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

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

此时效果如下:

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

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

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

TodoItem.ets组件代码如下:

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

image

总结

  1. 文档很详细,官方提供了非常详细的学习路径指引
    image
  2. 书写布局和样式的代码,非常像Flutter,逻辑代码就是JS/TS,对于前端开发人员,很好上手。
  3. 开发体验,目前我使用的这个版本,还不支持热更新,修改玩代码需要重启。
  4. 非常耗内存,并且官方提供的模拟器非常卡,建议使用真机。
    image
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值