HarmonyOS NEXT 从不懂到 ToDo List 实例开发

本文将从一个前端开发者的角度出发,速通鸿蒙 Next 开发的方方面面,并最终开发一个 Todo List 小实例。

简介

首先,鸿蒙使用 ArkTS 作为原生开发语言。如果你熟悉 TypeScript 编程语言,那基本上可以无缝过渡,因为 ArkTS 并不是一门全新的语言,而是在 TypeScript 基础上进行扩展的。这意味着我们可以跳过学习新语言的阶段,只需学习鸿蒙的 UI 框架 ArkUI

类似于 React,ArkUI 框架采用声明式的开发范式来描述 UI,并且内置了完善的状态管理机制,无需像 React 那样面对各种混乱的第三方状态库。

鸿蒙内置组件的布局设计基于 CSS 的概念,包括 marginpaddingflexgrid、栅格系统和媒体查询等,这些都是前端开发者所熟悉的。

鸿蒙 Next 提供了完整的开发、调试、测试和发布一站式 IDE。如果你之前使用过 IntelliJ IDEA,那么对你来说将是无缝衔接的,因为鸿蒙的 DevEco 是基于 IntelliJ IDEA Community 进行深度定制的。但如果你跟我一样是 Neovim 或者 VSCode 的死忠粉的话,也没有关系 DevEco 其实是很好上手的。

IDE 介绍

工欲善其事,必先利其器,我们先看看鸿蒙的 IDE 怎么用

DevEco-Studio 安装

目前提供3个版本可供下载

  • Windows(64-bit)
  • Mac(X86)
  • Mac(ARM)

注意目前版本需要 Node 18.x环境,前端开发者建议安装 nvm,事先切换好 Node 版本。

安装好 nvm 后

nvm install 18.14.1
nvm use 18.14.1
node -v

这样你在安装 DevEco 的时候就可以选择 Local 的 Node 环境了,如果你本地没有 Node,也可以选择全新安装

接下来如果一切顺利,在 Diagnose 界面就会看到满屏的对号,表示安装成功了。

我相信你能摸索着创建一个 Hello Wrold 项目

接下来会看到树形列表中默认创建了大量的文件,跟我刚开始一样,不知如何下手,经过研究发现很多文件是有两份的,一个是模块级的,一个是整个应用级的。

为了清楚起见,我画了一张图,图中左侧列出的文件,都是应用和模块的两个版本的。

整个 entry 目录叫做一个 Module,该目录会编译为一个 .hap 为后缀的文件,HAP 包。

等应用最终上架时,会打包成 .app 为扩展名的文件,上传到华为商店。

Module 不只有 entry 类型的,还有其他类型的,简单起见,我还是总结一张图:

初看是有点头大,其实作为入门,只需要关注的 entry 模块,其他 Module 类型可等到深入开发时再去文档了解。

entry 目录下有一个 src/main/ets/pages/index.ets 文件,这是用户看到的第一个页面,我们先把该文件打开看个大概,后边编程语言的部分会详细介绍对应语法。

@Entry
@Component
struct Index {@State message: string = 'Hello World';build() {Row() {Column() {Text(this.message).fontSize(50).fontWeight(FontWeight.Bold)}.width('100%')}.height('100%')}
}

第一行的 @Entry 装饰器表明这是应用的入口,中间 build() 方法返回的就是整个声明式UI的页面结构。

翻译过来就是一个满高的 Row 组件之中放了一个满宽的 Column 组件,里边放了一个 50 大小文本组件。

右上角选中 previewer,点击 run 按钮即可运行,并预览效果。

输出效果

这就是整个开发流程了,刚才的代码怎么看着这么眼熟,是 TypeScript ?

编程语言

鸿蒙的主要开发语言是 ArkTS(.ets 文件)。看着眼熟是因为它是 TypeScript 的超集,基本上就是 TS 代码,最大的区别或者说特点,就是在编译时对静态类型的检查和分析做了增强,并对一些动态特性做了少量的限制。这使得程序在运行时类型都是已知的,减少了运行时 bug 并提升了程序性能。

比如,强制类型不允许使用 anyunknown 类型。也不能使用 obj as any 之类的语法动态给对象添加属性和方法,更不能在运行时使用 delete 删除属性或方法。在某些需要 any 类型的情况下,建议使用 Record\<string, Object> 类型。

编译器默认打开了 TypeScript 的一些严格模式,比如 strictPropertyInitialization,要求强制给定初始值。strictNullChecks 强制进行空值安全检查等。

总之,你能想到的运行时的动态类型特性都会被限制,都尽量不要使用。更多详细的语法规则可以参考官方文档中关于《从 TypeScript 到 ArkTS 的适配规则》的文章,内容非常详细。实际上,在开发过程中,DevEco Studio 会提供很好的错误报告信息,因此你可以先不必了解这些语法规则,等到遇到问题时再去查询。

UI框架

ArkUI 框架是基于 ArkTS 的UI 框架,使用声明式的开发范式,数据驱动 UI 更新,并且提供了页面级路由导航等。

页面布局方面提供了多种媒体查询,比如

  • 设备类型
  • 窗口宽高监听
  • 折叠屏状态
  • 横竖屏查询

统一了单位,比如

  • vp 虚拟像素
  • fp 字体像素,用户端的设置会乘以系数 1fp = 1vp * scale

并且提供了多种栅格系统,窗口栅格会根据容器宽度,自动匹配栅格数量

栅格size宽度设备
4格small360~600手机竖屏
8格medium600~840手机横屏,pad 竖屏,折叠屏
12格large840~1440pad 横屏,2in1
12格x-large1440~全屏

需要注意的是,目前稳定主推的应用模型叫做Stage模型,如果你在学习的过程中看到FA模型,那就是就是旧版教程,可以不用看了。

光说不练是假把式,下边我们在代码层面了解一下如何声明 UI

声明式UI 描述

声明式 UI 的描述方式如下

Column() {Text('item 1')Divider()Text('item 2')
}

Column 是容器组件,所以后边带{},里边包含子组件,非容器组件则无需{}

给组件配置属性通常用链式调用的方法

Text("hello").fontSize(20).fontColor(Color.Red).fontWeight(FontWeight.Bold);

为了更加清晰,通常会写成这种格式

Text("hello").fontSize(20).fontColor(Color.Red).fontWeight(FontWeight.Bold);

添加事件处理

Button("Click me").onClick(() => {this.myText = "ArkUI";
});

装饰器

ArkUI 中大量的使用的装饰器,包括我们之前看到的 @entry 表示入口,再看一个最简单的自定义组件:

ArkUI 中用 @Component 装饰的 struct 结构代表自定义组件。

@Component
struct MyComponent {@State message: string = 'Hello, World!';build() {// 在 build 函数里返回 UI 描述}
}

目前流行数据驱动 UI 的编程范式,所谓 UI = f(State), 少不了状态,

ArkUI 中用 @State 装饰器来声明状态,Parent 可以直接覆盖 Child State

@Component
struct Parent {build() {Column() {// 父组件覆盖StateMyComponent({ message:"hi" })}}
}

和 React 中的 State 类似,状态的变化可以引起 UI 更新,但注意这个状态不是 immutable 的,UI 是否可以观察到状态的变化要看数据类型,具体要参考详细的文档。

下边是典型的事件处理中修改状态,引起 UI 刷新的例子:

@Component
export struct HelloComponent {@State message: string = 'Hello, World!';build() {Row() {Text(this.message).onClick(() => {// 基础类型的状态变量 message 改变驱动 UI 刷新,// UI从'Hello, World!'刷新为'Hello, ArkUI!'this.message = 'Hello, ArkUI!';})}}
}

@State 只是组件内部的状态。如果想在状态更改时引发 Child 组件的更新,就要了解 @Props 装饰器了

@Props 用于接收 Parent 组件的更新,给接收端属性前加上 @Props 装饰器后,就很类似 React 中的 props 传递了,不同的是 @Props 属性自身改变也会引起 UI 更新,类似 React 的 props 和 state 的结合体,看以下例子:

@Component
export struct ChildComponent {@Prop message: string;build() {Row() {Text(this.message).onClick(()=>{// 本身修改 Props 也会引起重绘this.message += " !"})}}
}

除了单向数据流,ArkUI 还提供了双向数据绑定的装饰器 @Link

跨层级共享数据的 @Provide@Consume 装饰器有些类似 react 中的 useContext

画了个图总结一下,可以根据你的需要用的时候再去查文档。

一个实例

今天做一个学习新语言最常见的简易 ToDo List,请看下边代码,包含了详细注释

// 引入其他组件
import Item from '../ui/Item'@Entry
@Component
struct Index {// 当前文本输入框输入的文字@State todo: string = '';// 整个列表的状态数据@State list: Array<string> = ["学习鸿蒙开发","沟通外包","看剧放松"];build() {// Flex 布局,纵向Flex({ direction: FlexDirection.Column, }) {// 增加一个标题文本Text("待办事项")// .border({ width: 1 }).width("100%").fontSize(28).fontWeight(FontWeight.Bold).textAlign(TextAlign.Start).margin({ bottom: 20 })// 文本输入框,用于添加新待办事项TextInput({ text: this.todo, placeholder: "请输入" }).width("100%").height(45).enterKeyType(EnterKeyType.Done).placeholderColor(Color.Gray).margin({ bottom: 20 }).onChange((value) => {// 文字修改则更新状态,并绑定状态,使之变为受控组件this.todo = value;}).onSubmit((value) => {// 回车时触发,填进列表console.log(String(value))this.list.push(this.todo)this.todo = ''})// 列表组件, 内部要使用 ForEach 渲染 ListItem 项List({ space: 20 }) {ForEach(this.list, (item: string) => {ListItem() {// ListItem 中包装了自定义组件 Item,见 ui/Item.etsItem({ content: item })}.width('100%')}, (item: string, i) => i + item)}.flexGrow(1)// 列表拖拽默认会有弹性特效,取消掉.edgeEffect(EdgeEffect.None)}.padding(18).width('100%').height('100%').backgroundColor('#dddddd')}
}

自定义列表项放入另一个目录 src/main/ets/ui/Item.ets

@Component
export default struct Item {private content?: string;@State isComplete: boolean = false;@BuilderlabelIcon(icon: Resource) {Image(icon).objectFit(ImageFit.Contain).width(28).height(28).margin(20)}build() {Row() {// 条件渲染if (this.isComplete) {// 图标路径 entry/src/main/resources/base/media/ic_ok.pngthis.labelIcon($r('app.media.ic_ok'));} else {// 图标路径 entry/src/main/resources/base/media/ic_default.pngthis.labelIcon($r('app.media.ic_default'));}Text(this.content).fontSize(20).fontWeight(500).opacity(this.isComplete ? 0.4 : 1.0).decoration({ type: this.isComplete ? TextDecorationType.LineThrough : TextDecorationType.None })}.borderRadius(12).backgroundColor("#FFFFFF").width("100%").height("64vp").onClick(() => {this.isComplete = !this.isComplete;})}
}

在模拟器中的显示效果

todo-list.gif

结语

通过上边的学习,可以看出相比于安卓的苹果两大系统,鸿蒙的开发相对于前端开发者来说友好得多。

在如此低迷的经济环境下,衷心希望鸿蒙系统在市场上可以取得大成功,给我们前端开发仔开辟一条新的赛道。



最后

有很多小伙伴不知道学习哪些鸿蒙开发技术?不知道需要重点掌握哪些鸿蒙应用开发知识点?而且学习时频繁踩坑,最终浪费大量时间。所以有一份实用的鸿蒙(HarmonyOS NEXT)资料用来跟着学习是非常有必要的。 

鸿蒙HarmonyOS Next全套学习资料←点击领取!(安全链接,放心点击

这份鸿蒙(HarmonyOS NEXT)资料包含了鸿蒙开发必掌握的核心知识要点,内容包含了(ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等)鸿蒙(HarmonyOS NEXT)技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助,有需要的小伙伴自行领取,限时开源,先到先得~无套路领取!!

鸿蒙(HarmonyOS NEXT)最新学习路线

有了路线图,怎么能没有学习资料呢,小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙(OpenHarmony )学习手册(共计1236页)与鸿蒙(OpenHarmony )开发入门教学视频,内容包含:ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线,请点击→纯血版全套鸿蒙HarmonyOS学习资料

HarmonyOS Next 最新全套视频教程

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

《鸿蒙开发基础》

  • ArkTS语言
  • 安装DevEco Studio
  • 运用你的第一个ArkTS应用
  • ArkUI声明式UI开发
  • .……

《鸿蒙开发进阶》

  • Stage模型入门
  • 网络管理
  • 数据管理
  • 电话服务
  • 分布式应用开发
  • 通知与窗口管理
  • 多媒体技术
  • 安全技能
  • 任务管理
  • WebGL
  • 国际化开发
  • 应用测试
  • DFX面向未来设计
  • 鸿蒙系统移植和裁剪定制
  • ……

《鸿蒙进阶实战》

  • ArkTS实践
  • UIAbility应用
  • 网络案例
  • ……

大厂面试必问面试题

鸿蒙南向开发技术

鸿蒙APP开发必备

鸿蒙生态应用开发白皮书V2.0PDF


获取以上完整鸿蒙HarmonyOS学习资料,请点击→

总结
总的来说,华为鸿蒙不再兼容安卓,对中年程序员来说是一个挑战,也是一个机会。只有积极应对变化,不断学习和提升自己,他们才能在这个变革的时代中立于不败之地。 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/29329.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux常⽤服务器构建-samba

目录 1. 介绍 2. 安装 3. 配置 3.1 创建存放共享⽂件的路径 3.2 创建samba账户 4 重启samba 5. 访问共享⽂件 5.1 mac下访问⽅式 5.2 windows下访问⽅式 1. 介绍 Samba 是在 Linux 和 UNIX 系统上实现 SMB 协议的⼀个免费软件&#xff0c;能够完成在 windows 、 mac 操作系统…

统计分析方法-非参数检验-python

文章目录 前言非参数检验特点常见的非参数检验一、Cliffs Delta动机定义二、Wilcoxon Signed-Rank Test定义三、 Friedman检验适用场景公式python 代码Wilcoxon Signed-Rank Test和 cliffs deltaFriedman前言 记录一下自非参数检验的学习过程,如有不对请纠正。 非参数检验 …

[AI资讯·0618] 快手AI模型“可灵“在质量优于Sora,OpenAI和谷歌发布新技术推动AI视频推理发展,Gemini1.5Pro在该榜单中表现突出

AI资讯 陕西推出AI千亿级发展计划&#xff0c;五大产业集群&#xff0c;智算超3000P试了快手的视频AI&#xff0c;竟然有点领先“技术故障”背刺巴菲特&#xff0c;金融大模型到底靠不靠谱&#xff1f;Gemini视频推理遥遥领先GPT-4o&#xff0c;首个视频多模态基准Video-MME国…

dockerhub无法拉取镜像后,国内怎么拉取镜像?

一、比如你拉取的镜像在hub.docker 你要拉取的镜像前面加前缀&#xff1a; m.daocloud.io 这里比如我要拉取&#xff1a; nginx-ingress:latest 正常我们是 docker pull nginx/nginx-ingress 现在因为某些原因&#xff0c;我们需要下面这样写&#xff1a; docker pull …

重新定义DPU——中科驭数2024产品发布会,6月19日诚邀莅临!

数据中心正经历着前所未有的变革&#xff0c;DPU作为数据中心第三颗主力芯片&#xff0c;正引领行业步入一个高效、灵活的算力新时代。 中科驭数在业内率先完成三代DPU芯片研发迭代&#xff0c;并完成规模化商用落地。一路以来&#xff0c;我们衷心地感谢客户和合作伙伴的鼎力…

避雷!又6本期刊被On Hold!ELSEVIER旗下影响因子高达10+SSCI上榜

【SciencePub学术】继《INFORMATION SCIENCES》被On Hold 之后&#xff0c;又新增3本SCIE期刊、3本SSCI期刊被列入On Hold名单。其中包含ELSEVIER旗下影响因子高达10的《RESOURCES POLICY》。 官方现在对期刊质量的管控越来越严格了&#xff0c;被标记为On Hold后的期刊中&…

【自动驾驶】串口通信控制与反馈

文章目录 串口通信控制与反馈通讯协议上行数据帧解析下行数据帧解析串口通信控制与反馈 通讯协议 上行数据指的是机器人底盘向上位机发送的状态数据, 下行数据指的是上位机向机器人底盘发送的控制信息。 上行数据帧解析 机器人运动底盘通过串口发送的数据包格式,如下表所…

SQL Server入门-SSMS简单使用(2008R2版)-1

环境&#xff1a; win10&#xff0c;SQL Server 2008 R2 参考&#xff1a; SQL Server 新建数据库 - 菜鸟教程 https://www.cainiaoya.com/sqlserver/sql-server-create-db.html 第 2 课&#xff1a;编写 Transact-SQL | Microsoft Learn https://learn.microsoft.com/zh-cn/…

LabVIEW电池管理系统测试平台

随着混合动力汽车技术的快速发展&#xff0c;对电池管理系统&#xff08;BMS&#xff09;的测试需求显著增加。利用LabVIEW软件开发了一款电池管理系统测试平台&#xff0c;通过模拟电池行为验证BMS的控制策略&#xff0c;从而降低成本、缩短开发周期&#xff0c;并提高整车的能…

基于MYSQL的JAVA初级优化措施

世界是草台班子,这句话视乎很流行! 经历过几家创业公司的项目优化,以及大公司项目. 很多优化非常初级,用心点都能自己找出来! 其实主要原因当初是为了赶进度,能省则省.什么设计啊? 什么性能压测啊. 都省掉吧! 质量都要靠测试人员帮忙找出来,更何况是性能问题呢! 那怕是配齐了…

线上扭蛋机小程序开发,潮玩时代的创新发展

随着互联网的发展&#xff0c;扭蛋机市场也进行了创新发展&#xff0c;线上扭蛋机小程序为市场带来了新活力。扭蛋机小程序将传统的模式与互联网结合&#xff0c;打造一个便捷有趣的扭蛋机市场。 一、扭蛋机小程序 在扭蛋机小程序上&#xff0c;用户通过扭蛋机抽取各种系列的…

如何查看Linux系统中占用CPU资源高的进程

在Linux系统中&#xff0c;管理进程并监控其资源使用情况是一项重要的任务。当系统性能下降或响应变慢时&#xff0c;通常是由于某个或多个进程占用了过多的CPU资源。为了找出这些进程并采取相应的措施&#xff0c;我们可以使用多种命令行工具。以下是几种常用的方法&#xff0…

Ubuntu乌班图安装VIM文本编辑器工具

系列文章目录 Ubuntu-24.04-live-server-amd64安装界面中文版 Ubuntu-24.04-live-server-amd64启用ssh Ubuntu安装qemu-guest-agent 文章目录 系列文章目录前言一、安装VIM&#xff1f;二、VIM基本设置总结 前言 从centos转到Ubuntu发现默认安装没有vi 一、安装VIM&#xff1…

SpringMVC系列十一: 文件上传与自定义拦截器

文章目录 SpringMVC文件上传基本介绍需求分析 / 图解应用实例-代码实现 自定义拦截器什么是拦截器自定义拦截器执行流程分析图自定义拦截器应用实例快速入门注意事项和细节Debug执行流程 多个拦截器多个拦截器执行流程示意图应用实例1代码实现注意事项和细节 应用实例2 作业布置…

HTML 全局属性介绍及示例

HTML 全局属性是一组可以在任何HTML元素中使用的属性。这些属性提供了一种方式来定义元素的通用行为或外观。以下是一些常见的HTML全局属性及其示例。 id id 属性为元素提供了一个唯一的标识符。它不能在 <head>, <html>, <meta>, <script>, <sty…

9.2.2 DeepLab系列模型中每一代的创新是什么?是为了解决什么问题?

9.2.2 DeepLab系列模型中每一代的创新是什么&#xff1f;是为了解决什么问题&#xff1f; 前情回顾&#xff1a;9.2.1 简述图像分割中经常用到的编码器-解码器网络结构的设计理念。 DeepLab是Google 团队提出的一系列图像分割算法。 DeepLab v1在2014年被提出&#xff0c;并在…

微信小程序接入lottie动画

1、注意&#xff1a;canvas渲染出来的层级太高&#xff0c;当有弹窗的情况会暴露在弹窗外 模拟器上会有这个问题&#xff0c;线上版本不会有 2、需求 需要把lottie动画在小程序的环境下进行展示 3、什么是lottie动画 由Airbnb开发并开源。允许设计师将复杂的矢量动画导出为…

欢迎莅临ARCHE-2024,共享智慧档案盛宴!

敬邀参观&#xff01;2024第三届上海国际智慧档案展览会&#xff08;ARCHE-2024&#xff09;将于2024年6月19-21日在上海跨国采购会展中心盛大开幕。深圳市铨顺宏科技有限公司将展示最新的智慧档案技术与解决方案&#xff0c;展位号H010-H011。期待您的光临&#xff0c;共同探索…

对比 Axios 和 Fetch:选择最适合的 HTTP 请求方法

在前端开发中&#xff0c;处理 HTTP 请求是一个常见且重要的任务。JavaScript 提供了多种方式来发送网络请求&#xff0c;其中最受欢迎的两种方式分别就是 Fetch API 和 Axios。尽管两者都能完成同样的任务&#xff0c;即从客户端向服务器发送请求并接收响应&#xff0c;但它们…

无线麦克风推荐哪些品牌?一文读懂家用无线麦克风哪个牌子好!

​在这个充满创意与表达的时代&#xff0c;无线领夹麦克风以其独特的魅力&#xff0c;成为了声音创作者们的得力助手。它小巧便携&#xff0c;功能强大&#xff0c;无论是日常拍摄、直播互动还是专业演出&#xff0c;都能轻松应对&#xff0c;让你的声音随时随地清晰传递。那么…