一.HarmonyOS NEXT应用开发实战---开箱即用的应用首页页面
1.1 项目背景
HarmonyOS（鸿蒙操作系统）是华为公司推出的一种分布式操作系统。它被设计为一种全场景、全连接的操作系统，旨在实现在各种设备之间的无缝协同和共享，包括智能手机、平板电脑、智能穿戴、智能家居、车载系统等。HarmonyOS的目标是构建一个统一的、开放的、全场景的操作系统生态系统。
HarmonyOS NEXT是华为公司自研的操作系统，其特点可以归纳如下：
- 自研与创新：HarmonyOS NEXT是鸿蒙系统抛弃Linux内核及安卓开放源代码项目（AOSP）等代码的首个大版本。该系统从编程语言到编译器都是全栈自研，采用了诸如"盘古"AI大模型、"MindSpore"AI框架、"DevEco Studio"等集成开发环境，以及"HarmonyOS Design"设计系统、"ArkUI"等编程框架，实现了系统的全面自主研发。
- 减少对安卓的依赖：HarmonyOS NEXT不再兼容安卓应用，仅支持鸿蒙内核和鸿蒙系统的应用。这一变化标志着华为在解决因美国商务部将华为列入"实体清单"而带来的谷歌GMS无法继续为华为设备提供服务的问题的同时，也打破了外界对鸿蒙系统"安卓换壳"的质疑。
- 系统优化与性能提升：HarmonyOS NEXT通过减少40%的冗余代码，提升了系统的流畅度、能效和安全性。其内核采用了微内核架构，提供了高效的内存管理机制、支持多种文件系统以及丰富的设备驱动程序，从而保证了系统的高效、稳定和安全性。
- 生态建设与应用推广：华为鸿蒙原生应用版图已经成型，多个领域的企业和开发者陆续宣布加入鸿蒙生态。HarmonyOS NEXT的推出预示着将会有大量原生HarmonyOS应用的推出，满足迅速增长的用户需求。华为计划到2024年开发出5000个原生鸿蒙应用，并最终实现50万个原生应用的宏伟目标。
- 版本与发布：HarmonyOS NEXT的开发者预览版于2023年8月4日发布，星河版于2024年1月18日正式面向开发者开放申请。面向消费者的商用版本计划在今年四季度发布。同时，华为计划在下半年推出多款搭载HarmonyOS NEXT的全场景新品，包括直板旗舰、折叠旗舰、中端机、平板、手表等设备。
综上所述，HarmonyOS NEXT是华为在操作系统领域的一次重大创新，通过全面自主研发和优化，旨在为用户提供更加高效、稳定和安全的系统体验，同时推动鸿蒙生态的快速发展和广泛应用。
1.2 ArkTS详解
ArkTS是鸿蒙生态的应用开发语言。它在保持TypeScript（简称TS）基本语法风格的基础上，对TS的动态类型特性施加更严格的约束，引入静态类型。同时，提供了声明式UI、状态管理等相应的能力，让开发者可以以更简洁、更自然的方式开发高性能应用。 自然简洁语法 ArkTS提供了简洁自然的声明式语法、组件化机制、数据-UI自动关联等能力，实现了贴近自然语言，书写效率更高的编程方式，为开发者带来易学、易懂、极简开发的优质体验。 轻量化并发机制 ArkCompiler运行时在HarmonyOS上提供了Worker API支持并发编程。在运行时实例内存隔离的基础上，ArkCompiler通过共享运行实例中的不可变或者不易变的对象、内建代码块、方法字节码等技术手段，优化了并发运行实例的启动性能和内存开销。
二.HarmonyOS NEXT应用开发实战---开箱即用的应用首页页面
2.1 ArkTS页面源码
scss
Tabs({ barPosition: BarPosition.End, controller: this.mTabController }) {
TabContent() {
Column() {
Swiper() {
Image($r('app.media.1'))
.width("353.75vp")
.height("133.85vp")
Image($r('app.media.2'))
.width("353.75vp")
.height("133.85vp")
}
// 搜索框
Search({
value: this.filterText, // 将搜索框的值与 filterText 关联
placeholder: '输入搜索关键字...',
// controller: this.controller
})
.onChange((value: string) => {
this.filterText = value; // 设置搜索框的值到 filterText
})
.width('90%')
// .margin(20);
Scroll(this.scroller) {
Column(){
// 列出活动信息
ForEach(this.activities, (activity, index) => {
// 根据 filterText 过滤活动
if (
this.filterText === '' || // 如果搜索框为空，显示所有活动
activity.title.includes(this.filterText) || // 活动标题包含搜索关键字
activity.type.includes(this.filterText) // 活动类型包含搜索关键字
) {
// 如果满足搜索条件，显示活动
Row() {
Column() {
Row() {
Text(`${index + 1}.`)
.width("10%")
.fontSize("20fp");
Text(activity.title) // 活动标题
// .width("30%")
.fontSize("20fp")
}
Image('images/'+String(activity.type)+".png")
.margin({left:40,top:10})
.width("80%")
.height("300px")
.onClick(() => {
const secondaryButton = {
value: '我要报名',
fontColor: '#ffffff', // 可选，文字颜色
backgroundColor: '#007aff', // 可选，背景颜色
action: () => {
// @ts-ignore
this.activities[index].flag='1'
// @ts-ignore
console.log(this.activities[index].flag)
AlertDialog.show({
title: "报名成功",
message:"您已成功报名此活动"
});
} // 按钮被点击后执行的函数
};
const primaryButton = {
value: '取消',
fontColor: '#ffffff', // 可选，文字颜色
backgroundColor: 'red', // 可选，背景颜色
action: () => {
} // 按钮被点击后执行的函数
};
// 处理查看活动详情的逻辑
AlertDialog.show({
title: "活动详情",
message: `标题: ${activity.title}\n时间 ${activity.time}\n地点:${activity.where}\n详细信息: ${activity.description}\n\n`,
secondaryButton: secondaryButton,
primaryButton: primaryButton,
});
});
}
}
.width("95%")
.margin({ top: '10vp' })
.margin(10)
}
});
}
.height("100%")
.width('100%')
}
.scrollable(ScrollDirection.Vertical) // 滚动方向纵向
.scrollBar(BarState.On) // 滚动条常驻显示
.scrollBarColor(Color.Gray) // 滚动条颜色
.scrollBarWidth(10) // 滚动条宽度
}
.height("100%")
.width('100%')
}
.tabBar(this.TabBuilder(0));
//页面3
TabContent() {
Column() {
Column() {
Stack() {
Image($r('app.media.toxiang'))
.width("131.1vp")
.height("139.21vp")
.offset({ x: "-0.33vp", y: "-20.98vp" })
}
.width("99.7%")
// .height("105.66vp")
.offset({ x: "0.46vp", y: "-292.54vp" })
.margin(20)
// .backgroundColor("#8adff5")
Stack() {
Stack() {
Row(){
Image($r('app.media.exid'))
.width("40.68vp")
.height("40.79vp")
Text(" 退出登录")
.width("262.68vp")
.height("43.79vp")
.fontSize("20fp")
}
}
// .backgroundColor("#a0d9f6")
.width("90%")
.height("62.73vp")
.offset({ x: "1.33vp", y: "-36.77vp" })
.onClick(()=>{
router.replaceUrl({
url: "pages/Index"
// this.paramsFromIndex?.['name']
})
})
Stack() {
Row(){
Image($r('app.media.huodong'))
.width("40.68vp")
.height("40.79vp")
Text(" 新增活动")
.width("262.68vp")
.height("43.79vp")
// .offset({ x: "34.29vp", y: "-0.17vp" })
.fontSize("20fp")
}
}
// .backgroundColor("#a0d9f6")
.width("90%")
.height("62.73vp")
.offset({ x: "1.33vp", y: "-115.67vp" })
.onClick(()=>{
router.replaceUrl({
url: "pages/demo2",
params: {
activities:this.activities
}
})
})
Stack() {
Row(){
Image($r('app.media.canyu'))
.width("40.68vp")
.height("40.79vp")
Text(" 已参与的活动")
.width("262.68vp")
.height("43.79vp")
// .offset({ x: "34.29vp", y: "-0.17vp" })
.fontSize("20fp")
}
}
.width("90%")
.height("62.73vp")
// .backgroundColor("#a0d9f6")
.offset({ x: "1.33vp", y: "-192.39vp" })
.onClick(() => {
router.replaceUrl({
url: "pages/canyu",
params: {
activities:this.activities
}
})
})
}
.width("99.4%")
.height("465.88vp")
.offset({ x: "0.92vp", y: "-286.87vp" })
}
.width("100%")
.height("100%")
.offset({ x: "0vp", y: "311.31vp" })
.justifyContent(FlexAlign.Center)
}
.width("100%")
.height("100%")
}
.tabBar(this.TabBuilder(1));
//页面四
TabContent() {
Web({ src: 'https://www.huawei.com/cn/events', controller: this.webviewController})
}.tabBar(this.TabBuilder(2));
}
.scrollable(true)
.vertical(false)
.barMode(BarMode.Fixed)
.onChange((index) => {
this.mCurrentPage = index;
});2.2 ArkTS代码解析
这段代码是使用HarmonyOS NEXT声明式UI框架的方式来创建一个具有多个选项卡的界面。以下是对代码的简要分析：
-
Tabs组件：这是一个包含多个选项卡的组件，每个选项卡都有一个与之相关联的内容。选项卡的位置是在底部（barPosition: BarPosition.End）。 -
TabContent组件：这是每个选项卡的内容组件。代码中有三个TabContent组件，分别对应不同的选项卡。 -
第一个选项卡内容：
- 使用
Swiper组件实现图片轮播，显示两张图片。 - 紧接着是一个搜索框(
Search)，支持根据输入的关键字过滤活动。 - 之后是一个可滚动的列表，列出活动信息，根据
filterText进行过滤，并提供报名功能。活动信息包括标题、类型、时间、地点等。
- 使用
-
第二个选项卡内容：
- 包含一个头像图片和三个功能按钮：退出登录、新增活动、已参与的活动。点击按钮会触发不同的操作，如跳转到其他页面或显示活动详情。
-
第三个选项卡内容：
- 使用
Web组件展示一个Web页面，链接是'www.huawei.com/cn/events'。
- 使用
-
最后，
Tabs组件设置了一些全局属性：scrollable(true)允许滚动。vertical(false)水平方向排列。barMode(BarMode.Fixed)固定选项卡栏。onChange事件处理器，当选项卡切换时更新this.mCurrentPage。
总体来说，这段代码实现了一个包含多个选项卡的界面，每个选项卡有不同的功能和展示内容。界面包括图片轮播、搜索框、活动列表、头像和功能按钮、以及展示外部网页的选项卡。
2.3 心得
HarmonyOS NEXT作为华为自研的操作系统，具有一系列优势如下。
- 微内核架构：HarmonyOS NEXT采用了微内核架构，将操作系统核心功能封装在一个小型、模块化的内核中，使得系统更加高效、稳定，并减少了内存占用。
- 高效的内存管理：其内核提供了高效的内存管理机制，包括内存分配、回收和压缩等技术，有效地减少了内存占用并提高了系统性能。
- 支持多种文件系统和设备驱动：鸿蒙NEXT的内核支持多种文件系统，如FAT32、exFAT和NTFS等，并且提供了丰富的设备驱动程序，可以支持多种硬件设备，实现设备的接入和控制。
- 安全性：HarmonyOS NEXT提供了多层次的安全防护，包括硬件加密、数据安全和恶意软件防护等技术，确保了系统的安全性和稳定性。
- 分布式能力：实现了多设备之间的协同工作和资源共享，通过分布式软总线技术，不同设备可以像连接在一起进行数据传输和交互。
- 轻量化设计：系统采用了轻量化的设计理念，针对不同设备进行定制化开发，使系统运行更加流畅、高效。
- 原生流畅与安全：拥有自己的系统内核和文件系统，高效资源的调度和管理使应用能够充分利用设备的性能，提升运行速度和稳定性。同时，从系统到应用提供全方位的安全保障，有效保护用户的个人数据和隐私。
- 强大的AI功能：HarmonyOS NEXT拥有强大的人工智能框架，为应用提供更强大的智能功能。
在这段代码中，使用了一种声明式UI框架的方式，使界面的构建更加清晰和易于理解。以下是一些心得：
- 组件化和声明式UI： 通过定义各种组件，如
Tabs、TabContent、Swiper、Search等，使界面的结构清晰，易于理解和维护。采用声明式UI的方式，通过描述界面的状态和样式，而不是直接操作DOM，提高了代码的可读性。 - 事件处理和交互： 代码中通过
.onChange和.onClick等方法实现了事件处理，响应用户的交互操作。这种方式使得代码中交互逻辑的定义更为直观，与界面的结构分离，提高了代码的可维护性。 - 样式和布局： 通过链式调用的方式设置样式和布局参数，使得代码看起来更为简洁。同时，通过组件的嵌套和层次结构，实现了复杂的布局，包括图片轮播、活动列表、按钮等。
- 路由导航： 通过
router.replaceUrl实现页面的跳转，使得不同的功能模块能够在用户交互时进行切换，增强了应用的导航和流程控制。 - 异步处理： 代码中未涉及明显的异步操作，但在实际应用中，可能需要处理异步请求、数据加载等情况。在这种框架下，可能需要使用一些异步处理的机制，确保界面的流畅性和数据的及时更新。
总体而言，这段代码展示了一种现代化的前端开发风格，注重组件化、声明式UI、事件驱动等特点，使得代码结构清晰，易于维护
本文正在参加华为鸿蒙有奖征文征文活动