HarmonyOS 应用开发实战-开箱即用的首页页面构建与 ArkTS 解析【HarmonyOS 5.0（Next）】
一、HarmonyOS Next 5.0 的优势
AI 能力：HarmonyOS Next 5.0 通过系统级 AI 能力，将 AI 下沉至操作系统并赋能给多个子系统，从而提升了应用的智能化体验。例如，小艺助手在 HarmonyOS Next 5.0 中得到了显著增强，其记忆能力、知识问答能力以及交互设计都进行了全面升级，使得用户在使用过程中能够获得更加便捷、智能的体验。个性化服务：HarmonyOS Next 5.0 提供了丰富的个性化服务，如心情盒子主题等，这些服务可以根据用户的喜好和需求进行定制，从而满足用户的个性化需求。
设备间无缝连接：HarmonyOS Next 5.0 基于全新的分布式软总线技术，实现了设备间的无缝连接。这意味着用户可以在不同设备之间自由流转和分享应用、服务和内容，从而提升了整体的使用体验。多种设备共享一个系统：在 HarmonyOS Next 5.0 中，多种设备可以共享一个系统，这使得设备间可以相互感知和协同工作。这种协同工作的能力不仅提升了整体的工作效率，还为用户带来了更加便捷的使用体验。
全新的星盾安全架构：HarmonyOS Next 5.0 采用了全新的星盾安全架构，这一架构重建了操作系统的安全体系和秩序。通过全面梳理系统授权和禁止开放不合理权限，HarmonyOS Next 5.0 有效地保护了用户的隐私安全。安全访问机制：HarmonyOS Next 5.0 还首创了安全访问机制，从“管权限”到“管数据”，确保了用户隐私数据的安全。这种安全机制不仅提升了系统的安全性，还为用户提供了更加安心的使用体验。
系统优化：HarmonyOS Next 5.0 对系统进行了全面优化，包括提升流畅度、增强续航、降低功耗等方面。这些优化措施使得系统在运行过程中更加流畅、稳定，从而提升了用户的使用体验。应用优化：除了系统优化外，HarmonyOS Next 5.0 还针对第三方应用进行了优化。通过与应用开发者的深入合作，HarmonyOS Next 5.0 确保了系统应用与三方应用的一致流畅体验。
广泛的设备兼容性：HarmonyOS Next 5.0 支持多种华为设备，包括智能手机、平板电脑、穿戴设备等。这种广泛的设备兼容性使得用户可以在不同设备之间无缝切换和使用，从而提升了整体的使用便捷性。持续的更新与升级：华为计划为 HarmonyOS Next 5.0 提供持续的更新与升级服务。这意味着用户将能够不断获得新的功能和优化体验，从而保持系统的先进性和竞争力。
1.1 项目背景
HarmonyOS（鸿蒙操作系统）是华为公司推出的一种分布式操作系统。它被设计为一种全场景、全连接的操作系统，旨在实现在各种设备之间的无缝协同和共享，包括智能手机、平板电脑、智能穿戴、智能家居、车载系统等。HarmonyOS 的目标是构建一个统一的、开放的、全场景的操作系统生态系统。
1.2 ArkTS 详解
ArkTS 是鸿蒙生态的应用开发语言。它在保持 TypeScript（简称 TS）基本语法风格的基础上，对 TS 的动态类型特性施加更严格的约束，引入静态类型。同时，提供了声明式 UI、状态管理等相应的能力，让开发者可以以更简洁、更自然的方式开发高性能应用。自然简洁语法 ArkTS 提供了简洁自然的声明式语法、组件化机制、数据-UI 自动关联等能力，实现了贴近自然语言，书写效率更高的编程方式，为开发者带来易学、易懂、极简开发的优质体验。轻量化并发机制 ArkCompiler 运行时在 HarmonyOS 上提供了 Worker API 支持并发编程。在运行时实例内存隔离的基础上，ArkCompiler 通过共享运行实例中的不可变或者不易变的对象、内建代码块、方法字节码等技术手段，优化了并发运行实例的启动性能和内存开销。
二.HarmonyOS 应用开发实战—开箱即用的应用首页页面
2.1 ArkTS 页面源码
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 代码解析
这段代码是使用一种类似于 React Native 的声明式 UI 框架的方式来创建一个具有多个选项卡的界面。以下是对代码的简要分析：
Tabs组件：这是一个包含多个选项卡的组件，每个选项卡都有一个与之相关联的内容。选项卡的位置是在底部（barPosition: BarPosition.End）。
TabContent组件：这是每个选项卡的内容组件。代码中有三个TabContent组件，分别对应不同的选项卡。
第一个选项卡内容：
使用Swiper组件实现图片轮播，显示两张图片。
紧接着是一个搜索框(Search)，支持根据输入的关键字过滤活动。
之后是一个可滚动的列表，列出活动信息，根据filterText进行过滤，并提供报名功能。活动信息包括标题、类型、时间、地点等。
第二个选项卡内容：
包含一个头像图片和三个功能按钮：退出登录、新增活动、已参与的活动。点击按钮会触发不同的操作，如跳转到其他页面或显示活动详情。
第三个选项卡内容：
使用Web组件展示一个 Web 页面，链接是'https://www.huawei.com/cn/events'。
最后，Tabs组件设置了一些全局属性：
scrollable(true) 允许滚动。
vertical(false) 水平方向排列。
barMode(BarMode.Fixed) 固定选项卡栏。
onChange 事件处理器，当选项卡切换时更新this.mCurrentPage。
总体来说，这段代码实现了一个包含多个选项卡的界面，每个选项卡有不同的功能和展示内容。界面包括图片轮播、搜索框、活动列表、头像和功能按钮、以及展示外部网页的选项卡。
2.3 心得
在这段代码中，使用了一种声明式 UI 框架的方式，使界面的构建更加清晰和易于理解。以下是一些心得：
组件化和声明式 UI： 通过定义各种组件，如Tabs、TabContent、Swiper、Search等，使界面的结构清晰，易于理解和维护。采用声明式 UI 的方式，通过描述界面的状态和样式，而不是直接操作 DOM，提高了代码的可读性。
事件处理和交互： 代码中通过.onChange和.onClick等方法实现了事件处理，响应用户的交互操作。这种方式使得代码中交互逻辑的定义更为直观，与界面的结构分离，提高了代码的可维护性。
样式和布局： 通过链式调用的方式设置样式和布局参数，使得代码看起来更为简洁。同时，通过组件的嵌套和层次结构，实现了复杂的布局，包括图片轮播、活动列表、按钮等。
路由导航： 通过router.replaceUrl实现页面的跳转，使得不同的功能模块能够在用户交互时进行切换，增强了应用的导航和流程控制。
异步处理： 代码中未涉及明显的异步操作，但在实际应用中，可能需要处理异步请求、数据加载等情况。在这种框架下，可能需要使用一些异步处理的机制，确保界面的流畅性和数据的及时更新。
总体而言，这段代码展示了一种现代化的前端开发风格，注重组件化、声明式 UI、事件驱动等特点，使得代码结构清晰，易于维护。
评论