一.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、事件驱动等特点，使得代码结构清晰，易于维护

本文正在参加华为鸿蒙有奖征文征文活动

HarmonyOS NEXT应用开发实战—开箱即用的应用首页页面