环境&指南

API版本 ：12
DevStudio版本 ：DevEco Studio NEXT Developer Beta1 Build Version: 5.0.3.403, built on June 20, 2024
模拟器 ：DevStudio自带模拟器
HarmonyOS官网首页 ：developer.huawei.com/consumer/cn...
HarmonyOS代码仓库 ：gitee.com/openharmony
HarmonyOS API指南 ：developer.huawei.com/consumer/cn...
HarmonyOS DevStudio下载 ：developer.huawei.com/consumer/cn...
WanAndroid官方 ：wanandroid.com/index

简介

通过学习HarmonyOS，实战项目WanAndroid 鸿蒙版，API接口均来自WanAndroid 开源接口，我们一起来做个App吧。

App采用分层架构 、模块化设计 、MVVM模式 等，布局实现均是原生ArkUI ,。
功能实现 ：开屏页、骨架屏、上拉加载、下拉刷新、状态管理、懒加载、Navigation跨模块页面跳转、瀑布流、Lottie动画、显示动画、属性动画、文字高亮处理等。
界面设计来自个人对App UI理解，合理布局，动画处理，尽量使美感提升，占用时间也是蛮多的。

界面预览

选取主页面和部分页面进行展示

静态预览

首页	学习	广场	我的	体系	导航	问答	搜索	搜索结果	登录	注册

动态预览

实现思路&过程

架构

主体架构采用分层架构 ，产品层+特性层+公共层，分层设计。
分模块设计，例如首页模块、学习模块、广场模块、我的等主题模块
小结：特性层提供了核心业务模块，公共能力层则提供了一套基础的开发组件和服务，包括公共UI组件、数据存储、网络和工具库。

模块化不仅是一个设计原则，更是一种开发实践。它旨在将应用程序拆分为多个功能模块，每个功能模块负责特定的功能或特性。功能模块可以独立开发、编译和部署，也可以在不同的设备上灵活组合和调用。

页面

页面拢共分为：开屏页+ 主体四大板块（首页、学习、广场、我的）+具体页面（搜索页、搜索结果、注册、登录、跳转Web页等）
主要讲讲主体界面开发过程：

主体是 Navigation + Tabs + TabContent + 自定义TabBar, TabContent则承载4个页面实现

ArkTs 复制代码

Tabs({ index: this.currentIndex,controller:this.mTabController }) {
  TabContent() {
    HomeView()
  }
  TabContent() {
    LearningView()
  }
  TabContent() {
    SquareView()
  }
  TabContent() {
    MineView()
  }
}.layoutWeight(1)
.barHeight(0)
.scrollable(false)
.onChange((index) => {
  this.currentIndex = index;
})
CustomTabBar({ currentIndex: $currentIndex })

首页实现骨架屏，加载失败页，主体页面上拉加载，下拉刷新固定头部View + List 主要通过条件控制渲染，根据状态渲染现骨架屏，加载失败页。LazyForEach 懒加载文章Item 。
学习页面开发，嵌套3个TabContent 《体系》、《导航》、《问答》板块，实现左右滑动，上拉加载，下拉刷新，首次展示骨架屏，每个页面为了保持不同的展示风格，采用不同的Item展示，《体系》采用大类目Item ，《导航》采用吸顶Item 展示类目，《问答》采用瀑布流Item，高度是随内用撑开的。总体界面简约为主。
广场页面开发，骨架屏+背景图+展示公众号tag+ List列表懒加载数据，这里加入搜索图标变化动画，采用属性动画，根据位置变化，触发动画。背景图下拉变大效果，则采用手势下拉Y轴变化，对背景图的高度变化处理。

ArkTs 复制代码

  .onDidScroll((yOffset: number) => {
    //当列表滚动时，限制列表的下拉操作
    if (yOffset > 0) {
      this.canPullDown = false;
    }
  })
  .parallelGesture(PanGesture({ direction: PanDirection.Down })
    .onActionUpdate((event?: GestureEvent) => {
      this.handleGestureEvent(event)
    })
    .onActionEnd(() => {
      animateTo({ duration: 300, curve: Curve.LinearOutSlowIn }, () => {
        this.offsetY = 0;
      })
    })
  )
}

5.我的页面开发，整体采用Scroll+Colum 进行布局，加入第三方动画实现lottie,提升App整体美感。具体有Lottie 使用如下：

ArkTs 复制代码

Canvas(this.mainCanvasRenderingContext)
  .height(CommonConstants.FULL_PERCENT)
  .width(CommonConstants.FULL_PERCENT)
  .onReady(() => {
    // this.mainCanvasRenderingContext.imageSmoothingEnabled = true;
    // this.mainCanvasRenderingContext.imageSmoothingQuality = 'medium'
    LottieUtil.loadAnimation({
      container: this.mainCanvasRenderingContext,
      renderer: 'canvas',
      loop: true,
      autoplay: true,
      name: "Mine",
      path: this.path
    })
   
  })
  .onVisibleAreaChange([1, 0], (isVisible: boolean, currentRatio: number) => {
    if (isVisible) {
      LottieUtil.play("Mine")
    } else {
      LottieUtil.stop("Mine")
    }
  })

步骤是：加载，播放，这边对播放进行控制，在不可见的时候进行停止播放，进行了边界判断。

总结

通过此次实战，实现WanAndroid 大部分功能。第三方库使用：axios网络请求，Lottie动画库。其他均为原生，可见用原生可以快速构建App,不像Android，想实现一些功能需要大量的自定义和第三方库，总体工程量还是蛮大的，UI设计和代码编对然对比Android有所减少，但是有些必要的工作还是蛮多的。
本文正在参加华为鸿蒙有奖征文征文活动

HarmonyOS 实战项目：WanAndroidApp

环境&指南

简介

界面预览

静态预览

动态预览

实现思路&过程

架构

页面

总结